Fix(client): 온보딩 토큰 저장 로직 수정

apps/client/package.json

@@ -29,6 +29,7 @@
     "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@tailwindcss/vite": "^4.1.12",
     "@tanstack/react-query-devtools": "^5.87.4",
+    "@types/chrome": "^0.0.273",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",

apps/client/src/pages/onBoarding/GoogleCallback.tsx

@@ -26,7 +26,14 @@ const GoogleCallback = () => {
     if (isUser) {
       if (accessToken) {
         localStorage.setItem('token', accessToken);
+
+        if (typeof chrome !== 'undefined' && chrome.storage?.local) {
+          chrome.storage.local.set({ token: accessToken }, () => {
+            console.log('Token saved to chrome storage');
+          });
+        }
       }
+
       navigate('/');
     } else {
       navigate('/onboarding?step=ALARM');

apps/client/src/shared/apis/queries.ts

@@ -80,6 +80,11 @@ export const usePostSignUp = () => {
       };
       if (newToken) {
         localStorage.setItem('token', newToken);
+        if (typeof chrome !== 'undefined' && chrome.storage?.local) {
+          chrome.storage.local.set({ token: newToken }, () => {
+            console.log('Token saved to chrome storage');
+          });
+        }
         sendTokenToExtension(newToken);
       }
 

apps/client/src/shared/apis/setting/axiosInstance.ts

@@ -8,55 +8,11 @@ const apiRequest = axios.create({
   },
 });
 
-const refreshToken = async (email: string) => {
-  try {
-    const response = await axios.get(
-      `${import.meta.env.VITE_BASE_URL}/api/v1/auth/token`,
-      {
-        params: { email },
-      }
-    );
-
-    const newToken = response.data.data?.token || response.data.token;
-
-    if (newToken) {
-      localStorage.setItem('token', newToken);
-      return newToken;
-    }
-
-    throw new Error('토큰 재발급 실패');
-  } catch (error) {
-    console.error('토큰 재발급 실패:', error);
-    throw error;
-  }
-};
-
 // 요청 인터셉터
 apiRequest.interceptors.request.use(async (config) => {
-  const noAuthNeeded = [
-    '/api/v1/auth/token',
-    '/api/v2/auth/signup',
-    '/api/v2/auth/google',
-  ];
-  const isNoAuth = noAuthNeeded.some((url) => config.url?.includes(url));
-
-  if (!isNoAuth) {
-    let token = localStorage.getItem('token');
-    const email = localStorage.getItem('email');
-    if (email) {
-      try {
-        token = await refreshToken(email);
-      } catch (err) {
-        console.error('요청 인터셉터에서 토큰 재발급 실패:', err);
-        localStorage.removeItem('token');
-        window.location.href = '/onboarding';
-        throw err;
-      }
-    } else {
-      console.error('토큰이 없습니다. 온보딩을 먼저 완료해주세요.');
-      throw new Error('토큰이 없습니다. 온보딩을 먼저 완료해주세요.');
-    }
+  const token = localStorage.getItem('token');
 
+  if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
 
@@ -68,11 +24,13 @@ apiRequest.interceptors.response.use(
   (response) => response,
   async (error) => {
     const originalRequest = error.config;
+
     const noAuthNeeded = [
       '/api/v1/auth/token',
       '/api/v2/auth/signup',
       '/api/v2/auth/google',
     ];
+
     const isNoAuth = noAuthNeeded.some((url) =>
       originalRequest.url?.includes(url)
     );
@@ -85,25 +43,10 @@ apiRequest.interceptors.response.use(
     ) {
       originalRequest._retry = true;
 
-      try {
-        const email = localStorage.getItem('email');
+      localStorage.removeItem('token');
+      window.location.href = '/onboarding?step=SOCIAL_LOGIN';
 
-        if (email) {
-          const newToken = await refreshToken(email);
-          originalRequest.headers.Authorization = `Bearer ${newToken}`;
-          return apiRequest(originalRequest);
-        } else {
-          console.error(
-            '사용자 이메일이 없습니다. 온보딩을 다시 완료해주세요.'
-          );
-          localStorage.removeItem('token');
-          window.location.href = '/onboarding';
-        }
-      } catch (refreshError) {
-        console.error('토큰 재발급 실패:', refreshError);
-        localStorage.removeItem('token');
-        window.location.href = '/onboarding';
-      }
+      return Promise.reject(error);
     }
 
     return Promise.reject(error);

apps/extension/src/apis/axiosInstance.ts

@@ -7,75 +7,64 @@ const apiRequest = axios.create({
   },
 });
 
-const fetchToken = async (email?: string) => {
-  const response = await axios.get(
-    `${import.meta.env.VITE_BASE_URL}/api/v1/auth/token`,
-    {
-      params: { email },
-    }
-  );
-  const newToken = response.data.data.token;
-  chrome.storage.local.set({ token: newToken }, () => {
-    console.log('Token re-saved to chrome storage');
-  });
-  return newToken;
-};
-
-apiRequest.interceptors.request.use(async (config) => {
-  const noAuthNeeded = ['/api/v1/auth/token', '/api/v1/auth/signup'];
-  const isNoAuth = noAuthNeeded.some((url) => config.url?.includes(url));
-
-  if (isNoAuth) return config;
-
-  const email = await new Promise<string | undefined>((resolve) => {
-    chrome.storage.local.get('email', (result) => resolve(result.email));
-  });
-
-  let token = await new Promise<string | undefined>((resolve) => {
+const getTokenFromStorage = () => {
+  return new Promise<string | undefined>((resolve) => {
     chrome.storage.local.get('token', (result) => {
       resolve(result.token);
     });
   });
+};
 
-  if (!isNoAuth) {
-    if (email) {
-      try {
-        token = await fetchToken(email);
-      } catch (err) {
-        console.error('요청 인터셉터에서 토큰 재발급 실패:', err);
-        localStorage.removeItem('token');
-        window.location.href = '/onboarding';
-        throw err;
-      }
-    } else {
-      throw new Error('토큰이 없습니다. 온보딩을 먼저 완료해주세요.');
-    }
+apiRequest.interceptors.request.use(async (config) => {
+  const token = await getTokenFromStorage();
 
+  if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
 
   return config;
 });
 
+// TODO: 환경변수로 분리
+// eslint-disable-next-line turbo/no-undeclared-env-vars
+const onboardingUrl = import.meta.env.DEV
+  ? 'http://localhost:5173/onboarding?step=SOCIAL_LOGIN'
+  : 'https://pinback.today/onboarding?step=SOCIAL_LOGIN';
+
+let isRedirecting = false;
+
 apiRequest.interceptors.response.use(
   (response) => response,
   async (error) => {
     const originalRequest = error.config;
-    const noAuthNeeded = ['/api/v1/auth/token', '/api/v1/auth/signup'];
+
+    const noAuthNeeded = [
+      '/api/v1/auth/token',
+      '/api/v1/auth/signup',
+      '/api/v2/auth/google',
+    ];
     const isNoAuth = noAuthNeeded.some((url) =>
       originalRequest.url?.includes(url)
     );
+
     if (
       error.response &&
       (error.response.status === 401 || error.response.status === 403) &&
-      !originalRequest._retry &&
       !isNoAuth
     ) {
-      originalRequest._retry = true;
-      const newToken = await fetchToken('[email protected]');
-      originalRequest.headers.Authorization = `Bearer ${newToken}`;
-      return apiRequest(originalRequest);
+      if (!isRedirecting) {
+        isRedirecting = true;
+
+        chrome.storage.local.remove(['token', 'email'], () => {});
+
+        chrome.tabs.create({ url: onboardingUrl }, () => {
+          setTimeout(() => {
+            isRedirecting = false;
+          }, 2000);
+        });
+      }
     }
+
     return Promise.reject(error);
   }
 );