diff --git a/app/(main)/my-page/layout.tsx b/app/(main)/my-page/layout.tsx new file mode 100644 index 0000000..13d204b --- /dev/null +++ b/app/(main)/my-page/layout.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { useEffect } from "react"; +import { useRouter, usePathname } from "next/navigation"; +import { useAuthStore } from "@/store/auth.store"; +import { useHydrated } from "@/lib/hooks/useHydrated"; + +export default function MyPageLayout({ + children, +}: { + children: React.ReactNode; +}) { + const isAuthenticated = useAuthStore((s) => s.isAuthenticated); + const isInitialized = useAuthStore((s) => s.isInitialized); + const mounted = useHydrated(); + const router = useRouter(); + const pathname = usePathname(); + + const isSubPage = pathname !== "/my-page"; + + useEffect(() => { + if (mounted && isInitialized && !isAuthenticated && isSubPage) { + router.replace("/my-page"); + } + }, [mounted, isInitialized, isAuthenticated, isSubPage, router]); + + if (!mounted || !isInitialized) return null; + + // 하위 페이지는 미인증 시 리다이렉트 대기 중 아무것도 표시 안 함 + if (!isAuthenticated && isSubPage) return null; + + return <>{children}; +} diff --git a/app/(main)/my-page/page.tsx b/app/(main)/my-page/page.tsx index 093738e..d5853ab 100644 --- a/app/(main)/my-page/page.tsx +++ b/app/(main)/my-page/page.tsx @@ -1,5 +1,23 @@ +"use client"; + +import { useAuthStore } from "@/store/auth.store"; +import { useHydrated } from "@/lib/hooks/useHydrated"; +import { LoginRequiredEmptyState } from "@/components/features/auth/LoginRequiredEmptyState"; import MyPage from "@/components/features/my-page/MyPage"; export default function Page() { + const isAuthenticated = useAuthStore((s) => s.isAuthenticated); + const isInitialized = useAuthStore((s) => s.isInitialized); + const mounted = useHydrated(); + + if (!mounted || !isInitialized) return null; + if (!isAuthenticated) + return ( + + ); + return ; }