Frontend/yuhoyeong/redirect uri api (#71)

## 📝작업 내용

redirectURI api 통해서 전송 및 로직 정리, 로그인 관련 로직 정리 

+ 계정 삭제 후 바로 가입 시 초기화 안되는 문제 해결 ( Zustand 로직 정리 )

Author: yuhoyeong

frontend/src/App.tsx

@@ -42,8 +42,14 @@ const Router = () => {
             </ProtectedRoute>
           }
         />
-        {/* 가이드는 일시적으로 비인증 사용자도 접근 허용 */}
-        <Route path={"/guide"} element={<Guide />} />
+        <Route
+          path={"/guide"}
+          element={
+            <ProtectedRoute>
+              <Guide />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path={"/community"}
           element={

frontend/src/api/debugEnv.ts

@@ -30,8 +30,6 @@ export const refreshAccessToken = async (): Promise<{
   }
 
   try {
-    console.log('토큰 갱신 API 호출');
-    
     const response = await axios.post<RefreshTokenResponse>(
       `${import.meta.env.VITE_API_URL}/refresh`,
       {},
@@ -52,8 +50,6 @@ export const refreshAccessToken = async (): Promise<{
     // 새로운 토큰 저장
     setTokens(access_token, newRefreshToken || refreshToken);
 
-    console.log('토큰 갱신 성공');
-    
     return {
       success: true,
       access_token,

frontend/src/api/userSetting/apiClient.ts

@@ -1,7 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useProfileSetupStore } from "../../stores/useProfileSetupStore";
 import { useAuthStore } from "../../stores/useAuthStore";
-import { useNavigate } from "react-router-dom";
 import type { UserData } from "../../types/user";
 import apiClient from "./apiClient";
 
@@ -35,28 +34,18 @@ export const initialize = async (): Promise<InitializeUserResponse> => {
     custom_interests: tempCustomInterests && tempCustomInterests.length > 0 ? tempCustomInterests : undefined,
   };
 
-  console.log('🚀 사용자 초기화 요청:', requestBody);
-
   try {
     const response = await apiClient.put('/users/initialize', requestBody);
     const result: InitializeUserResponse = response.data;
 
-    console.log('✅ 사용자 초기화 성공:', result);
-
-    // 초기화 성공 시 사용자 정보 업데이트
+    // 임시 데이터 클리어 (사용자 정보는 useInitialize에서 처리)
     if (result.success && result.data) {
-      const { setUser } = useAuthStore.getState();
-      setUser(result.data);
-      
-      // 임시 데이터 클리어
       const { clearProfileSetup } = useProfileSetupStore.getState();
       clearProfileSetup();
     }
 
     return result;
   } catch (error: unknown) {
-    console.error(' 사용자 초기화 실패:', error);
-    
     if (error && typeof error === 'object' && 'response' in error) {
       const axiosError = error as { response: { data: { message?: string } } };
       throw new Error(axiosError.response?.data?.message || '사용자 초기화에 실패했습니다.');
@@ -68,26 +57,21 @@ export const initialize = async (): Promise<InitializeUserResponse> => {
 
 // TanStack Query를 사용한 초기화 훅
 export const useInitialize = () => {
-  const navigate = useNavigate();
+  const { setUser } = useAuthStore();
 
   return useMutation({
     mutationFn: initialize,
     onSuccess: (result) => {
-      console.log('🎉 초기화 완료, 홈으로 이동');
-      
-      // 사용자 정보가 확실히 업데이트되었는지 확인
       if (result.success && result.data) {
-        console.log('✅ 사용자 정보 업데이트 확인:', result.data.initialized);
+        // 사용자 정보 업데이트 (Zustand persist가 자동으로 localStorage에 저장)
+        setUser(result.data);
+        
+        // 전체 페이지 리로드로 스토어 재초기화 보장
+        window.location.href = '/home';
       }
-      
-      // 잠시 후 홈으로 이동 (상태 업데이트가 완료될 시간 확보)
-      setTimeout(() => {
-        navigate('/home');
-      }, 100);
     },
     onError: (error: Error) => {
-      console.error('💥 초기화 실패:', error.message);
-      // 에러는 UI에서 처리하도록 전파
+      console.error('초기화 실패:', error.message);
     },
   });
 };

frontend/src/api/userSetting/initialize.ts

@@ -11,26 +11,29 @@ export const useDeleteUser = () => {
 
     const mutation = useMutation({
         mutationFn: deleteUser,
-        onSuccess: (data) => {
-            console.log('✅ 사용자 삭제 성공:', data);
-            
+        onSuccess: () => {
             // 로컬 상태 정리
             clearTokens();
             clearAuthState();
 
+            // 로컬 스토리지 완전 정리 (Zustand persist 데이터 포함)
+            localStorage.removeItem('token-store');
+            localStorage.removeItem('auth-store');
+            localStorage.clear();
+            
             // 삭제 완료 후 로그인 페이지로 이동
-            setTimeout(() => {
-                navigate('/signIn');
-            }, 100);
+            navigate('/signIn', { replace: true });
         },
         onError: (error: Error) => {
-            console.error('❌ 사용자 삭제 실패:', error.message);
+            console.error('계정 삭제 실패:', error.message);
 
             // 401 에러 등 인증 오류인 경우 로그아웃 처리
             if (error.message.includes('401') || error.message.includes('인증')) {
                 clearTokens();
                 clearAuthState();
-                navigate('/signIn');
+                localStorage.removeItem('token-store');
+                localStorage.removeItem('auth-store');
+                navigate('/signIn', { replace: true });
             }
         },
     });

frontend/src/api/userSetting/useDeleteUser.ts

@@ -9,10 +9,7 @@ export const useKakaoLogin = () => {
 
     const mutation = useMutation({
         mutationFn: async (code: string) => {
-            console.log('🔑 카카오 로그인 API 호출');
-            
             const redirect_uri = `${window.location.origin}/oauth/kakao/redirect`;
-            console.log('🔁 전달할 redirect_uri:', redirect_uri);
 
             const response = await axios.post(
                 `${import.meta.env.VITE_API_URL}/oauth/login/kakao`,
@@ -26,32 +23,26 @@ export const useKakaoLogin = () => {
             return response.data;
         },
         onSuccess: (data) => {
-            console.log('✅ 로그인 성공', data);
-            
             const { access_token, refresh_token } = data.data;
 
             if (access_token && refresh_token) {
                 setTokens(access_token, refresh_token);
                 setAuthenticated(true);
-                
-                console.log('🔄 토큰 저장 완료');
-                console.log('📋 사용자 정보는 HomeProtectedRoute에서 자동으로 조회됩니다');
+            } else {
+                console.error('토큰이 응답에 없습니다:', data);
             }
             setLoading(false);
         },
         onError: (error: unknown) => {
-            // Axios 에러 타입 체크
             let errorMessage = "로그인에 실패했습니다.";
 
             if (error && typeof error === 'object' && 'response' in error) {
-                const axiosError = error as { response: { data: { message?: string } } };
+                const axiosError = error as { response: { data: { message?: string }; status?: number } };
                 if (axiosError.response?.data?.message) {
                     errorMessage = axiosError.response.data.message;
                 }
             }
 
-            console.error('❌ 로그인 실패:', errorMessage);
-            
             setAuthError(errorMessage);
             setLoading(false);
         },
@@ -60,29 +51,20 @@ export const useKakaoLogin = () => {
     const initiateKakaoLogin = () => {
         setAuthError(null);
 
-        // 환경 변수와 현재 도메인 정보 로깅
         const currentOrigin = window.location.origin;
         const envRedirectUri = import.meta.env.VITE_KAKAO_REDIRECT_URI;
         const isLocalhost = currentOrigin.includes('localhost');
 
-        // 환경별 리다이렉트 URI 결정
         let redirectUri: string;
         if (isLocalhost) {
             redirectUri = envRedirectUri || 'http://localhost:3000/oauth/kakao/redirect';
         } else {
             redirectUri = envRedirectUri || `${currentOrigin}/oauth/kakao/redirect`;
         }
 
-        console.log('🌍 현재 도메인:', currentOrigin);
-        console.log('⚙️ 환경변수 REDIRECT_URI:', envRedirectUri);
-        console.log('✅ 최종 사용할 REDIRECT_URI:', redirectUri);
-        
-        // prompt=login 추가로 강제 재로그인, nonce 추가로 캐시 방지
         const nonce = Date.now();
         const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${import.meta.env.VITE_KAKAO_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&prompt=login&nonce=${nonce}`;
 
-        console.log('🔗 카카오 로그인 URL:', kakaoAuthUrl);
-        
         window.location.href = kakaoAuthUrl;
     };
 

frontend/src/api/userSetting/useKakaoLogin.ts

@@ -10,17 +10,13 @@ export const useLogout = () => {
     const navigate = useNavigate();
 
     const mutation = useMutation({
-        mutationFn: async (reason?: string) => {
-            if (reason) {
-                console.log(`로그아웃 사유: ${reason}`);
-            }
-
+        mutationFn: async () => {
             const accessToken = getAccessToken();
 
             // 서버에 로그아웃 요청 (토큰 무효화)
             if (accessToken) {
                 try {
-                    const response = await axios.post(
+                    await axios.post(
                         `${import.meta.env.VITE_API_URL}/users/logout`,
                         {},
                         {
@@ -31,17 +27,8 @@ export const useLogout = () => {
                             timeout: 5000,
                         }
                     );
-                    
-                    if (response.data.success) {
-                        console.log('✅ 서버 로그아웃 성공:', response.data.message);
-                        
-                        // 카카오 세션은 해제하지 않음 (재로그인 시 기존 사용자로 인식하기 위해)
-                        console.log('ℹ️ 카카오 세션은 유지됩니다. 재로그인 시 기존 계정으로 연결됩니다.');
-                    } else {
-                        console.warn('⚠️ 서버 로그아웃 응답 실패:', response.data);
-                    }
                 } catch (error) {
-                    console.error('❌ 서버 로그아웃 요청 실패:', error);
+                    console.error('서버 로그아웃 요청 실패:', error);
                 }
             }
         },
@@ -50,36 +37,41 @@ export const useLogout = () => {
             clearTokens();
             clearAuthState();
 
+            // 로컬 스토리지 완전 정리
+            localStorage.removeItem('token-store');
+            localStorage.removeItem('auth-store');
+            
             // 로그인 페이지로 이동
-            setTimeout(() => {
-                navigate('/signIn');
-            }, 100);
+            navigate('/signIn', { replace: true });
         },
         onError: () => {
             // 서버 요청이 실패해도 로컬 상태는 정리
             clearTokens();
             clearAuthState();
 
+            // 로컬 스토리지 완전 정리
+            localStorage.removeItem('token-store');
+            localStorage.removeItem('auth-store');
+            
             // 로그인 페이지로 이동
-            setTimeout(() => {
-                navigate('/signIn');
-            }, 100);
+            navigate('/signIn', { replace: true });
         },
     });
 
-    const logout = (reason?: string) => {
-        mutation.mutate(reason);
+    const logout = () => {
+        mutation.mutate();
     };
 
     // 즉시 로그아웃 (API 호출 없이)
-    const forceLogout = (reason?: string) => {
-        if (reason) {
-            console.log(`강제 로그아웃 사유: ${reason}`);
-        }
-        
+    const forceLogout = () => {
         clearTokens();
         clearAuthState();
-        navigate('/signIn');
+        
+        // 로컬 스토리지 완전 정리
+        localStorage.removeItem('token-store');
+        localStorage.removeItem('auth-store');
+        
+        navigate('/signIn', { replace: true });
     };
 
     return {