amicable-development-center · tkyoun0421 · Jun 28, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,6 +9,7 @@
     "Neue",
     "Pretendard",
     "Segoe",
+    "treemap",
     "TTFB"
   ],
   "css.lint.unknownAtRules": "ignore",

diff --git a/package.json b/package.json
@@ -17,7 +17,10 @@
     "prepare-commit": "lint-staged",
     "preview": "vite preview",
     "preinstall": "npx only-allow pnpm",
-    "prepare": "husky"
+    "prepare": "husky",
+    "dev:debug": "vite --debug --force",
+    "dev:profile": "vite --debug hmr",
+    "dev:verbose": "vite --logLevel info"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [

diff --git a/src/app/assets/icon.svg → public/logo.svg b/src/app/assets/icon.svg → public/logo.svg
diff --git a/src/app/entry/main.tsx b/src/app/entry/main.tsx
@@ -9,6 +9,11 @@ import "@app/styles/global.css";
 
 import queryClient from "@shared/react-query/queryClient";
 
+// HMR 성능 모니터 (개발 환경에서만)
+if (import.meta.env.DEV) {
+  import("@shared/libs/utils/measureHmr");
+}
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>

diff --git a/src/app/index.html b/src/app/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./assets/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="./public/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
@@ -28,7 +28,7 @@
       name="og:description"
       content="프로젝트 잼 - 함께 만들어가는 사이드 프로젝트"
     />
-    <meta name="og:image" content="./assets/icon.svg" />
+    <meta name="og:image" content="./public/logo.svg" />
     <meta name="og:url" content="https://project-jam-gamma.vercel.app/" />
     <meta name="og:site_name" content="프로젝트 잼" />
     <meta name="og:type" content="website" />

diff --git a/src/app/public/logo.svg b/src/app/public/logo.svg
diff --git a/src/app/routes/App.tsx b/src/app/routes/App.tsx
@@ -7,7 +7,10 @@ import MainLayout from "@app/routes/MainLayout";
 import PrivateRoute from "@app/routes/PrivateRoute";
 
 import { useAuthObserver } from "@shared/hooks/useAuthObserver";
-import LoadingSpinner from "@shared/ui/loading-spinner/LoadingSpinner";
+import { useLoadingCursor } from "@shared/hooks/useLoadingCursor";
+import GlobalSnackbar from "@shared/ui/GlobalSnackbar";
+import PageTransitionLoader from "@shared/ui/loading-spinner/PageTransitionLoader";
+import ScrollToTop from "@shared/ui/ScrollToTop";
 
 const HomePage = lazy(() => import("@pages/home/ui/HomePage"));
 const NotFoundPage = lazy(() => import("@pages/not-found/ui/NotFoundPage"));
@@ -26,47 +29,57 @@ const ProjectListPage = lazy(
   () => import("@pages/project-list/ui/ProjectListPage")
 );
 
+function AppContent(): JSX.Element {
+  useLoadingCursor();
+
+  return (
+    <Suspense fallback={<PageTransitionLoader />}>
+      <ScrollToTop />
+      <Routes>
+        {/* 헤더 없는 레이아웃 (로그인/회원가입 전용) */}
+        <Route element={<AuthLayout />}>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignUpPage />} />
+        </Route>
+
+        {/* 헤더 포함 레이아웃 (메인 페이지) */}
+        <Route element={<MainLayout />}>
+          {/* 공개 페이지 */}
+          <Route path="/" element={<HomePage />} />
+          <Route path="/project" element={<ProjectListPage />} />
+          <Route path="/project/:id" element={<ProjectDetailPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+
+          {/* 비공개 페이지 */}
+          <Route
+            path="/profile"
+            element={
+              <PrivateRoute>
+                <UserProfilePage />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/project/insert"
+            element={
+              <PrivateRoute>
+                <ProjectInsertPage />
+              </PrivateRoute>
+            }
+          />
+        </Route>
+      </Routes>
+    </Suspense>
+  );
+}
+
 function App(): JSX.Element {
   useAuthObserver();
 
   return (
     <BrowserRouter basename="/">
-      <Suspense fallback={<LoadingSpinner />}>
-        <Routes>
-          {/* 헤더 없는 레이아웃 (로그인/회원가입 전용) */}
-          <Route element={<AuthLayout />}>
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<SignUpPage />} />
-          </Route>
-
-          {/* 헤더 포함 레이아웃 (메인 페이지) */}
-          <Route element={<MainLayout />}>
-            {/* 공개 페이지 */}
-            <Route path="/" element={<HomePage />} />
-            <Route path="/project" element={<ProjectListPage />} />
-            <Route path="/project/:id" element={<ProjectDetailPage />} />
-            <Route path="*" element={<NotFoundPage />} />
-
-            {/* 비공개 페이지 */}
-            <Route
-              path="/profile"
-              element={
-                <PrivateRoute>
-                  <UserProfilePage />
-                </PrivateRoute>
-              }
-            />
-            <Route
-              path="/project/insert"
-              element={
-                <PrivateRoute>
-                  <ProjectInsertPage />
-                </PrivateRoute>
-              }
-            />
-          </Route>
-        </Routes>
-      </Suspense>
+      <AppContent />
+      <GlobalSnackbar />
     </BrowserRouter>
   );
 }

diff --git a/src/app/routes/MainLayout.tsx b/src/app/routes/MainLayout.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import { Outlet } from "react-router-dom";
 
+import Footer from "@widgets/Footer";
 import Header from "@widgets/Header/Header";
 
 const MainLayout = (): JSX.Element => {
@@ -10,6 +11,7 @@ const MainLayout = (): JSX.Element => {
       <main>
         <Outlet />
       </main>
+      <Footer />
     </>
   );
 };

diff --git a/src/app/routes/PrivateRoute.tsx b/src/app/routes/PrivateRoute.tsx
@@ -2,15 +2,21 @@ import React, { type JSX } from "react";
 import { Navigate, useLocation } from "react-router-dom";
 
 import { useAuthStore } from "@shared/stores/authStore";
+import LoadingSpinner from "@shared/ui/loading-spinner/LoadingSpinner";
 
 const PrivateRoute = ({
   children,
 }: {
   children: React.ReactNode;
 }): JSX.Element => {
   const user = useAuthStore((state) => state.user);
+  const isLoading = useAuthStore((state) => state.isLoading);
   const location = useLocation();
 
+  if (isLoading) {
+    return <LoadingSpinner variant="overlay" message="인증 확인 중..." />;
+  }
+
   if (!user) {
     return <Navigate to={`/login?redirect=${location.pathname}`} replace />;
   }

diff --git a/src/app/styles/global.css b/src/app/styles/global.css
@@ -52,10 +52,19 @@ body {
     "Droid Sans",
     "Helvetica Neue",
     sans-serif;
+  background-color: #f8fafc;
 }
 
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
+
+body.page-loading {
+  cursor: wait;
+}
+
+body.page-loading * {
+  cursor: wait !important;
+}