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;