인증 로직 수정

service/app/src/app/__tests__/helpers/auth.setup.ts

@@ -14,7 +14,7 @@ setup("authenticate", async ({ page }) => {
   await page.goto("/")
 
   await page.waitForURL("/")
-  await expect(page.getByRole("button", { name: "내 게임" })).toBeVisible()
+  await expect(page.getByRole("link", { name: "내 게임" })).toBeVisible()
 
   await page.context().storageState({ path: authFile })
 })

service/app/src/app/__tests__/home.spec.ts

@@ -22,7 +22,7 @@ test.describe("홈 화면: 비로그인 상태", () => {
     page,
   }) => {
     await pageObj.clickKakaoLoginButton()
-    await page.waitForURL("/login")
+    await page.waitForURL(/\/login(\?|$)/, { waitUntil: "commit" })
   })
 })
 

service/app/src/app/__tests__/homePOM.ts

@@ -39,13 +39,13 @@ export class HomePOM {
     // 네비게이션 영역 (비로그인 상태)
     this.homeLogoImage = page.getByAltText("홈 로고")
     this.themeToggleButton = page.getByTestId("theme-toggle-button")
-    this.kakaoLoginButton = page.getByRole("button", {
+    this.kakaoLoginButton = page.getByRole("link", {
       name: "간편로그인해서 게임 만들기",
     })
 
     // 네비게이션 영역 (로그인 상태)
-    this.myGamesButton = page.getByRole("button", { name: "내 게임" })
-    this.createGameButton = page.getByRole("button", {
+    this.myGamesButton = page.getByRole("link", { name: "내 게임" })
+    this.createGameButton = page.getByRole("link", {
       name: "게임 만들기",
       exact: true,
     })

service/app/src/app/game/[gameId]/setup/__tests__/team-management.spec.ts

@@ -118,15 +118,15 @@ test.describe("게임 설정 - 팀 관리 E2E 테스트", () => {
   }) => {
     const entry = "/games"
     await page.evaluate((e) => {
-      window.sessionStorage.setItem("entry", e)
+      window.sessionStorage.setItem("entry:game", e)
     }, entry)
     await gameSetupPage.clickHomeLogo()
     await expect(page).toHaveURL(entry)
   })
 
   test("entry 정보가 없으면 홈 페이지로 이동해야 한다", async ({ page }) => {
     await page.evaluate(() => {
-      window.sessionStorage.removeItem("entry")
+      window.sessionStorage.removeItem("entry:game")
     })
     await gameSetupPage.clickHomeLogo()
     await expect(page).toHaveURL("/")
@@ -137,7 +137,7 @@ test.describe("게임 설정 - 팀 관리 E2E 테스트", () => {
   }) => {
     const entry = "/games"
     await page.evaluate((e) => {
-      window.sessionStorage.setItem("entry", e)
+      window.sessionStorage.setItem("entry:game", e)
     }, entry)
     await gameSetupPage.clickExitIcon()
     await expect(page).toHaveURL(entry)

service/app/src/app/login/kakao/page.tsx

@@ -1,16 +1,21 @@
 "use client"
 
 import { useRouter, useSearchParams } from "next/navigation"
-import { Suspense, useEffect } from "react"
+import { Suspense, useEffect, useRef } from "react"
 
 import { useAuthStore } from "@/entities/auth"
+import { clearEntry, ENTRY_KEYS, getEntry } from "@/shared/lib/saveEntry"
 
 function KakaoCallbackContent() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { login } = useAuthStore()
+  const handledRef = useRef(false)
 
   useEffect(() => {
+    if (handledRef.current) return
+    handledRef.current = true
+
     const handleCallback = async () => {
       const code = searchParams.get("code")
       const error = searchParams.get("error")
@@ -19,7 +24,9 @@ function KakaoCallbackContent() {
         throw new Error(error || "인증 코드를 받지 못했습니다.")
 
       await login(code)
-      router.push("/")
+      const returnTo = getEntry(ENTRY_KEYS.auth) ?? "/"
+      clearEntry(ENTRY_KEYS.auth)
+      router.replace(returnTo)
     }
 
     handleCallback()

service/app/src/app/login/kakaoLoginClient.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+import { MSW_MOCK_CODE } from "@/mocks/handlers/auth"
+import { ENTRY_KEYS, saveEntry } from "@/shared/lib/saveEntry"
+
+export function KakaoLoginClient({ returnTo }: { returnTo?: string }) {
+  const router = useRouter()
+
+  const kakaoClientId = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID
+  const redirectUri = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI
+
+  useEffect(() => {
+    if (returnTo) saveEntry(ENTRY_KEYS.auth, returnTo)
+
+    if (process.env.NODE_ENV === "development") {
+      router.replace(`/login/kakao/?code=${MSW_MOCK_CODE}`)
+      return
+    }
+
+    if (!kakaoClientId || !redirectUri) return
+
+    const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code`
+
+    router.replace(kakaoAuthUrl)
+  }, [router, kakaoClientId, redirectUri, returnTo])
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background-primary">
+      <div className="flex flex-col items-center gap-16">
+        <div className="size-32 animate-spin rounded-full border-4 border-blue-400 border-t-transparent"></div>
+        <p className="text-sm text-text-primary">
+          카카오 로그인으로 이동 중...
+        </p>
+      </div>
+    </div>
+  )
+}

service/app/src/app/login/page.tsx

@@ -1,37 +1,24 @@
-"use client"
+import { Suspense } from "react"
 
-import { useRouter } from "next/navigation"
-import { useEffect } from "react"
-
-import { MSW_MOCK_CODE } from "@/mocks/handlers/auth"
-
-export default function KakaoLoginPage() {
-  const router = useRouter()
-
-  const kakaoClientId = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID
-  const redirectUri = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI
-
-  useEffect(() => {
-    if (process.env.NODE_ENV === "development") {
-      router.replace(`/login/kakao/?code=${MSW_MOCK_CODE}`)
-      return
-    }
-
-    if (!kakaoClientId || !redirectUri) return
-
-    const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code`
-
-    router.replace(kakaoAuthUrl)
-  }, [router, kakaoClientId, redirectUri])
+import { KakaoLoginClient } from "./kakaoLoginClient"
 
+export default function KakaoLoginPage({
+  searchParams,
+}: {
+  searchParams: { returnTo?: string }
+}) {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background-primary">
-      <div className="flex flex-col items-center gap-16">
-        <div className="size-32 animate-spin rounded-full border-4 border-blue-400 border-t-transparent"></div>
-        <p className="text-sm text-text-primary">
-          카카오 로그인으로 이동 중...
-        </p>
-      </div>
-    </div>
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center">
+          <div className="text-center">
+            <div className="mb-4">페이지를 준비하고 있습니다</div>
+            <div className="mx-auto size-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
+          </div>
+        </div>
+      }
+    >
+      <KakaoLoginClient returnTo={searchParams.returnTo} />
+    </Suspense>
   )
 }

service/app/src/app/providers.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "next-themes"
 import { NuqsAdapter } from "nuqs/adapters/next/app"
 import { OverlayProvider } from "overlay-kit"
 
+import { AuthProvider } from "@/entities/auth/ui/authProvider"
 import { MSWProvider } from "@/mocks/mswProvider"
 import { queryClient } from "@/shared/lib/queryClient"
 
@@ -23,7 +24,9 @@ export function Providers({ children }: ProvidersProps) {
       >
         <OverlayProvider>
           <MSWProvider>
-            <NuqsAdapter>{children}</NuqsAdapter>
+            <AuthProvider>
+              <NuqsAdapter>{children}</NuqsAdapter>
+            </AuthProvider>
           </MSWProvider>
         </OverlayProvider>
       </ThemeProvider>

service/app/src/entities/auth/api/validateSession.ts

@@ -0,0 +1,6 @@
+import { fetchClient } from "@/shared/api/fetchClient"
+
+export const validateSession = async () => {
+  const response = await fetchClient.get<null>("users/me/games?limit=1") // TODO: 엔드포인트 생성 후 변경
+  return response.json()
+}

service/app/src/entities/auth/model/hooks/useAuthGuard.ts

@@ -1,20 +1,17 @@
-"use client"
-
 import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 
 import { useAuthStore } from "../../store/useAuthStore"
 
 export const useAuthGuard = () => {
   const router = useRouter()
-  const { isAuthenticated, _hasHydrated } = useAuthStore()
+  const { authStatus } = useAuthStore()
 
   useEffect(() => {
-    if (!_hasHydrated) return
-
-    if (!isAuthenticated) {
+    if (authStatus === "unknown") return
+    if (authStatus !== "authenticated") {
       alert("로그인이 필요합니다.")
       router.replace("/")
     }
-  }, [isAuthenticated, _hasHydrated, router])
+  }, [authStatus, router])
 }

service/app/src/entities/auth/store/useAuthStore.ts

@@ -1,53 +1,68 @@
 import { create } from "zustand"
 import { createJSONStorage, persist } from "zustand/middleware"
+import { immer } from "zustand/middleware/immer"
 
 import { kakaoLogin } from "../api/kakaoLogin"
 import { logout } from "../api/logout"
-import { KakaoLoginData } from "../model/auth"
-import { deleteCookie, getSessionId } from "../utils/cookieUtils"
+import { validateSession } from "../api/validateSession"
+
+type AuthStatus = "unknown" | "authenticated" | "unauthenticated"
+type AuthUser = { nickname: string; profileImageUrl: string }
 
 type AuthState = {
-  user: KakaoLoginData | null
-  isAuthenticated: boolean
-  _hasHydrated: boolean
+  authStatus: AuthStatus
+  user: AuthUser | null
+  hasBootstrapped: boolean
   login: (code: string) => Promise<void>
-  logout: () => void
+  logout: () => Promise<void>
+  bootstrap: () => Promise<void>
+  setUnauthenticated: () => void
 }
 
 export const useAuthStore = create<AuthState>()(
   persist(
-    (set) => ({
+    immer((set, get) => ({
+      authStatus: "unknown",
       user: null,
-      isAuthenticated: !!getSessionId(),
-      _hasHydrated: false,
+      hasBootstrapped: false,
+
+      bootstrap: async () => {
+        if (get().hasBootstrapped) return
+        try {
+          await validateSession()
+          set({ authStatus: "authenticated" })
+        } catch (error) {
+          set({ authStatus: "unauthenticated" })
+        }
+        set({ hasBootstrapped: true })
+      },
 
       login: async (code: string) => {
         try {
-          const res = await kakaoLogin(code)
-          set({ user: res.data, isAuthenticated: true })
+          const { profileImageUrl, nickname } = (await kakaoLogin(code)).data
+          set({
+            user: { profileImageUrl, nickname },
+            authStatus: "authenticated",
+          })
         } catch (error) {
           throw new Error("login failed")
         }
       },
 
       logout: async () => {
         await logout()
-        deleteCookie("JSESSIONID")
-        set({ user: null, isAuthenticated: false })
+        set({ authStatus: "unauthenticated", user: null })
       },
-    }),
+
+      setUnauthenticated: () =>
+        set({ authStatus: "unauthenticated", user: null }),
+    })),
     {
       name: "auth-store",
       storage: createJSONStorage(() => sessionStorage),
       partialize: (state) => ({
         user: state.user,
-        isAuthenticated: state.isAuthenticated,
       }),
-      onRehydrateStorage: () => (state) => {
-        if (state) {
-          state._hasHydrated = true
-        }
-      },
     },
   ),
 )

service/app/src/entities/auth/ui/authProvider.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { useAuthStore } from "../store/useAuthStore"
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const { bootstrap, setUnauthenticated } = useAuthStore()
+  useEffect(() => {
+    bootstrap()
+  }, [bootstrap])
+
+  useEffect(() => {
+    window.addEventListener("auth:session-expired", setUnauthenticated)
+    return () => {
+      window.removeEventListener("auth:session-expired", setUnauthenticated)
+    }
+  }, [setUnauthenticated])
+
+  return <>{children}</>
+}