[FRONTEND] 배포용 의존성 설치 (#68)

의존성 vite 설치

Author: yuhoyeong

frontend/package-lock.json

@@ -34,6 +34,6 @@
     "globals": "^16.3.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
+    "vite": "^7.1.12"
   }
 }

frontend/package.json

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/useAuthStore";
+
+interface HomeProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 홈 페이지 보호 컴포넌트
+ * 초기화되지 않은 사용자는 설정 페이지로 리다이렉트
+ */
+export default function HomeProtectedRoute({
+  children,
+}: HomeProtectedRouteProps) {
+  const { user, isAuthenticated } = useAuthStore();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 인증되지 않은 사용자는 로그인 페이지로
+    if (!isAuthenticated) {
+      console.log("🔒 인증되지 않은 사용자 → 로그인 페이지로 이동");
+      navigate("/signIn");
+      return;
+    }
+
+    // 초기화되지 않은 사용자는 설정 페이지로 리다이렉트
+    if (user && !user.initialized) {
+      console.log("⚙️ 초기화되지 않은 사용자 → 설정 페이지로 이동");
+      navigate("/setting");
+      return;
+    }
+
+    // 초기화된 사용자만 홈 페이지 접근 허용
+    console.log("🏠 초기화된 사용자 → 홈 페이지 접근 허용");
+  }, [user, isAuthenticated, navigate]);
+
+  // 로딩 중이거나 리다이렉트 중일 때는 아무것도 렌더링하지 않음
+  if (!isAuthenticated || (user && !user.initialized)) {
+    return null;
+  }
+
+  // 초기화된 인증된 사용자만 홈 페이지 렌더링
+  return <>{children}</>;
+}

frontend/src/components/common/HomeProtectedRoute.tsx

@@ -0,0 +1,67 @@
+import { Navigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/useAuthStore";
+import { useTokenStore } from "../../stores/useTokenStore";
+import { useEffect } from "react";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const { isAuthenticated, clearUser, setAuthenticated } = useAuthStore();
+  const { getAccessToken, getRefreshToken, isTokenExpired } = useTokenStore();
+
+  // 토큰 상태와 인증 상태 동기화
+  useEffect(() => {
+    const accessToken = getAccessToken();
+    const refreshToken = getRefreshToken();
+
+    // 토큰이 없으면 인증 상태를 false로 설정
+    if (!accessToken || !refreshToken) {
+      if (isAuthenticated) {
+        setAuthenticated(false);
+        clearUser();
+      }
+      return;
+    }
+
+    // access token이 만료되었는지 확인
+    if (isTokenExpired(accessToken)) {
+      // refresh token도 확인
+      if (isTokenExpired(refreshToken)) {
+        // 둘 다 만료되었으면 로그아웃
+        setAuthenticated(false);
+        clearUser();
+        return;
+      }
+      // refresh token이 유효하면 토큰 갱신 필요 (여기서는 일단 통과)
+    }
+
+    // 토큰은 있지만 인증 상태가 false인 경우 true로 설정
+    if (!isAuthenticated) {
+      setAuthenticated(true);
+    }
+  }, [
+    isAuthenticated,
+    getAccessToken,
+    getRefreshToken,
+    isTokenExpired,
+    setAuthenticated,
+    clearUser,
+  ]);
+
+  const accessToken = getAccessToken();
+  const refreshToken = getRefreshToken();
+
+  // 토큰이 없거나 인증되지 않았으면 로그인 페이지로
+  if (!isAuthenticated || !accessToken || !refreshToken) {
+    return <Navigate to="/signIn" replace />;
+  }
+
+  // access token이 만료되었고 refresh token도 만료되었으면 로그인 페이지로
+  if (isTokenExpired(accessToken) && isTokenExpired(refreshToken)) {
+    return <Navigate to="/signIn" replace />;
+  }
+
+  return <>{children}</>;
+};

frontend/src/components/common/ProtectedRoute.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/useAuthStore";
+
+interface SettingProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 설정 페이지 보호 컴포넌트
+ * 이미 초기화가 완료된 사용자는 설정 페이지에 접근할 수 없도록 보호
+ */
+export default function SettingProtectedRoute({
+  children,
+}: SettingProtectedRouteProps) {
+  const { user, isAuthenticated } = useAuthStore();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 인증되지 않은 사용자는 로그인 페이지로
+    if (!isAuthenticated) {
+      console.log("🔒 인증되지 않은 사용자 → 로그인 페이지로 이동");
+      navigate("/signIn");
+      return;
+    }
+
+    // 이미 초기화가 완료된 사용자는 홈으로 리다이렉트
+    if (user && user.initialized) {
+      console.log("✅ 이미 초기화된 사용자 → 홈으로 이동");
+      navigate("/home");
+      return;
+    }
+
+    // 초기화되지 않은 사용자만 설정 페이지 접근 허용
+    console.log("⚙️ 초기화되지 않은 사용자 → 설정 페이지 접근 허용");
+  }, [user, isAuthenticated, navigate]);
+
+  // 로딩 중이거나 리다이렉트 중일 때는 아무것도 렌더링하지 않음
+  if (!isAuthenticated || (user && user.initialized)) {
+    return null;
+  }
+
+  // 초기화되지 않은 인증된 사용자만 설정 페이지 렌더링
+  return <>{children}</>;
+}

frontend/src/components/common/SettingProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
@@ -7,9 +7,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
-  <QueryClientProvider client={queryClient}>
-    <StrictMode>
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
       <App />
-    </StrictMode>
-  </QueryClientProvider>
+    </QueryClientProvider>
+  </React.StrictMode>
 );