Merge pull request #257 from JECT-Study/fix-authentication

Fix authentication

Author: kimnamheeee

service/app/public/avatar.svg

@@ -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__/helpers/auth.setup.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__/home.spec.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/__tests__/homePOM.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/game/[gameId]/setup/__tests__/team-management.spec.ts

@@ -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/kakao/page.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/kakaoLoginClient.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/login/page.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/app/providers.tsx

@@ -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()
+}