[apps/cs] fix: 담당자 조회 다이얼로그 기능 수정 (CS_UT01020108)

apps/cs/src/pages/menu/lib/utils.ts

@@ -153,6 +153,7 @@ export const filterUserOrganizationTreeDataByKeyword = (
 ): NodeModel<TreeUserOrganization | TreeUser>[] => {
   return Array.from(
     treeData.reduce((matchedNodes, node) => {
+      if (node.data && "ognzSn" in node.data) return matchedNodes; // 조직 노드는 필터링 제외
       if (!node.text.includes(keyword)) return matchedNodes;
 
       matchedNodes.add(node);

apps/cs/src/pages/menu/ui/organization-search-dialog.tsx

@@ -12,7 +12,9 @@ import {
 import {
   Button,
   Dialog,
+  DialogClose,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -52,10 +54,22 @@ function OrganizationSearchDialog({
   });
 
   const handleSelectNode = (node: NodeModel<TreeModel>) => {
+    if (node.data && "ognzSn" in node.data) return;
     setSelectedNode(node);
     handleUserSelect(node.data as TreeUser);
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTree(filterUserOrganizationTreeDataByKeyword(treeData ?? [], keyword));
+  };
+
+  const handleReset = () => {
+    setKeyword("");
+    setTree(treeData ?? []);
+  };
+
   useEffect(() => {
     setTree(treeData ?? []);
   }, [treeData]);
@@ -73,21 +87,25 @@ function OrganizationSearchDialog({
           <DialogTitle>담당자 조회</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col gap-4">
-          <div className="card card-border !m-0 flex w-full items-center gap-2">
-            <Input
-              className="h-[2.5rem] !text-[1.3rem]"
-              value={keyword}
-              onChange={(e) => setKeyword(e.target.value)}
-            />
-            <Button
-              size="sm"
-              onClick={() =>
-                setTree(filterUserOrganizationTreeDataByKeyword(tree, keyword))
-              }
-            >
-              <i className="diveicon di-search text-base" />
-              조회
-            </Button>
+          <div className="card card-border !m-0 w-full">
+            <form onSubmit={handleSubmit} className="flex items-center gap-2">
+              <Input
+                className="h-[2.5rem] !text-[1.3rem]"
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+              />
+              <Button type="submit" size="sm">
+                조회
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                color="white"
+                onClick={handleReset}
+              >
+                초기화
+              </Button>
+            </form>
           </div>
           <div className="h-[36rem] overflow-auto">
             <DndProvider backend={MultiBackend} options={getBackendOptions()}>
@@ -116,6 +134,16 @@ function OrganizationSearchDialog({
             </DndProvider>
           </div>
         </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button color="white" onClick={() => setSelectedNode(null)}>
+              취소
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button disabled={!selectedNode}>확인</Button>
+          </DialogClose>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );