Refact: 로그인 로직 변경

Author: mimizae

src/App.tsx

@@ -5,8 +5,6 @@ import Login from './pages/Login';
 import SignUp from './pages/SignUp';
 import LoginComplete from './pages/Login/components/LoginComplete';
 import TermsAgreement from './pages/TermsAgreement';
-import KakaoCallback from './pages/Login/components/Kakao/KakaoCallback';
-import NaverCallback from './pages/Login/components/Naver/NaverCallback';
 
 import MyPage from './pages/MyPage';
 import ProfileEdit from './pages/ProfileEdit';
@@ -65,10 +63,6 @@ const publicRoutes = [
 	{ path: '/signup', element: <SignUp /> },
 	{ path: '/login/complete', element: <LoginComplete /> },
 	{ path: '/terms-agreement', element: <TermsAgreement /> },
-
-	// 콜백
-	{ path: '/auth/kakao/callback', element: <KakaoCallback /> },
-	{ path: '/auth/naver/callback', element: <NaverCallback /> },
 ];
 
 const App: React.FC = () => {

src/pages/Login/components/Kakao/KakaoCallback.tsx

@@ -7,15 +7,15 @@ import { StyledText } from '../../../../components/Text/StyledText';
 import kakao from '../../../../assets/default/snsIcon/kakao.svg';
 
 const Kakao: React.FC = () => {
-	const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
-	const REDIRECT_URI = encodeURIComponent(
-		import.meta.env.VITE_DOMAIN
-			? import.meta.env.VITE_DOMAIN + '/auth/kakao/callback'
-			: 'http://localhost:3000/auth/kakao/callback',
-	);
+	const SERVER_URI = import.meta.env.VITE_NEW_API_URL;
 
 	const handleLogin = () => {
-		window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+		// 리다이렉트 URL 설정 및 서버 URL 생성
+		const redirectUrl = 'http://localhost:3000/login/complete';
+		const serverUrl = `${SERVER_URI}/auth/login/kakao?redirectUrl=${redirectUrl}`;
+
+		// 서버로 리다이렉션
+		window.open(serverUrl, '_self');
 	};
 
 	return (

src/pages/Login/components/Kakao/index.tsx

@@ -7,16 +7,15 @@ import { SocialLogin, TextWrapper, LogoImgWrapper, LogoImage } from '../style';
 import naver from '../../../../assets/default/snsIcon/naver.svg';
 
 const Naver: React.FC = () => {
-	console.log(import.meta.env.VITE_DOMAIN);
-	const clientId = import.meta.env.VITE_NAVER_CLIENT_ID; // 네이버 개발자 센터에서 받은 클라이언트 ID
-	const redirectUri = encodeURIComponent(
-		import.meta.env.VITE_DOMAIN
-			? import.meta.env.VITE_DOMAIN + '/auth/naver/callback'
-			: 'http://localhost:3000/auth/naver/callback',
-	);
+	const SERVER_URI = import.meta.env.VITE_NEW_API_URL;
 
 	const handleLogin = () => {
-		window.location.href = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&state=STATE_TOKEN`;
+		// 리다이렉트 URL 설정 및 서버 URL 생성
+		const redirectUrl = 'http://localhost:3000/login/complete';
+		const serverUrl = `${SERVER_URI}/auth/login/naver?redirectUrl=${redirectUrl}`;
+
+		// 서버로 리다이렉션
+		window.open(serverUrl, '_self');
 	};
 
 	return (