From f7dcffe5ce3e69e272bb1275c0d79879caa48e4f Mon Sep 17 00:00:00 2001
From: sw326 <sungwoo326@gmail.com>
Date: Wed, 11 Sep 2024 17:39:48 +0900
Subject: [PATCH] fix: double rendering fixed

---
 src/pages/members/Redirection.tsx | 42 +++++++++----------------------
 1 file changed, 12 insertions(+), 30 deletions(-)

diff --git a/src/pages/members/Redirection.tsx b/src/pages/members/Redirection.tsx
index 91e656d..a57dd11 100644
--- a/src/pages/members/Redirection.tsx
+++ b/src/pages/members/Redirection.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
 import { useKakaoLogin } from '../../hooks/useMembers';
@@ -8,48 +8,38 @@ import {
 } from '../../utils/errorHandler';
 
 const Redirection: React.FC = () => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isLoginAttempted, setIsLoginAttempted] = useState(false);
   const navigate = useNavigate();
   const { login, isAuthenticated } = useAuth();
   const kakaoLoginMutation = useKakaoLogin();
+  const isLoginAttemptedRef = useRef(false);
 
-  const performKakaoLogin = useCallback(
-    async (code: string) => {
-      if (isLoginAttempted) return;
-      setIsLoginAttempted(true);
+  useEffect(() => {
+    const performKakaoLogin = async (code: string) => {
+      if (isLoginAttemptedRef.current) return;
+      isLoginAttemptedRef.current = true;
 
       try {
         const { token, refreshToken } =
           await kakaoLoginMutation.mutateAsync(code);
-
         localStorage.setItem('token', token);
         localStorage.setItem('refreshToken', refreshToken);
         login(token, refreshToken, false);
-
         console.log('Login successful:', { token, refreshToken });
       } catch (error) {
         console.error('Login error:', error);
         const errorMessage = handleApiError(error);
         showErrorNotification(errorMessage);
-        setError(`로그인 처리 중 오류가 발생했습니다: ${errorMessage}`);
-      } finally {
-        setIsLoading(false);
+        navigate('/login', { state: { error: errorMessage } });
       }
-    },
-    [kakaoLoginMutation, login, isLoginAttempted],
-  );
+    };
 
-  useEffect(() => {
     const code = new URL(window.location.href).searchParams.get('code');
-    if (code && !isAuthenticated && !isLoginAttempted) {
+    if (code && !isAuthenticated) {
       performKakaoLogin(code);
     } else if (!code) {
-      setError('카카오 인증 코드가 없습니다.');
-      setIsLoading(false);
+      navigate('/login', { state: { error: '카카오 인증 코드가 없습니다.' } });
     }
-  }, [isAuthenticated, performKakaoLogin, isLoginAttempted]);
+  }, [kakaoLoginMutation, login, isAuthenticated, navigate]);
 
   useEffect(() => {
     if (isAuthenticated) {
@@ -57,15 +47,7 @@ const Redirection: React.FC = () => {
     }
   }, [isAuthenticated, navigate]);
 
-  if (isLoading) {
-    return <div>로그인 중...</div>;
-  }
-
-  if (error) {
-    return <div>{error}</div>;
-  }
-
-  return null;
+  return <div>로그인 처리 중...</div>;
 };
 
 export default Redirection;