diff --git a/src/app/(page)/mypage/page.tsx b/src/app/(page)/mypage/page.tsx index c75cb16..0e34c60 100644 --- a/src/app/(page)/mypage/page.tsx +++ b/src/app/(page)/mypage/page.tsx @@ -5,6 +5,7 @@ import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { signOut } from 'next-auth/react'; import { useHeaderStore } from '@/stores/headerStore'; +import { useToastStore } from '@/stores/toastStore'; import Avatar from '@/components/ui/Avatar'; import ConfirmModal from '@/components/ui/ConfirmModal'; import { useUserMe } from '@/domains/user/hooks'; @@ -12,6 +13,9 @@ import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import styles from './page.module.scss'; +const PREPARING_ITEMS = ['shop', 'contact'] as const; +type PreparingKey = (typeof PREPARING_ITEMS)[number]; + const LINK_ITEMS = [ { key: 'shop', label: '상점', href: '/shop' }, { key: 'about', label: '서비스 소개', href: '/about' }, @@ -21,15 +25,19 @@ const LINK_ITEMS = [ ] as const; export default function MyPage() { - const setHeader = useHeaderStore((s) => s.setHeader) + const setHeader = useHeaderStore((s) => s.setHeader); useEffect(() => { - setHeader({ variant: 'logo' }) - return () => setHeader(null) - }, []) + setHeader({ variant: 'logo' }); + return () => setHeader(null); + }, []); const router = useRouter(); const { data: user } = useUserMe(); + const showToast = useToastStore((s) => s.show); const [logoutOpen, setLogoutOpen] = useState(false); + const isPreparing = (key: string): key is PreparingKey => + (PREPARING_ITEMS as readonly string[]).includes(key); + const displayName = user?.name ?? user?.nickname ?? ''; const handleLogout = () => { @@ -60,12 +68,24 @@ export default function MyPage() { - {LINK_ITEMS.map(item => ( - - {item.label} - - - ))} + {LINK_ITEMS.map((item) => + isPreparing(item.key) ? ( + + ) : ( + + {item.label} + + + ), + )}