🛂 Fix a social login duplication issue

[young-52]

📝 작업 내용

• 소셜 로그인을 시도하면 서버에 두 번씩 인증 요청이 가던 문제를 해결…하려고 노력했습니다. 진짜 해결되었을지는 머지해 봐야 알 것 같습니다.
  • Selector 도입: useAuthStore((state) => state)처럼 스토어 전체를 가져오던 방식을 필요한 상태만 각각 가져오도록 수정했습니다. 이를 통해 로그인 성공 시 발생하는 스토어 업데이트가 이 훅을 사용하는 모든 컴포넌트의 불필요한 리렌더링을 유발하지 않도록 했습니다.
  • useCallback 적용: handleSocialLogin을 포함한 모든 핸들러 함수를 useCallback으로 감싸 함수 참조를 고정했습니다. 이제 리렌더링이 발생해도 함수가 새로 생성되지 않습니다.
  • useRef 가드 추가: loginAttempted라는 참조(ref)를 사용하여, useEffect가 어떤 이유로든 재실행되더라도 실제 서버 요청은 컴포넌트 생명주기 동안 딱 한 번만 나가도록 보장했습니다.
  • 로그인 상태 체크: 이미 로그인이 완료된 상태(isLoggedIn: true)라면 로직을 즉시 중단하도록 하여 이중 처리를 원천 차단했습니다.
• 소셜 로그인에 관한 모의 핸들러도 만들었습니다.

🔍 소셜 로그인 중복 요청은 왜 발생했나? Gemini의 의견

1. 불안정한 함수 참조 (useAuth 훅)
src/hooks/useAuth.ts 내의 handleSocialLogin 함수는 useCallback으로 감싸져 있지 않습니다. 따라서 useAuth 훅이 리렌더링될 때마다 handleSocialLogin 함수는 항상 새로운 참조를 가지게 됩니다.

2. 상태 업데이트에 의한 전파
useAuth 훅은 useAuthStore((state) => state)를 통해 Zustand 스토어 전체를 구독하고 있습니다. 첫 번째 소셜 로그인 요청이 성공하면 login(user, token)이 호출되어 스토어 상태가 업데이트되는데, 이때 useAuth 훅이 리렌더링되면서 새로운 handleSocialLogin 함수를 반환합니다.

3. SocialCallback의 useEffect 재실행
src/routes/SocialCallback.tsx의 useEffect는 의존성 배열에 handleSocialLogin을 가지고 있습니다.

useEffect(() => {
  // ... 로그인 로직 ...
}, [provider, searchParams, handleSocialLogin, navigate]);

첫 번째 요청 성공 직후 리렌더링이 발생하면, 의존성 배열에 있는 handleSocialLogin의 참조가 바뀌었기 때문에 useEffect가 즉시 한 번 더 실행됩니다. 이때 URL에는 아직 code가 남아있으므로 동일한 코드로 두 번째 요청이 서버로 전송됩니다.

[jun-0411]

LGTM!