From 8b9d493ccd77427b75ef45d904fc1dc5e8aeb908 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 28 Mar 2025 18:32:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=20=EC=A0=84=EC=B2=B4=20=ED=8E=BC=EC=B9=A8/=EC=A0=91=EA=B8=B0?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/menu/ui/menu-tree.tsx | 131 ++++++++++++++----------
 1 file changed, 78 insertions(+), 53 deletions(-)

diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx
index 59f55b4c2..b5782ec89 100644
--- a/apps/cs/src/pages/menu/ui/menu-tree.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx
@@ -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>
+    </>
   );
 }