feat: page title 컴포넌트 생성

apps/cs/src/shared/lib/use-menu-store.ts

@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { MenuStore } from "../store/menu-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useMenuStore = <T>(selector: (store: MenuStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useMenuStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.menuStore, selector);
+};

apps/cs/src/shared/providers/store-provider.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { createContext, useRef } from "react";
-import { createAlertStore } from "../store/alert-store";
-import { createUserStore } from "../store/user-store";
+import { createAlertStore, createMenuStore, createUserStore } from "../store";
 
 type StoreContextType = {
   alertStore: ReturnType<typeof createAlertStore>;
+  menuStore: ReturnType<typeof createMenuStore>;
   userStore: ReturnType<typeof createUserStore>;
 };
 
@@ -18,6 +18,7 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
   if (storeRef.current === null) {
     storeRef.current = {
       alertStore: createAlertStore(),
+      menuStore: createMenuStore(),
       userStore: createUserStore(),
     };
   }

apps/cs/src/shared/store/index.ts

@@ -1 +1,3 @@
+export { createAlertStore } from "./alert-store";
+export { createMenuStore } from "./menu-store";
 export { createUserStore, type IUserInfo } from "./user-store";

apps/cs/src/shared/store/menu-store.ts

@@ -0,0 +1,23 @@
+import { createStore } from "zustand/vanilla";
+import type { MenuItem } from "@common/components/api";
+
+export type MenuState = {
+  currentMenuInfo: MenuItem | null;
+};
+
+export type MenuActions = {
+  setCurrentMenuInfo: (menu: MenuItem) => void;
+};
+
+export type MenuStore = MenuState & MenuActions;
+
+export const defaultInitState: MenuState = {
+  currentMenuInfo: null,
+};
+
+export const createMenuStore = (initState: MenuState = defaultInitState) => {
+  return createStore<MenuStore>()((set) => ({
+    ...initState,
+    setCurrentMenuInfo: (menu: MenuItem) => set({ currentMenuInfo: menu }),
+  }));
+};

apps/cs/src/shared/ui/page-layout.tsx

@@ -1,3 +1,6 @@
+import { PageTitle } from "@common/components";
+import { useMenuStore } from "../lib/use-menu-store";
+
 function PageLayout({
   children,
   pageTitle,
@@ -5,11 +8,15 @@ function PageLayout({
   children: React.ReactNode;
   pageTitle: string;
 }) {
+  const { currentMenuInfo } = useMenuStore((state) => state);
+
+  const menuPaths = currentMenuInfo?.menuPath
+    ?.split(">")
+    .map((path) => path.trim());
+
   return (
     <div className="h-auto min-h-full bg-container">
-      <h2 className="px-[1.8rem] pt-[2rem] text-[2.4rem] font-semibold text-title">
-        {pageTitle}
-      </h2>
+      <PageTitle title={pageTitle} menuPaths={menuPaths ?? []} />
       {children}
     </div>
   );