Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,26 @@ import { useEffect } from "react";
import { usePostKakaoAuth } from "@/apis/Auth";
import CloudSpinnerPage from "@/components/ui/CloudSpinnerPage";

const attemptedKakaoAuthCodes = new Set<string>();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Apple 콜백 페이지의 현재 구현 확인

cat apps/web/src/app/login/apple/callback/AppleLoginCallbackPage.tsx

Repository: solid-connection/solid-connect-web

Length of output: 659


1. 모듈 레벨 Set 사용 - 좋은 접근 방식입니다 👍

Strict Mode에서의 이중 호출 방지를 위해 모듈 레벨 Set을 사용한 것은 적절한 패턴이에요. React 컴포넌트 생명주기 외부에 상태를 두어 리마운트 시에도 추적이 유지됩니다.

2. AppleLoginCallbackPage와의 일관성 문제 - 동일한 패턴 적용 필요

검토 결과, AppleLoginCallbackPage에서는 이 패턴을 사용하지 않고 있습니다. 현재 구현은 useEffect 내에서 직접 postAppleAuth({ code })를 호출하기만 하므로, Kakao 페이지가 해결한 것과 동일한 이중 호출 문제에 노출되어 있어요.

  • KakaoLoginCallbackPage: 모듈 레벨 Set으로 중복 호출 방지 ✓
  • AppleLoginCallbackPage: 중복 호출 방지 메커니즘 없음 ✗

두 콜백 페이지의 접근 방식이 일관되지 않으면 향후 유지보수와 버그 추적 시 혼란이 있을 수 있습니다. AppleLoginCallbackPage도 동일한 Set 기반 패턴을 적용하여 일관성을 맞춰주세요.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/login/kakao/callback/KakaoLoginCallbackPage.tsx` at line 8,
Add the same module-level dedupe Set pattern used in attemptedKakaoAuthCodes to
AppleLoginCallbackPage: declare a module-scoped Set (e.g.,
attemptedAppleAuthCodes) and in the component's useEffect that calls
postAppleAuth({ code }) check the Set for the code, skip calling postAppleAuth
if present, otherwise add the code to the Set before invoking postAppleAuth;
update logic around the useEffect in AppleLoginCallbackPage so it mirrors the
dedupe behavior used by KakaoLoginCallbackPage.


const KakaoLoginCallbackPage = () => {
const searchParams = useSearchParams();
const { mutate: postKakaoAuth } = usePostKakaoAuth();
const code = searchParams?.get("code");

useEffect(() => {
const code = searchParams?.get("code");
if (code) {
postKakaoAuth({ code });
if (!code) {
return;
}

// Strict Mode remount/useEffect 재실행 시 동일 인가코드 중복 호출 방지
if (attemptedKakaoAuthCodes.has(code)) {
return;
Comment on lines +21 to +22

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Redirect when auth code was already processed

This early return creates a dead-end for repeated visits to the same callback URL in the same tab: since attemptedKakaoAuthCodes is module-scoped and never cleared, going back to /login/kakao/callback?code=... (for example after onError already pushed /login) skips postKakaoAuth and also skips any redirect, so the user stays on CloudSpinnerPage indefinitely. Before this change, revisiting the page would still run the mutation path and navigate away.

Useful? React with 👍 / 👎.

}
}, [searchParams, postKakaoAuth]);

attemptedKakaoAuthCodes.add(code);
postKakaoAuth({ code });
}, [code, postKakaoAuth]);

return <CloudSpinnerPage />;
};
Expand Down
Loading