feat: 조직도 폼 작업

apps/cs/src/widgets/dnd-tree/ui/dnd-tree.tsx

@@ -11,6 +11,7 @@ import {
   type DropOptions,
 } from "@minoru/react-dnd-treeview";
 import { Button } from "@common/components/ui";
+import { cn } from "@common/components/lib";
 import { CustomNode } from "./custom-node";
 
 interface TreeData extends Record<string, unknown> {
@@ -19,9 +20,12 @@ interface TreeData extends Record<string, unknown> {
 
 type EditableNodeProps = { depth: number };
 
-type TreeProps<T extends TreeData> = {
+type DndTreeProps<T extends TreeData> = {
   tree: NodeModel<T>[];
   selectedNodeId: number;
+  classes?: {
+    wrapper: string;
+  };
   renderEditableNode: (props: EditableNodeProps) => ReactElement;
   handleSelectNode: (node: NodeModel<T>) => void;
   handleDropNode: (newTree: NodeModel<T>[], options: DropOptions<T>) => void;
@@ -31,11 +35,12 @@ type TreeProps<T extends TreeData> = {
 function DndTree<T extends TreeData>({
   tree,
   selectedNodeId,
+  classes,
   renderEditableNode,
   handleSelectNode,
   handleDropNode,
   updateNodeName,
-}: TreeProps<T>) {
+}: DndTreeProps<T>) {
   const treeMethods = useRef<TreeMethods>(null);
 
   const isAdditionalParent = (node: NodeModel<T>): boolean => {
@@ -46,7 +51,12 @@ function DndTree<T extends TreeData>({
 
   return (
     <>
-      <div className="max-h-[calc(100vh-33.5rem)] overflow-auto">
+      <div
+        className={cn(
+          "max-h-[calc(100vh-33.5rem)] overflow-auto",
+          classes?.wrapper,
+        )}
+      >
         <DndProvider backend={MultiBackend} options={getBackendOptions()}>
           <Tree
             tree={tree}