design: 트리 메뉴 최대 높이 지정

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>

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"