refact: 로그인 상태에서만 로그아웃 버튼 활성화로 수정

Author: xaexunxang

src/pages/menu/ui/MenuPage.tsx

@@ -2,7 +2,7 @@ import { flexColumn } from '../../../../design-system/styles/flex';
 import HorizontalCardButton from '../../../../design-system/ui/buttons/HorizontalCardButton';
 import { useNavigate } from 'react-router-dom';
 import Header from '../../../../design-system/ui/Header';
-import { buttonData } from '../../../shared/types/menuType';
+import { getButtonData } from '../../../shared/types/menuType';
 import BottomBar from '../../../widgets/main/ui/BottomBar';
 
 const handleIconClick = (navigate: (path: string) => void, path: string) => {
@@ -11,12 +11,11 @@ const handleIconClick = (navigate: (path: string) => void, path: string) => {
 
 const MenuPage = () => {
   const navigate = useNavigate();
+  const buttonData = getButtonData();
 
   return (
     <>
-      <Header
-        centerContent="메뉴"
-      />
+      <Header centerContent="메뉴" />
       <div className={`${flexColumn} gap-4 px-8 md:px-10 mt-8`}>
         {buttonData.map((button, index) => (
           <div key={button.label}>

src/shared/types/menuType.ts

@@ -8,6 +8,7 @@ import SelectedEvent from '../../..//design-system/icons/SelectedEvent.svg';
 import SelectedHost from '../../../public/assets/menu/SelectedHost.svg';
 import SelectedLogout from '../../../public/assets/menu/SelectedLogout.svg';
 import SelectedSetting from '../../../public/assets/menu/SelectedSetting.svg';
+import useAuthStore from '../../app/provider/authStore';
 
 export interface buttonData {
   iconPath: string; // 아이콘 경로
@@ -16,10 +17,22 @@ export interface buttonData {
   path: string; // 경로
 }
 
-export const buttonData: buttonData[] = [
-  { iconPath: Ticket, hoverIconPath: SelectedTicket, label: '구입한 티켓', path: '/menu/myTicket' },
-  { iconPath: Host, hoverIconPath: SelectedHost, label: '내 호스트', path: '/menu/myHost' },
-  { iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation' },
-  { iconPath: Setting, hoverIconPath: SelectedSetting, label: '마이페이지', path: '/menu/myPage' },
-  { iconPath: Logout, hoverIconPath: SelectedLogout, label: '로그아웃', path: '/menu/logout' },
-];
+export const getButtonData = (): buttonData[] => {
+  const isLoggedIn = useAuthStore.getState().isLoggedIn;
+
+  const baseButtons: buttonData[] = [
+    { iconPath: Ticket, hoverIconPath: SelectedTicket, label: '구입한 티켓', path: '/menu/myTicket' },
+    { iconPath: Host, hoverIconPath: SelectedHost, label: '내 호스트', path: '/menu/myHost' },
+    { iconPath: Event, hoverIconPath: SelectedEvent, label: '이벤트 주최하기', path: '/event-creation' },
+    { iconPath: Setting, hoverIconPath: SelectedSetting, label: '마이페이지', path: '/menu/myPage' },
+  ];
+
+  if (isLoggedIn) {
+    return [
+      ...baseButtons,
+      { iconPath: Logout, hoverIconPath: SelectedLogout, label: '로그아웃', path: '/menu/logout' },
+    ];
+  }
+
+  return baseButtons;
+};