diff --git a/umc-master/src/apis/axios-instance.ts b/umc-master/src/apis/axios-instance.ts
index 6afb7ac..5add23a 100644
--- a/umc-master/src/apis/axios-instance.ts
+++ b/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);
}
}
diff --git a/umc-master/src/components/Auth/AuthWrapper.tsx b/umc-master/src/components/Auth/AuthWrapper.tsx
new file mode 100644
index 0000000..933ab93
--- /dev/null
+++ b/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;
diff --git a/umc-master/src/router/routes.tsx b/umc-master/src/router/routes.tsx
index d87d993..854b969 100644
--- a/umc-master/src/router/routes.tsx
+++ b/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: },
+ { path: RoutePaths.MAIN, element: },
+ { path: RoutePaths.SAVE_TIP, element: },
+ { path: RoutePaths.SEARCH, element: },
+ { path: RoutePaths.SAVE_TIP_DETAIL, element: },
+ { path: RoutePaths.CREATE_POST, element: },
+ { path: RoutePaths.COMMUNITY, element: },
+ { path: RoutePaths.MAGAZINE, element: },
+ { path: RoutePaths.MAGAZINE_DETAIL, element: },
+ { path: RoutePaths.CHALLENGE, element: },
+ { path: RoutePaths.MYCHALLENGE, element: },
+ { path: RoutePaths.CHALLENGE_DETAIL, element: },
+ { path: RoutePaths.CHAT, element: },
+];
+
+// 인증이 필요없는 public 라우트들
+const publicRoutes = [
+ { index: true, element: },
+ { path: RoutePaths.LOGIN, element: },
+ { path: RoutePaths.SIGNUP, element: },
+ { path: RoutePaths.FINDPRIVACY, element: },
+ { path: RoutePaths.KAKAO_CALLBACK, element: },
+];
+
+// protected 라우트들을 AuthWrapper로 감싸기
+const wrappedProtectedRoutes = protectedRoutes.map((route) => ({
+ ...route,
+ element: {route.element},
+}));
const router = createBrowserRouter([
{
@@ -28,26 +61,7 @@ const router = createBrowserRouter([
children: [
{
errorElement: ,
- children: [
- { index: true, element: },
- { path: RoutePaths.LOGIN, element: },
- { path: RoutePaths.SIGNUP, element: },
- { path: RoutePaths.FINDPRIVACY, element: },
- { path: RoutePaths.MYPAGE, element: },
- { path: RoutePaths.MAIN, element: },
- { path: RoutePaths.SEARCH, element: },
- { path: RoutePaths.SAVE_TIP, element: },
- { path: RoutePaths.SAVE_TIP_DETAIL, element: },
- { path: RoutePaths.CREATE_POST, element: },
- { path: RoutePaths.COMMUNITY, element: },
- { path: RoutePaths.MAGAZINE, element: },
- { path: RoutePaths.MAGAZINE_DETAIL, element: },
- { path: RoutePaths.KAKAO_CALLBACK, element: },
- { path: RoutePaths.CHALLENGE, element: },
- { path: RoutePaths.MYCHALLENGE, element: },
- { path: RoutePaths.CHALLENGE_DETAIL, element: },
- { path: RoutePaths.CHAT, element: },
- ],
+ children: [...publicRoutes, ...wrappedProtectedRoutes],
},
],
},
diff --git a/umc-master/src/store/tokenStore.ts b/umc-master/src/store/tokenStore.ts
index 3f894cc..b06adaf 100644
--- a/umc-master/src/store/tokenStore.ts
+++ b/umc-master/src/store/tokenStore.ts
@@ -9,7 +9,7 @@ interface TokenStore {
export const useTokenStore = create((set) => ({
accessToken: null,
- refreshToken: `${import.meta.env.VITE_REFRESH_TOKEN}` /* 로그인 기능 완성 후 수정 예정임 */,
+ refreshToken: null /* 로그인 기능 완성 후 수정 예정임 */,
setTokens: (tokens) => {
// console.log('Setting Tokens:', tokens);
set(() => ({