fix: 일부페이지에서 헤더의 타이틀이 나오지않는 것 수정

src/app/(afterLogin)/group/detail/[groupId]/_component/ButtonGroup.tsx

@@ -8,11 +8,11 @@ import { useRouter } from 'next/navigation';
 import { useDeleteGroupMutation } from '../_hooks/useDeleteGroup';
 import { fetchAuthentication } from '../_lib/fetchAuthentication';
 import TardinessDialog from './TardinessDialog';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { GC_TIME, STALE_TIME } from '../_lib/Constants';
+import useTitleStore from '@/hooks/useTitleStore';
 export function ButtonGroup({ groupId }: { groupId: number }) {
-  const router = useRouter();
-  const [openDialog,setOpenDialog] = useState(false);
+  const [openDialog, setOpenDialog] = useState(false);
   const { data, error } = useQuery<
     GroupDetailData, // 성공 시 반환될 데이터 타입
     Error, // 에러 타입 (여기서는 Error로 지정)
@@ -24,7 +24,7 @@ export function ButtonGroup({ groupId }: { groupId: number }) {
     staleTime: STALE_TIME,
     gcTime: GC_TIME,
   });
-
+  const setTitle = useTitleStore((state) => state.setTitle);
   const { mutateAsync: leaveGroup, isError: isErrorLeave } =
     useLeaveGroupMutation(groupId);
   const { mutateAsync: deleteGroup } = useDeleteGroupMutation(groupId);
@@ -46,6 +46,9 @@ export function ButtonGroup({ groupId }: { groupId: number }) {
       alert('그룹 삭제중 오류가 발생했습니다.');
     }
   };
+  useEffect(() => {
+    setTitle(`${data?.name}`)
+  },[])
   return (
     <div className="flex flex-col gap-4">
       <Button
@@ -55,7 +58,11 @@ export function ButtonGroup({ groupId }: { groupId: number }) {
       >
         모임 위치 인증
       </Button>
-      <TardinessDialog open = {openDialog} setOpen = {setOpenDialog} groupId={groupId}/>
+      <TardinessDialog
+        open={openDialog}
+        setOpen={setOpenDialog}
+        groupId={groupId}
+      />
       <Button>장소 변경 요청</Button>
       {data?.isGroupHost ? (
         <Button

src/app/constants.ts

@@ -8,4 +8,5 @@ export const pathToTitleMap:PathToTitleMap =  {
   // '/login': '로그인',
   '/ranking': '랭킹',
   '/message': '채팅',
+  '/notification': '알림',
 }

src/components/ui/Header/index.tsx

@@ -1,29 +1,33 @@
 'use client';
 import Image from 'next/image';
-import { useRouter, usePathname } from 'next/navigation';
+import { useRouter, usePathname, useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { pathToTitleMap } from '@/app/constants';
 import Cookies from 'js-cookie';
-import { Button } from '../button';
-import Link from 'next/link';
 import DropDown from './DropDown';
+import useTitleStore from '@/hooks/useTitleStore';
 
 export default function Header() {
   const router = useRouter();
   const pathname = usePathname();
   const accessToken = Cookies.get('accessToken');
-  const [title, setTitle] = useState(pathToTitleMap[pathname]);
-  // const [isClient, setIsClient] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+  const title = useTitleStore((state) => state.title);
+  const setTitle = useTitleStore((state) => state.setTitle);
 
-  // useEffect(() => {
-  //   setIsClient(true); // 클라이언트에서만 동작하도록 설정
-  // }, []);
+  useEffect(() => {
+    setIsClient(true); // 클라이언트에서만 동작하도록 설정
+  }, []);
 
   useEffect(() => {
-    const newTitle = pathToTitleMap[pathname];
-    setTitle(newTitle);
+    if (pathname !== 'home' && !pathname.includes('/group/detail')) {
+      const newTitle = pathToTitleMap[pathname];
+      setTitle(newTitle);
+    }
   }, [pathname]);
   return (
+    <>
+    {isClient && (
     <div
       className="flex w-full justify-between px-6 items-center h-headerHeight fixed top-0 z-20 bg-white shadow-md"
       suppressHydrationWarning={true}
@@ -55,7 +59,7 @@ export default function Header() {
           alt="뒤로가기"
         />
       )}
-      {pathname !== '/home' && (
+      {pathname !== '/' && pathname !== '/home' && (
         <div className="font-bold text-xl absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           {title}
         </div>
@@ -66,6 +70,7 @@ export default function Header() {
           <Button>로그인</Button>
         </Link>
       )} */}
-    </div>
+    </div>)}
+    </>
   );
 }

src/hooks/useTitleStore.ts

@@ -0,0 +1,17 @@
+import { mapLocationType } from '@/app/_types/Map';
+import { create } from 'zustand';
+
+
+// Zustand 스토어 타입 정의
+interface TitleState {
+  title: string; // 초기값이 비어 있을 수 있음
+  setTitle: (update: Partial<string>) => void; // Partial을 사용하여 선택적 업데이트 지원
+}
+
+// Zustand 스토어 생성
+const useTitleStore = create<TitleState>((set, get) => ({
+  title: '',
+  setTitle: (newTitle: string) => set(() => ({ title: newTitle })),
+}));
+
+export default useTitleStore;