feat: 트리 메뉴 전체 펼침/접기 기능 작업

2025-03-28 18:32:53 +09:00
parent ca1c0be47f
commit 8b9d493ccd
1 changed files with 78 additions and 53 deletions
@@ -11,6 +11,7 @@ import {
  type NodeModel,
  type TreeMethods,
 } from "@minoru/react-dnd-treeview";
+import { Button } from "@common/components/ui";
 import { ENDPOINT } from "@/shared/config";
 import { MenuApi } from "../api/menu-service";
 import type { MenuFormData, TreeMenu, TreeNode } from "../model/menu-interface";
@@ -58,63 +59,87 @@ function MenuTree({
  };

  return (
-    <DndProvider backend={MultiBackend} options={getBackendOptions()}>
-      <Tree
-        tree={tree}
-        rootId={0}
-        ref={treeMethods}
-        render={(node: NodeModel<TreeMenu>, { depth, isOpen, onToggle }) => {
-          if (node.id === -1) {
+    <>
+      <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+        <Tree
+          tree={tree}
+          rootId={0}
+          ref={treeMethods}
+          render={(node: NodeModel<TreeMenu>, { depth, isOpen, onToggle }) => {
+            if (node.id === -1) {
+              return (
+                <EditableNode
+                  value={additionalNodeForm.watch("menuKornNm") ?? ""}
+                  onChange={(e) =>
+                    additionalNodeForm.setValue("menuKornNm", e.target.value)
+                  }
+                  depth={depth}
+                  onSave={onAdditionalNodeSave}
+                  onCancel={onAdditionalNodeCancel}
+                />
+              );
+            }
            return (
-              <EditableNode
-                value={additionalNodeForm.watch("menuKornNm") ?? ""}
-                onChange={(e) =>
-                  additionalNodeForm.setValue("menuKornNm", e.target.value)
-                }
+              <MenuNode
+                node={node}
                depth={depth}
-                onSave={onAdditionalNodeSave}
-                onCancel={onAdditionalNodeCancel}
+                treeMethods={treeMethods.current}
+                isOpen={isOpen}
+                isSelected={selectedMenu?.menuCd === node.id}
+                isAdditionalParent={isAdditionalParent(node)}
+                onToggle={onToggle}
+                onSelect={handleSelectNode(onSelectNode)}
              />
            );
-          }
-          return (
-            <MenuNode
-              node={node}
-              depth={depth}
-              treeMethods={treeMethods.current}
-              isOpen={isOpen}
-              isSelected={selectedMenu?.menuCd === node.id}
-              isAdditionalParent={isAdditionalParent(node)}
-              onToggle={onToggle}
-              onSelect={handleSelectNode(onSelectNode)}
-            />
-          );
-        }}
-        onDrop={handleDropNode(modifyTreeMenu)}
-        classes={{
-          root: "p-4",
-          container: "flex flex-col",
-          dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
-          placeholder: "relative",
-        }}
-        sort={false}
-        dropTargetOffset={5}
-        insertDroppableFirst={false}
-        canDrop={(_, { dragSource, dropTargetId }) => {
-          if (dragSource?.parent === dropTargetId) {
-            return true;
-          }
-        }}
-        placeholderRender={(_, { depth }) => {
-          return (
-            <div
-              className="absolute right-0 top-0 h-[0.2rem] bg-primary"
-              style={{ left: depth * 10 + 5 }}
-            />
-          );
-        }}
-      />
-    </DndProvider>
+          }}
+          onDrop={handleDropNode(modifyTreeMenu)}
+          classes={{
+            root: "p-4",
+            container: "flex flex-col",
+            dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
+            placeholder: "relative",
+          }}
+          sort={false}
+          dropTargetOffset={5}
+          insertDroppableFirst={false}
+          canDrop={(_, { dragSource, dropTargetId }) => {
+            if (dragSource?.parent === dropTargetId) {
+              return true;
+            }
+          }}
+          placeholderRender={(_, { depth }) => {
+            return (
+              <div
+                className="absolute right-0 top-0 h-[0.2rem] bg-primary"
+                style={{ left: depth * 10 + 5 }}
+              />
+            );
+          }}
+        />
+      </DndProvider>
+      <div className="flex gap-2">
+        <Button
+          color="lightGray"
+          className="flex-1 items-center px-0"
+          onClick={() => {
+            treeMethods.current?.openAll();
+          }}
+        >
+          <i className="diveicon di-arrows-angle-expand" />
+          전체펼침
+        </Button>
+        <Button
+          color="lightGray"
+          className="flex-1 items-center px-0"
+          onClick={() => {
+            treeMethods.current?.closeAll();
+          }}
+        >
+          <i className="diveicon di-arrows-angle-contract" />
+          전체접기
+        </Button>
+      </div>
+    </>
  );
 }