diff --git a/apps/cs/src/shared/ui/page-layout.tsx b/apps/cs/src/shared/ui/page-layout.tsx index 358d3b5db..782b31b22 100644 --- a/apps/cs/src/shared/ui/page-layout.tsx +++ b/apps/cs/src/shared/ui/page-layout.tsx @@ -1,4 +1,5 @@ import { PageTitle } from "@common/components"; + import { useMenuStore } from "../lib/use-menu-store"; function PageLayout({ children }: { children: React.ReactNode }) { @@ -12,6 +13,7 @@ function PageLayout({ children }: { children: React.ReactNode }) {
{children} diff --git a/packages/common/components/src/api/menu.ts b/packages/common/components/src/api/menu.ts index ee9e74357..e146dec5f 100644 --- a/packages/common/components/src/api/menu.ts +++ b/packages/common/components/src/api/menu.ts @@ -42,6 +42,18 @@ export const getMenuList = async (siteId: string): Promise => { return response.json(); }; +export const getMenuDetail = async (menuCd: number): Promise => { + const response = await fetch( + `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}`, + { + method: "GET", + headers: getAuthHeaders(), + credentials: "include", + }, + ); + return response.json(); +}; + export const getPreviewTreeMenuList = async ( siteId: string, ): Promise => { diff --git a/packages/common/components/src/provider/help-dialog-context.tsx b/packages/common/components/src/provider/help-dialog-context.tsx deleted file mode 100644 index 2ea208e13..000000000 --- a/packages/common/components/src/provider/help-dialog-context.tsx +++ /dev/null @@ -1,55 +0,0 @@ -"use client"; - -import { createContext, useContext, useState, useCallback } from "react"; - -interface HelpDialogContextType { - openHelp: () => void; - closeHelp: () => void; - isOpen: boolean; - setHelpContent: (content: string) => void; - helpContent: string; -} - -const HelpDialogContext = createContext( - undefined, -); - -export function HelpDialogProvider({ - children, -}: { - children: React.ReactNode; -}) { - const [isOpen, setIsOpen] = useState(false); - const [helpContent, setHelpContent] = useState(""); - - const openHelp = useCallback(() => { - setIsOpen(true); - }, []); - - const closeHelp = useCallback(() => { - setIsOpen(false); - }, []); - - return ( - - {children} - - ); -} - -export function useHelpDialog() { - const context = useContext(HelpDialogContext); - if (context === undefined) { - throw new Error("useHelpDialog must be used within a HelpDialogProvider"); - } - return context; -} - diff --git a/packages/common/components/src/ui/layout/base.tsx b/packages/common/components/src/ui/layout/base.tsx index 994e1016d..aa6e9dfdb 100644 --- a/packages/common/components/src/ui/layout/base.tsx +++ b/packages/common/components/src/ui/layout/base.tsx @@ -2,7 +2,6 @@ import type { AuthService, TokenManager } from "@common/auth"; import type { QueryClient } from "@tanstack/react-query"; import { QueryProvider } from "../../provider/query-provider"; import { PopupProvider } from "../../provider/popup-provider"; -import { HelpDialogProvider } from "../../provider/help-dialog-context"; import type { MenuItem } from "../../api"; import { SidebarProvider } from "../sidebar"; import { LNB } from "../lnb"; @@ -29,26 +28,24 @@ export function BaseLayout({ return ( - - -
-
+
+
+
+ -
- -
-
{children}
-
-
+
+
{children}
+
- - +
+ ); diff --git a/packages/common/components/src/ui/layout/nofooter.tsx b/packages/common/components/src/ui/layout/nofooter.tsx index 7ee096c72..6d7ce1109 100644 --- a/packages/common/components/src/ui/layout/nofooter.tsx +++ b/packages/common/components/src/ui/layout/nofooter.tsx @@ -1,7 +1,6 @@ import type { QueryClient } from "@tanstack/react-query"; import { QueryProvider } from "../../provider/query-provider"; import { PopupProvider } from "../../provider/popup-provider"; -import { HelpDialogProvider } from "../../provider/help-dialog-context"; import type { MenuItem } from "../../api"; import { SidebarProvider } from "../sidebar"; import { LNB } from "../lnb"; @@ -25,22 +24,20 @@ export function NoFooterLayout({ return ( - - -
-
-
- -
-
{children}
-
+ +
+
+
+ +
+
{children}
- - +
+ ); diff --git a/packages/common/components/src/ui/layout/nolnb.tsx b/packages/common/components/src/ui/layout/nolnb.tsx index c64cef3c9..68e42b175 100644 --- a/packages/common/components/src/ui/layout/nolnb.tsx +++ b/packages/common/components/src/ui/layout/nolnb.tsx @@ -2,7 +2,6 @@ import type { AuthService } from "@common/auth"; import type { QueryClient } from "@tanstack/react-query"; import { QueryProvider } from "../../provider/query-provider"; import { PopupProvider } from "../../provider/popup-provider"; -import { HelpDialogProvider } from "../../provider/help-dialog-context"; import type { MenuItem } from "../../api"; import { SidebarProvider } from "../sidebar"; import { Header } from "../header"; @@ -23,19 +22,17 @@ export function NoLNBLayout({ return ( - - -
-
-
-
-
{children}
-
-
+ +
+
+
+
+
{children}
+
- - +
+ ); diff --git a/packages/common/components/src/ui/layout/vbase.tsx b/packages/common/components/src/ui/layout/vbase.tsx index 5608dda35..7868a412f 100644 --- a/packages/common/components/src/ui/layout/vbase.tsx +++ b/packages/common/components/src/ui/layout/vbase.tsx @@ -1,5 +1,4 @@ import { QueryProvider } from "../../provider/query-provider"; -import { HelpDialogProvider } from "../../provider/help-dialog-context"; import { SidebarProvider } from "../sidebar"; import { LNB } from "../lnb"; import { Header } from "../header"; @@ -17,8 +16,7 @@ export function VBaseLayout({ }) { return ( - - +
@@ -32,7 +30,6 @@ export function VBaseLayout({
- ); } diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx index 35d2f121d..e3b65dc63 100644 --- a/packages/common/components/src/ui/lnb/index.tsx +++ b/packages/common/components/src/ui/lnb/index.tsx @@ -22,16 +22,8 @@ import { CollapsibleContent, CollapsibleTrigger, } from "../collapsible"; -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "../dialog"; import { ENDPOINT } from "../../config"; import { cn, getCookie, setCookie } from "../../lib"; -import { useHelpDialog } from "../../provider/help-dialog-context"; import { getMenuList, getPreviewTreeMenuList, @@ -65,13 +57,6 @@ export function LNB({ const [currentMenuCode, setCurrentMenuCode] = useState(null); const prevPathRef = useRef(currentPath); const { browser } = useDetectDevice(); - const { - isOpen: isHelpModalOpen, - openHelp, - closeHelp, - setHelpContent, - helpContent, - } = useHelpDialog(); const appSiteId = getCookie("site-id-key") ?? ""; const siteId = propSiteId ?? appSiteId; @@ -110,7 +95,6 @@ export function LNB({ const matchedMenuIds: number[] = []; let matchedMenuCode: number | null = null; - let matchedMenuHelp: string = ""; const findMatchedMenus = (items: MenuItem[]) => { items.forEach((item) => { @@ -127,7 +111,6 @@ export function LNB({ if (matchedMenuCode) return; if (currentPath === item.urlPath) { matchedMenuCode = item.menuCd; - matchedMenuHelp = item.menuHlpCn || ""; } if (item.children) findMatchedMenuCode(item.children); }); @@ -148,7 +131,6 @@ export function LNB({ if (matchedMenuCode) { setCurrentMenuCode(matchedMenuCode); - setHelpContent(matchedMenuHelp); } // 접속 로그 저장 @@ -298,46 +280,6 @@ export function LNB({ ))} - - {/* 도움말 아이콘 */} -
- (open ? openHelp() : closeHelp())} - > - - - - 도움말 - -
- {helpContent ? ( -
-
]*>/gi, "
") - .replace(/<\/body>/gi, "
"), - }} - style={{ - fontSize: "inherit", - }} - /> -
- ) : ( -

- 현재 페이지에 대한 도움말이 없습니다. -

- )} -
- -
-
); diff --git a/packages/common/components/src/ui/page-title/index.tsx b/packages/common/components/src/ui/page-title/index.tsx index 287d4895e..adb27b130 100644 --- a/packages/common/components/src/ui/page-title/index.tsx +++ b/packages/common/components/src/ui/page-title/index.tsx @@ -1,43 +1,95 @@ "use client"; -import React from "react"; -import { useHelpDialog } from "../../provider/help-dialog-context"; +import React, { useState } from "react"; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog"; +import { useQuery } from "@tanstack/react-query"; +import { getMenuDetail } from "../../api"; +import { ENDPOINT } from "../../config"; const PageTitle = ({ title, + menuCd, menuPaths, }: { title: string; + menuCd?: number; menuPaths: string[]; }) => { - const { openHelp } = useHelpDialog(); + const [isHelpDialogOpen, setIsHelpDialogOpen] = useState(false); + + const { data: menuDetail } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.MENUS, menuCd], + queryFn: () => getMenuDetail(menuCd!), + enabled: !!menuCd, + }); + return ( -
-
-

{title}

+ <> +
+
+

{title}

+
+
+ {menuPaths.length > 0 && ( +
+ + {menuPaths?.map((path, i) => ( + + {i !== 0 && ( + + )} + {path} + + ))} +
+ )} + +
-
- {menuPaths.length > 0 && ( -
- - {menuPaths?.map((path, i) => ( - - {i !== 0 && ( - - )} - {path} - - ))} -
- )} - -
-
+ + {/* 도움말 다이얼로그 */} + + + + 도움말 + +
+ {menuDetail?.menuHlpCn ? ( +
+
]*>/gi, "
") + .replace(/<\/body>/gi, "
"), + }} + style={{ + fontSize: "inherit", + }} + /> +
+ ) : ( +

+ 현재 페이지에 대한 도움말이 없습니다. +

+ )} +
+ +
+ ); };