[apps/cs] feat: 임시저장 메뉴 미리보기 기능 작업

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

@@ -1,7 +1,15 @@
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
-import { Button } from "@common/components";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  LNB,
+} from "@common/components";
 import { MenuApi, menuFormSchema, type MenuFormData } from "@/entities/menu";
 import { ManagementAuthorityDialog } from "@/entities/menu-authority";
 import { Form } from "@/shared/ui/form";
@@ -33,7 +41,7 @@ function MenuForm({
   handleDelete,
 }: MenuFormProps) {
   const isModifyMode = !!menuCd;
-
+  const [open, setOpen] = useState(false);
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
 
@@ -96,55 +104,82 @@ function MenuForm({
   const isSubmitDisabled = !form.watch("siteId");
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="card card-border">
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">
-              {isModifyMode ? "메뉴 수정" : "메뉴 등록"}
-            </h3>
-            <div className="flex items-center gap-2">
-              <MenuHistoryDialog menuCd={menuCd} />
-              <ManagementAuthorityDialog menuCd={menuCd} />
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium text-label">
+                {isModifyMode ? "메뉴 수정" : "메뉴 등록"}
+              </h3>
+              <div className="flex items-center gap-2">
+                <MenuHistoryDialog menuCd={menuCd} />
+                <ManagementAuthorityDialog menuCd={menuCd} />
+              </div>
+            </div>
+            <div className="card">
+              <BaseMenuForm form={form} menuCd={menuCd} />
+              <TypeMenuForm form={form} menuType={menuType} />
             </div>
           </div>
-          <div className="card">
-            <BaseMenuForm form={form} menuCd={menuCd} />
-            <TypeMenuForm form={form} menuType={menuType} />
+          <div className="flex justify-center gap-4 pb-12 pt-10">
+            {isModifyMode && (
+              <Button
+                size="lg"
+                color="white"
+                type="button"
+                onClick={handleLoadTemporaryData}
+              >
+                불러오기
+              </Button>
+            )}
+            {isModifyMode && (
+              <Button
+                size="lg"
+                color="gray"
+                type="button"
+                onClick={handleMenuTemporaryStorage}
+              >
+                임시저장
+              </Button>
+            )}
+            {isModifyMode && (
+              <Button
+                size="lg"
+                color="emerald"
+                type="button"
+                onClick={() => setOpen(true)}
+              >
+                미리보기
+              </Button>
+            )}
+            <Button size="lg" type="submit" disabled={isSubmitDisabled}>
+              저장
+            </Button>
+            {isModifyMode && (
+              <Button size="lg" color="red" type="button" onClick={onDelete}>
+                삭제
+              </Button>
+            )}
           </div>
-        </div>
-        <div className="flex justify-center gap-4 pb-12 pt-10">
-          {isModifyMode && (
-            <Button
-              size="lg"
-              color="white"
-              type="button"
-              onClick={handleLoadTemporaryData}
-            >
-              불러오기
-            </Button>
-          )}
-          {isModifyMode && (
-            <Button
-              size="lg"
-              color="gray"
-              type="button"
-              onClick={handleMenuTemporaryStorage}
-            >
-              임시저장
-            </Button>
-          )}
-          <Button size="lg" type="submit" disabled={isSubmitDisabled}>
-            저장
-          </Button>
-          {isModifyMode && (
-            <Button size="lg" color="red" type="button" onClick={onDelete}>
-              삭제
-            </Button>
-          )}
-        </div>
-      </form>
-    </Form>
+        </form>
+      </Form>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90vh]">
+          <DialogHeader>
+            <DialogTitle>메뉴 미리보기</DialogTitle>
+          </DialogHeader>
+          <div className="flex h-full min-h-[60vh] flex-col gap-4">
+            <LNB
+              currentPath={form.watch("urlPath") ?? ""}
+              propSiteId={form.watch("siteId")}
+              previewMode
+              classNames={{ wrapper: "static h-full border-none p-0" }}
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }