Merge branch 'fe/refactor/labling-page' into 'fe/develop'

Fix: 피드백 반영 수정

See merge request s11-s-project/S11P21S002!69

frontend/src/api/axiosConfig.ts

@@ -30,9 +30,9 @@ const processQueue = (error: Error | null, token: string | undefined = undefined
 };
 
 api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-  const token = sessionStorage.getItem('accessToken');
-  if (token && config.headers) {
-    config.headers.Authorization = `Bearer ${token}`;
+  const accessToken = useAuthStore.getState().accessToken;
+  if (accessToken && config.headers) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
   }
   return config;
 });
@@ -72,13 +72,12 @@ api.interceptors.response.use(
         }
 
         useAuthStore.getState().setLoggedIn(true, newAccessToken);
-        sessionStorage.setItem('accessToken', newAccessToken);
         processQueue(null, newAccessToken);
 
-        if (originalRequest.headers) {
-          originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
-        }
-        return api(originalRequest);
+        const redirectUri = `/redirect/oauth2?accessToken=${newAccessToken}`;
+        window.location.href = redirectUri;
+
+        return Promise.reject(new Error('Redirecting to retrieve cookies'));
       } catch (reissueError: unknown) {
         processQueue(reissueError as Error, undefined);
         console.error('토큰 재발급 실패:', reissueError);
@@ -100,9 +99,7 @@ const handleCommonErrors = (error: AxiosError<BaseResponse<CustomError>>) => {
   if (error.response?.status === 400) {
     alert('잘못된 요청입니다. 다시 시도해 주세요.');
   } else if (error.response?.status === 403) {
-    alert('권한이 없습니다. 다시 로그인해 주세요.');
-    useAuthStore.getState().clearAuth();
-    window.location.href = '/';
+    alert(error.response?.data?.message);
   } else {
     console.error('오류 발생:', error.response?.data?.message || '알 수 없는 오류');
   }

frontend/src/components/Home/index.tsx

@@ -11,25 +11,22 @@ const DOMAIN = 'https://j11s002.p.ssafy.io';
 
 export default function Home() {
   const navigate = useNavigate();
-  const { isLoggedIn, setLoggedIn, profile, setProfile } = useAuthStore();
+  const { isLoggedIn, accessToken, setLoggedIn, profile, setProfile } = useAuthStore();
   const hasFetchedProfile = useRef(false);
 
-  if (!isLoggedIn && !profile && !hasFetchedProfile.current) {
-    const accessToken = sessionStorage.getItem('accessToken');
-    if (accessToken) {
-      setLoggedIn(true, accessToken);
-      fetchProfileApi()
-        .then((data: SuccessResponse<MemberResponseDTO>) => {
-          if (data?.isSuccess && data.data) {
-            setProfile(data.data);
-            hasFetchedProfile.current = true;
-          }
-        })
-        .catch((error: AxiosError<CustomError>) => {
-          alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 시도해주세요.');
-          console.error('프로필 가져오기 실패:', error?.response?.data?.message || '알 수 없는 오류');
-        });
-    }
+  if (!isLoggedIn && !profile && !hasFetchedProfile.current && accessToken) {
+    setLoggedIn(true, accessToken);
+    fetchProfileApi()
+      .then((data: SuccessResponse<MemberResponseDTO>) => {
+        if (data?.isSuccess && data.data) {
+          setProfile(data.data);
+          hasFetchedProfile.current = true;
+        }
+      })
+      .catch((error: AxiosError<CustomError>) => {
+        alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 시도해주세요.');
+        console.error('프로필 가져오기 실패:', error?.response?.data?.message || '알 수 없는 오류');
+      });
   }
 
   const handleGoogleSignIn = () => {

frontend/src/components/OAuthCallback/index.tsx

@@ -6,6 +6,7 @@ import { fetchProfileApi } from '@/api/authApi';
 export default function OAuthCallback() {
   const navigate = useNavigate();
   const setLoggedIn = useAuthStore((state) => state.setLoggedIn);
+  const setProfile = useAuthStore((state) => state.setProfile);
 
   useEffect(() => {
     const queryParams = new URLSearchParams(window.location.search);
@@ -13,7 +14,6 @@ export default function OAuthCallback() {
 
     if (accessToken) {
       setLoggedIn(true, accessToken);
-      sessionStorage.setItem('accessToken', accessToken);
 
       fetchProfileApi()
         .then((data) => {
@@ -23,7 +23,7 @@ export default function OAuthCallback() {
               nickname: data.data.nickname,
               profileImage: data.data.profileImage,
             };
-            useAuthStore.getState().setProfile(profileData);
+            setProfile(profileData);
             navigate('/browse');
           } else {
             throw new Error('프로필 데이터를 가져올 수 없습니다.');
@@ -37,7 +37,7 @@ export default function OAuthCallback() {
     } else {
       navigate('/');
     }
-  }, [navigate, setLoggedIn]);
+  }, [navigate, setLoggedIn, setProfile]);
 
   return <p>처리 중입니다...</p>;
 }

frontend/src/router/index.tsx

@@ -17,7 +17,7 @@ export const webPath = {
   workspace: () => '/workspace',
   // workspace: (workspaceId: string, projectId?: string) =>
   //   projectId ? `/workspace/${workspaceId}/project/${projectId}` : `/workspace/${workspaceId}`,
-  admin: (workspaceId: string) => `/admin/${workspaceId}`,
+  admin: () => `/admin`,
   oauthCallback: () => '/redirect/oauth2',
 };
 
@@ -61,7 +61,7 @@ const router = createBrowserRouter([
     ],
   },
   {
-    path: webPath.admin(':workspaceId'),
+    path: `${webPath.admin()}/:workspaceId`,
     element: <AdminLayout />,
     children: [
       {

frontend/src/stores/useAuthStore.ts

@@ -23,7 +23,6 @@ const useAuthStore = create<AuthState>()(
     }),
     {
       name: 'auth-storage',
-      getStorage: () => sessionStorage,
     }
   )
 );