refactor: editable node 컴포넌트 분리

apps/cs/src/pages/menu/ui/base-type-menu-form.tsx

@@ -17,7 +17,7 @@ import {
 } from "@/shared/ui/form";
 import type { MenuFormData } from "../model/menu-interface";
 
-function BaseTypeForm({ form }: { form: UseFormReturn<MenuFormData> }) {
+function BaseTypeMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   const handleIconClick = (icon: string) => {
     form.setValue("iconNm", icon);
   };
@@ -125,4 +125,4 @@ function BaseTypeForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   );
 }
 
-export { BaseTypeForm };
+export { BaseTypeMenuForm };

apps/cs/src/pages/menu/ui/board-menu-form.tsx

@@ -16,7 +16,7 @@ import {
   FormMessage,
 } from "@/shared/ui/form";
 import type { MenuFormData } from "../model/menu-interface";
-import { BaseTypeForm } from "./base-type-form";
+import { BaseTypeMenuForm } from "./base-type-menu-form";
 
 function BoardMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   return (
@@ -97,7 +97,7 @@ function BoardMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
           </TableCell>
         </TableRow>
 
-        <BaseTypeForm form={form} />
+        <BaseTypeMenuForm form={form} />
 
         <TableRow>
           <TableHead>QR코드</TableHead>

apps/cs/src/pages/menu/ui/bottom-menu-form.tsx

@@ -1,7 +1,7 @@
 import { type UseFormReturn } from "react-hook-form";
 import { Table, TableBody } from "@common/components";
 import type { MenuFormData } from "../model/menu-interface";
-import { BaseTypeForm } from "./base-type-form";
+import { BaseTypeMenuForm } from "./base-type-menu-form";
 
 function BottomMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   return (
@@ -11,7 +11,7 @@ function BottomMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
         <col width="80%" />
       </colgroup>
       <TableBody>
-        <BaseTypeForm form={form} />
+        <BaseTypeMenuForm form={form} />
       </TableBody>
     </Table>
   );

apps/cs/src/pages/menu/ui/content-menu-form.tsx

@@ -16,7 +16,7 @@ import {
   FormMessage,
 } from "@/shared/ui/form";
 import type { MenuFormData } from "../model/menu-interface";
-import { BaseTypeForm } from "./base-type-form";
+import { BaseTypeMenuForm } from "./base-type-menu-form";
 
 function ContentMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   return (
@@ -97,7 +97,7 @@ function ContentMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
           </TableCell>
         </TableRow>
 
-        <BaseTypeForm form={form} />
+        <BaseTypeMenuForm form={form} />
 
         <TableRow>
           <TableHead>QR코드</TableHead>

apps/cs/src/pages/menu/ui/editable-node.tsx

@@ -0,0 +1,35 @@
+import { Button, Input } from "@common/components/ui";
+import type { ComponentProps } from "react";
+
+type EditableNodeProps = {
+  onSave: () => void;
+  onCancel: () => void;
+} & ComponentProps<typeof Input>;
+
+function EditableNode({ onSave, onCancel, ...props }: EditableNodeProps) {
+  return (
+    <>
+      <Input {...props} className="h-[2.5rem] !text-[1.3rem] text-foreground" />
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 !bg-transparent"
+          onClick={onSave}
+        >
+          <i className="diveicon di-check text-2xl" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 !bg-transparent"
+          onClick={onCancel}
+        >
+          <i className="diveicon di-x" />
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export { EditableNode };

apps/cs/src/pages/menu/ui/empty-menu-form.tsx

@@ -1,7 +1,7 @@
 import { type UseFormReturn } from "react-hook-form";
 import { Table, TableBody } from "@common/components";
 import type { MenuFormData } from "../model/menu-interface";
-import { BaseTypeForm } from "./base-type-form";
+import { BaseTypeMenuForm } from "./base-type-menu-form";
 
 function EmptyMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   return (
@@ -11,7 +11,7 @@ function EmptyMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
         <col width="80%" />
       </colgroup>
       <TableBody>
-        <BaseTypeForm form={form} />
+        <BaseTypeMenuForm form={form} />
       </TableBody>
     </Table>
   );

apps/cs/src/pages/menu/ui/inside-menu-form.tsx

@@ -1,7 +1,7 @@
 import { type UseFormReturn } from "react-hook-form";
 import { Table, TableBody } from "@common/components";
 import type { MenuFormData } from "../model/menu-interface";
-import { BaseTypeForm } from "./base-type-form";
+import { BaseTypeMenuForm } from "./base-type-menu-form";
 
 function InsideMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   return (
@@ -11,7 +11,7 @@ function InsideMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
         <col width="80%" />
       </colgroup>
       <TableBody>
-        <BaseTypeForm form={form} />
+        <BaseTypeMenuForm form={form} />
       </TableBody>
     </Table>
   );

apps/cs/src/pages/menu/ui/menu-form.tsx

@@ -95,7 +95,7 @@ function MenuForm({
             <div className="card">
               <BaseMenuForm form={form} menuCd={menuCd} />
               <div className="-mt-[0.1rem]">
-                {renderTypeForm(menuType, form)}
+                {renderTypeMenuForm(menuType, form)}
               </div>
             </div>
           </div>
@@ -116,7 +116,10 @@ function MenuForm({
   );
 }
 
-function renderTypeForm(menuType: string, form: UseFormReturn<MenuFormData>) {
+function renderTypeMenuForm(
+  menuType: string,
+  form: UseFormReturn<MenuFormData>,
+) {
   switch (menuType) {
     case MENU_TYPE.EMPTY:
       return <EmptyMenuForm form={form} />;

apps/cs/src/pages/menu/ui/menu-node.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { NodeModel } from "@minoru/react-dnd-treeview";
-import { Button, Input } from "@common/components/ui";
+import { Button } from "@common/components/ui";
 import { cn } from "@common/components/lib";
 import { ENDPOINT } from "@/shared/config";
 import { MenuApi } from "../api/menu-service";
 import type { TreeMenu } from "../model/menu-interface";
+import { EditableNode } from "./editable-node";
 
 type MenuNodeProps = {
   node: NodeModel<TreeMenu>;
@@ -52,6 +53,11 @@ function MenuNode({
     setEditMode(false);
   };
 
+  const handleCancel = () => {
+    setEditMode(false);
+    setNodeName(text);
+  };
+
   return (
     <div
       style={{ paddingInlineStart: indent }}
@@ -59,19 +65,17 @@ function MenuNode({
         "group flex cursor-pointer items-center justify-between gap-2 rounded-sm p-2 hover:bg-accent",
         isSelected && "!bg-[rgba(32,148,250,0.2)]",
       )}
-      onClick={handleSelect}
     >
-      <div className="flex items-center">
       {editMode ? (
-          <>
+        <EditableNode
-            <Input
           value={nodeName}
           onChange={(e) => setNodeName(e.target.value)}
-              className="h-[2.5rem] !text-[1.3rem] text-foreground"
+          onSave={handleSave}
+          onCancel={handleCancel}
         />
-          </>
       ) : (
         <>
+          <div className="flex items-center" onClick={handleSelect}>
             {data?.children?.length && (
               <i
                 className={cn(
@@ -82,32 +86,7 @@ function MenuNode({
               />
             )}
             <span className="text-[1.4rem] font-medium text-label">{text}</span>
-          </>
-        )}
           </div>
-      {editMode ? (
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 !bg-transparent"
-            onClick={handleSave}
-          >
-            <i className="diveicon di-check text-2xl" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-8 !bg-transparent"
-            onClick={() => {
-              setEditMode(false);
-              setNodeName(text);
-            }}
-          >
-            <i className="diveicon di-x" />
-          </Button>
-        </div>
-      ) : (
           <Button
             variant="ghost"
             size="icon"
@@ -116,6 +95,7 @@ function MenuNode({
           >
             <i className="diveicon di-pencil" />
           </Button>
+        </>
       )}
     </div>
   );

apps/cs/src/pages/menu/ui/menu-page.tsx

@@ -141,7 +141,7 @@ function MenuPage() {
               ))}
             </SelectContent>
           </Select>
-          {treeData && (
+          {siteId && (
             <>
               <div className="my-4 flex gap-2">
                 <Button size="sm" color="primary" className="flex-1">

apps/cs/src/pages/menu/ui/outside-menu-form.tsx

@@ -1,7 +1,7 @@
 import { type UseFormReturn } from "react-hook-form";
 import { Table, TableBody } from "@common/components";
 import type { MenuFormData } from "../model/menu-interface";
-import { BaseTypeForm } from "./base-type-form";
+import { BaseTypeMenuForm } from "./base-type-menu-form";
 
 function OutsideMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
   return (
@@ -11,7 +11,7 @@ function OutsideMenuForm({ form }: { form: UseFormReturn<MenuFormData> }) {
         <col width="80%" />
       </colgroup>
       <TableBody>
-        <BaseTypeForm form={form} />
+        <BaseTypeMenuForm form={form} />
       </TableBody>
     </Table>
   );