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

packages/common/components/src/api/menu.ts

@@ -21,6 +21,10 @@ export interface MenuItem {
   requiredUrlPath: boolean;
 }
 
+export interface TreeMenu extends MenuItem {
+  menuHlpCn: string;
+}
+
 const client = getApiClient();
 
 export const getMenuList = async (siteId: string) => {
@@ -29,3 +33,10 @@ export const getMenuList = async (siteId: string) => {
   );
   return response.data;
 };
+
+export const getPreviewTreeMenuList = async (siteId: string) => {
+  const response = await client.get<TreeMenu[]>(
+    `${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree/preview`,
+  );
+  return response.data;
+};

packages/common/components/src/config/api.ts

@@ -1,5 +1,6 @@
 export const ENDPOINT = {
   CMS_SERVICE: {
+    MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     SITES: "/cms-service/api/v1/sites",
     POPUPS: "/cms-service/api/v1/popups",

packages/common/components/src/ui/index.ts

@@ -15,6 +15,7 @@ export * from "./icon-finder";
 export * from "./input";
 export * from "./label";
 export * from "./layout";
+export * from "./lnb";
 export * from "./loading";
 export * from "./page-title";
 export * from "./popover";

packages/common/components/src/ui/lnb/index.tsx

@@ -3,9 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRight } from "lucide-react";
-import { ENDPOINT } from "../../config";
-import { cn, setCookie } from "../../lib";
-import { getMenuList, type MenuItem } from "../../api";
+import { getParentIds } from "./lib";
 import {
   Sidebar,
   SidebarContent,
@@ -22,29 +20,47 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "../collapsible";
-import { getParentIds } from "./lib";
-import { getCookie } from "../../lib";
-
-const siteId = getCookie("site-id-key") ?? "";
+import { ENDPOINT } from "../../config";
+import { cn, getCookie, setCookie } from "../../lib";
+import { getMenuList, getPreviewTreeMenuList, type MenuItem } from "../../api";
 
 export function LNB({
   viewOnly,
   currentPath,
+  propSiteId,
+  previewMode,
+  classNames,
   handleMenuClick,
 }: {
   viewOnly?: boolean;
   currentPath?: string;
+  propSiteId?: string;
+  previewMode?: boolean;
+  classNames?: {
+    wrapper?: string;
+  };
   handleMenuClick?: (item: MenuItem) => void;
 }) {
-  const { data: menuList } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
-    queryFn: () => getMenuList(siteId),
-    enabled: !viewOnly,
-  });
-
   const [defaultOpenMenuIds, setDefaultOpenMenuIds] = useState<number[]>([]);
   const prevPathRef = useRef(currentPath);
 
+  const cookieSiteId = getCookie("site-id-key") ?? "";
+  const siteId = propSiteId ?? cookieSiteId;
+
+  const { data: menuListData } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
+    queryFn: () => getMenuList(siteId),
+    enabled: !viewOnly && !previewMode,
+  });
+
+  const { data: previewTreeMenuListData } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENUS, siteId, "preview"],
+    queryFn: () => getPreviewTreeMenuList(siteId),
+    enabled: previewMode,
+  });
+
+  const menuList = previewMode ? previewTreeMenuListData : menuListData;
+
   function isPathMatched(path: string) {
     if (!path) return false;
     return currentPath?.startsWith(path);
@@ -191,7 +207,10 @@ export function LNB({
   return (
     <Sidebar
       collapsible="icon"
-      className="border-border bg-background px-4 py-[6rem]"
+      className={cn(
+        "border-border bg-background px-4 py-[6rem]",
+        classNames?.wrapper,
+      )}
     >
       <SidebarContent className="bg-background">
         <SidebarMenu className="gap-0">