From 84519658c1f6066d25c270afdeda61b3b17da64d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 28 Mar 2025 18:50:18 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=20=EC=B5=9C=EB=8C=80=20=EB=86=92=EC=9D=B4=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/menu/ui/menu-page.tsx |   2 +-
 apps/cs/src/pages/menu/ui/menu-tree.tsx | 111 +++++++++++++-----------
 2 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index 87227fedd..52a63eb8a 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-page.tsx
@@ -198,7 +198,7 @@ function MenuPage() {
   return (
     <>
       <PageLayout pageTitle="메뉴 관리">
-        <div className="card flex !min-h-[calc(100vh-16.8rem)] gap-2">
+        <div className="card !mb-0 flex !min-h-[calc(100vh-16.8rem)] gap-2">
           <div className="card card-border w-[24rem]">
             <Select value={siteId} onValueChange={handleSiteIdChange}>
               <SelectTrigger>
diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx
index b5782ec89..76dc02610 100644
--- a/apps/cs/src/pages/menu/ui/menu-tree.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx
@@ -60,63 +60,68 @@ 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) {
+      <div className="max-h-[calc(100vh-33.5rem)] overflow-auto">
+        <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>
       <div className="flex gap-2">
         <Button
           color="lightGray"