From c5f1718441734dc53fbfcad43e8b399e5ab2a301 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 26 Mar 2025 18:20:33 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20editable=20node=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...-type-form.tsx => base-type-menu-form.tsx} |  4 +-
 apps/cs/src/pages/menu/ui/board-menu-form.tsx |  4 +-
 .../cs/src/pages/menu/ui/bottom-menu-form.tsx |  4 +-
 .../src/pages/menu/ui/content-menu-form.tsx   |  4 +-
 apps/cs/src/pages/menu/ui/editable-node.tsx   | 35 ++++++++++
 apps/cs/src/pages/menu/ui/empty-menu-form.tsx |  4 +-
 .../cs/src/pages/menu/ui/inside-menu-form.tsx |  4 +-
 apps/cs/src/pages/menu/ui/menu-form.tsx       |  7 +-
 apps/cs/src/pages/menu/ui/menu-node.tsx       | 64 +++++++------------
 apps/cs/src/pages/menu/ui/menu-page.tsx       |  2 +-
 .../src/pages/menu/ui/outside-menu-form.tsx   |  4 +-
 11 files changed, 77 insertions(+), 59 deletions(-)
 rename apps/cs/src/pages/menu/ui/{base-type-form.tsx => base-type-menu-form.tsx} (97%)
 create mode 100644 apps/cs/src/pages/menu/ui/editable-node.tsx

diff --git a/apps/cs/src/pages/menu/ui/base-type-form.tsx b/apps/cs/src/pages/menu/ui/base-type-menu-form.tsx
similarity index 97%
rename from apps/cs/src/pages/menu/ui/base-type-form.tsx
rename to apps/cs/src/pages/menu/ui/base-type-menu-form.tsx
index 107e92b60..9835f1e3a 100644
--- a/apps/cs/src/pages/menu/ui/base-type-form.tsx
+++ b/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 };
diff --git a/apps/cs/src/pages/menu/ui/board-menu-form.tsx b/apps/cs/src/pages/menu/ui/board-menu-form.tsx
index cfd59b563..df435e2e5 100644
--- a/apps/cs/src/pages/menu/ui/board-menu-form.tsx
+++ b/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>
diff --git a/apps/cs/src/pages/menu/ui/bottom-menu-form.tsx b/apps/cs/src/pages/menu/ui/bottom-menu-form.tsx
index 63069aac5..88565210b 100644
--- a/apps/cs/src/pages/menu/ui/bottom-menu-form.tsx
+++ b/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>
   );
diff --git a/apps/cs/src/pages/menu/ui/content-menu-form.tsx b/apps/cs/src/pages/menu/ui/content-menu-form.tsx
index 153eede5b..0905a594b 100644
--- a/apps/cs/src/pages/menu/ui/content-menu-form.tsx
+++ b/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>
diff --git a/apps/cs/src/pages/menu/ui/editable-node.tsx b/apps/cs/src/pages/menu/ui/editable-node.tsx
new file mode 100644
index 000000000..25e3af49a
--- /dev/null
+++ b/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 };
diff --git a/apps/cs/src/pages/menu/ui/empty-menu-form.tsx b/apps/cs/src/pages/menu/ui/empty-menu-form.tsx
index 4c97e1c66..78339d90f 100644
--- a/apps/cs/src/pages/menu/ui/empty-menu-form.tsx
+++ b/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>
   );
diff --git a/apps/cs/src/pages/menu/ui/inside-menu-form.tsx b/apps/cs/src/pages/menu/ui/inside-menu-form.tsx
index 4b894690c..f2fed53cf 100644
--- a/apps/cs/src/pages/menu/ui/inside-menu-form.tsx
+++ b/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>
   );
diff --git a/apps/cs/src/pages/menu/ui/menu-form.tsx b/apps/cs/src/pages/menu/ui/menu-form.tsx
index f42e3d725..13a910c23 100644
--- a/apps/cs/src/pages/menu/ui/menu-form.tsx
+++ b/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} />;
diff --git a/apps/cs/src/pages/menu/ui/menu-node.tsx b/apps/cs/src/pages/menu/ui/menu-node.tsx
index d938f0df0..add24f3af 100644
--- a/apps/cs/src/pages/menu/ui/menu-node.tsx
+++ b/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 ? (
-          <>
-            <Input
-              value={nodeName}
-              onChange={(e) => setNodeName(e.target.value)}
-              className="h-[2.5rem] !text-[1.3rem] text-foreground"
-            />
-          </>
-        ) : (
-          <>
+      {editMode ? (
+        <EditableNode
+          value={nodeName}
+          onChange={(e) => setNodeName(e.target.value)}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
+      ) : (
+        <>
+          <div className="flex items-center" onClick={handleSelect}>
             {data?.children?.length && (
               <i
                 className={cn(
@@ -82,40 +86,16 @@ function MenuNode({
               />
             )}
             <span className="text-[1.4rem] font-medium text-label">{text}</span>
-          </>
-        )}
-      </div>
-      {editMode ? (
-        <div className="flex items-center gap-1">
+          </div>
           <Button
             variant="ghost"
             size="icon"
-            className="size-8 !bg-transparent"
-            onClick={handleSave}
+            className="invisible !bg-transparent group-hover:visible"
+            onClick={() => setEditMode(true)}
           >
-            <i className="diveicon di-check text-2xl" />
+            <i className="diveicon di-pencil" />
           </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"
-          className="invisible !bg-transparent group-hover:visible"
-          onClick={() => setEditMode(true)}
-        >
-          <i className="diveicon di-pencil" />
-        </Button>
+        </>
       )}
     </div>
   );
diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index 3219291ab..8e13fee10 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/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">
diff --git a/apps/cs/src/pages/menu/ui/outside-menu-form.tsx b/apps/cs/src/pages/menu/ui/outside-menu-form.tsx
index 6649dd979..ac72a2892 100644
--- a/apps/cs/src/pages/menu/ui/outside-menu-form.tsx
+++ b/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>
   );