Fix/#96 fix landing page access

umc-master/src/apis/axios-instance.ts

@@ -1,11 +1,12 @@
-import RoutePaths from '@router/routePaths';
 import { useTokenStore } from '@store/tokenStore';
 import axios, { AxiosInstance } from 'axios';
 
+const { accessToken } = useTokenStore.getState();
+
 const axiosInstance: AxiosInstance = axios.create({
   headers: {
     accept: 'application/json',
-    Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
+    Authorization: `Bearer ${accessToken}`,
   },
   baseURL: import.meta.env.VITE_BASE_URL,
 });
@@ -69,11 +70,6 @@ axiosInstance.interceptors.response.use(
         console.error('토큰 갱신 실패:', refreshError);
         useTokenStore.getState().clearTokens();
 
-        // 로그인 페이지로 리다이렉트
-        if (window.location.pathname !== RoutePaths.LOGIN) {
-          window.location.href = RoutePaths.LOGIN;
-        }
-
         return Promise.reject(refreshError);
       }
     }

umc-master/src/components/Auth/AuthWrapper.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useTokenStore } from '@store/tokenStore';
+import RoutePaths from '@router/routePaths';
+
+interface AuthWrapperProps {
+  children: React.ReactNode;
+}
+
+const AuthWrapper = ({ children }: AuthWrapperProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { accessToken } = useTokenStore.getState();
+
+  useEffect(() => {
+    // 로그인 페이지가 아니고 토큰이 없는 경우 리다이렉트
+    if (!accessToken && location.pathname !== RoutePaths.LANDING) {
+      navigate(RoutePaths.LOGIN, { replace: true });
+    }
+  }, [accessToken, location.pathname, navigate]);
+
+  // 토큰이 없고 로그인 페이지가 아닌 경우 아무것도 렌더링하지 않음
+  if (!accessToken && location.pathname !== RoutePaths.LOGIN) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default AuthWrapper;

umc-master/src/router/routes.tsx

@@ -20,6 +20,39 @@ import ChatPage from '@pages/chat/ChatPage';
 import ErrorPage from '@pages/error/ErrorPage';
 import MyChallengePage from '@pages/mychallenge/MyChallenge';
 import ChallengeDetailPage from '@pages/challenge/ChallengeDetailPage';
+import AuthWrapper from '@components/Auth/AuthWrapper';
+
+// 인증이 필요한 라우트들을 배열로 정의
+const protectedRoutes = [
+  { path: RoutePaths.MYPAGE, element: <MyPage /> },
+  { path: RoutePaths.MAIN, element: <MainPage /> },
+  { path: RoutePaths.SAVE_TIP, element: <SaveTipPage /> },
+  { path: RoutePaths.SEARCH, element: <SearchPage /> },
+  { path: RoutePaths.SAVE_TIP_DETAIL, element: <SaveTipDetailPage /> },
+  { path: RoutePaths.CREATE_POST, element: <CreatePostPage /> },
+  { path: RoutePaths.COMMUNITY, element: <CommunityPage /> },
+  { path: RoutePaths.MAGAZINE, element: <MagazinePage /> },
+  { path: RoutePaths.MAGAZINE_DETAIL, element: <MagazineDetailPage /> },
+  { path: RoutePaths.CHALLENGE, element: <ChallengePage /> },
+  { path: RoutePaths.MYCHALLENGE, element: <MyChallengePage /> },
+  { path: RoutePaths.CHALLENGE_DETAIL, element: <ChallengeDetailPage /> },
+  { path: RoutePaths.CHAT, element: <ChatPage /> },
+];
+
+// 인증이 필요없는 public 라우트들
+const publicRoutes = [
+  { index: true, element: <LandingPage /> },
+  { path: RoutePaths.LOGIN, element: <LoginPage /> },
+  { path: RoutePaths.SIGNUP, element: <SignupPage /> },
+  { path: RoutePaths.FINDPRIVACY, element: <FindPrivacy /> },
+  { path: RoutePaths.KAKAO_CALLBACK, element: <KakaoCallback /> },
+];
+
+// protected 라우트들을 AuthWrapper로 감싸기
+const wrappedProtectedRoutes = protectedRoutes.map((route) => ({
+  ...route,
+  element: <AuthWrapper>{route.element}</AuthWrapper>,
+}));
 
 const router = createBrowserRouter([
   {
@@ -28,26 +61,7 @@ const router = createBrowserRouter([
     children: [
       {
         errorElement: <ErrorPage />,
-        children: [
-          { index: true, element: <LandingPage /> },
-          { path: RoutePaths.LOGIN, element: <LoginPage /> },
-          { path: RoutePaths.SIGNUP, element: <SignupPage /> },
-          { path: RoutePaths.FINDPRIVACY, element: <FindPrivacy /> },
-          { path: RoutePaths.MYPAGE, element: <MyPage /> },
-          { path: RoutePaths.MAIN, element: <MainPage /> },
-          { path: RoutePaths.SEARCH, element: <SearchPage /> },
-          { path: RoutePaths.SAVE_TIP, element: <SaveTipPage /> },
-          { path: RoutePaths.SAVE_TIP_DETAIL, element: <SaveTipDetailPage /> },
-          { path: RoutePaths.CREATE_POST, element: <CreatePostPage /> },
-          { path: RoutePaths.COMMUNITY, element: <CommunityPage /> },
-          { path: RoutePaths.MAGAZINE, element: <MagazinePage /> },
-          { path: RoutePaths.MAGAZINE_DETAIL, element: <MagazineDetailPage /> },
-          { path: RoutePaths.KAKAO_CALLBACK, element: <KakaoCallback /> },
-          { path: RoutePaths.CHALLENGE, element: <ChallengePage /> },
-          { path: RoutePaths.MYCHALLENGE, element: <MyChallengePage /> },
-          { path: RoutePaths.CHALLENGE_DETAIL, element: <ChallengeDetailPage /> },
-          { path: RoutePaths.CHAT, element: <ChatPage /> },
-        ],
+        children: [...publicRoutes, ...wrappedProtectedRoutes],
       },
     ],
   },

umc-master/src/store/tokenStore.ts

@@ -9,7 +9,7 @@ interface TokenStore {
 
 export const useTokenStore = create<TokenStore>((set) => ({
   accessToken: null,
-  refreshToken: `${import.meta.env.VITE_REFRESH_TOKEN}` /* 로그인 기능 완성 후 수정 예정임 */,
+  refreshToken: null /* 로그인 기능 완성 후 수정 예정임 */,
   setTokens: (tokens) => {
     // console.log('Setting Tokens:', tokens);
     set(() => ({