From ca37374c87f7a7d9c4f1c5fe3087723bf574f25a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=80=EC=B2=A0?= Date: Thu, 13 Nov 2025 18:30:43 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EB=89=B4=EC=96=BC=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EA=B3=B5=ED=86=B5=ED=99=94=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/provider/help-dialog-context.tsx | 55 +++++++++++++++++++ .../common/components/src/ui/layout/base.tsx | 5 +- .../components/src/ui/layout/nofooter.tsx | 5 +- .../common/components/src/ui/layout/nolnb.tsx | 5 +- .../common/components/src/ui/layout/vbase.tsx | 5 +- .../common/components/src/ui/lnb/index.tsx | 13 +++-- .../components/src/ui/page-title/index.tsx | 49 ++++++++++++----- 7 files changed, 112 insertions(+), 25 deletions(-) create mode 100644 packages/common/components/src/provider/help-dialog-context.tsx diff --git a/packages/common/components/src/provider/help-dialog-context.tsx b/packages/common/components/src/provider/help-dialog-context.tsx new file mode 100644 index 000000000..2ea208e13 --- /dev/null +++ b/packages/common/components/src/provider/help-dialog-context.tsx @@ -0,0 +1,55 @@ +"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 272390d35..e80a47533 100644 --- a/packages/common/components/src/ui/layout/base.tsx +++ b/packages/common/components/src/ui/layout/base.tsx @@ -1,6 +1,7 @@ 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 { ClientIpGuard } from "../../lib/client-ip-guard"; import type { MenuItem } from "../../api"; import { SidebarProvider } from "../sidebar"; @@ -24,7 +25,8 @@ export function BaseLayout({ - + +
@@ -39,6 +41,7 @@ export function BaseLayout({
+ diff --git a/packages/common/components/src/ui/layout/nofooter.tsx b/packages/common/components/src/ui/layout/nofooter.tsx index 2f398ec57..12f14ceea 100644 --- a/packages/common/components/src/ui/layout/nofooter.tsx +++ b/packages/common/components/src/ui/layout/nofooter.tsx @@ -1,6 +1,7 @@ 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 { ClientIpGuard } from "../../lib/client-ip-guard"; import type { MenuItem } from "../../api"; import { SidebarProvider } from "../sidebar"; @@ -23,7 +24,8 @@ export function NoFooterLayout({ - + +
@@ -37,6 +39,7 @@ export function NoFooterLayout({
+ diff --git a/packages/common/components/src/ui/layout/nolnb.tsx b/packages/common/components/src/ui/layout/nolnb.tsx index 5e64c42e0..c43941793 100644 --- a/packages/common/components/src/ui/layout/nolnb.tsx +++ b/packages/common/components/src/ui/layout/nolnb.tsx @@ -1,6 +1,7 @@ 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 { ClientIpGuard } from "../../lib/client-ip-guard"; import type { MenuItem } from "../../api"; import { SidebarProvider } from "../sidebar"; @@ -24,7 +25,8 @@ export function NoLNBLayout({ - + +
@@ -35,6 +37,7 @@ export function NoLNBLayout({
+ diff --git a/packages/common/components/src/ui/layout/vbase.tsx b/packages/common/components/src/ui/layout/vbase.tsx index 7868a412f..5608dda35 100644 --- a/packages/common/components/src/ui/layout/vbase.tsx +++ b/packages/common/components/src/ui/layout/vbase.tsx @@ -1,4 +1,5 @@ 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"; @@ -16,7 +17,8 @@ export function VBaseLayout({ }) { return ( - + +
@@ -30,6 +32,7 @@ export function VBaseLayout({
+ ); } diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx index 1ab089e4f..0206e2482 100644 --- a/packages/common/components/src/ui/lnb/index.tsx +++ b/packages/common/components/src/ui/lnb/index.tsx @@ -31,6 +31,7 @@ import { } from "../dialog"; import { ENDPOINT } from "../../config"; import { cn, getCookie, setCookie } from "../../lib"; +import { useHelpDialog } from "../../provider/help-dialog-context"; import { getMenuList, getPreviewTreeMenuList, @@ -63,10 +64,9 @@ export function LNB({ }) { const [defaultOpenMenuIds, setDefaultOpenMenuIds] = useState([]); const [currentMenuCode, setCurrentMenuCode] = useState(null); - const [currentMenuHelp, setCurrentMenuHelp] = useState(""); - const [isHelpModalOpen, setIsHelpModalOpen] = useState(false); const prevPathRef = useRef(currentPath); const { browser } = useDetectDevice(); + const { isOpen: isHelpModalOpen, openHelp, closeHelp, setHelpContent, helpContent } = useHelpDialog(); const siteId = propSiteId ?? appSiteId; @@ -142,7 +142,7 @@ export function LNB({ if (matchedMenuCode) { setCurrentMenuCode(matchedMenuCode); - setCurrentMenuHelp(matchedMenuHelp); + setHelpContent(matchedMenuHelp); } // 접속 로그 저장 @@ -295,9 +295,10 @@ export function LNB({ {/* 도움말 아이콘 */}
- + open ? openHelp() : closeHelp()}> +
+
+ {menuPaths.length > 0 && ( +
+ + {menuPaths?.map((path, i) => ( + + {i !== 0 && ( + + )} + {path} + + ))} +
+ )} + +
); };