Merge pull request #131 from TEAM-COMFIT/dev

[Deploy] 2차 배포 🚀

Author: odukong

.husky/pre-commit

@@ -1,7 +1,5 @@
 #!/bin/sh
 
-export PATH="/opt/homebrew/bin:$PATH"
-
 echo "🐶 Husky pre-commit 실행"
-pnpm exec lint-staged || exit 1 
-echo "🎉 lint-staged 통과"
+pnpm exec lint-staged || exit 1
+echo "🎉 lint-staged 통과"

src/app/App.tsx

@@ -1,9 +1,16 @@
+import { Suspense } from "react";
 import { RouterProvider } from "react-router-dom";
 
+import { LoadingPage } from "@/pages/fallback/loading-page";
+
 import { router } from "./routes/app-router";
 
 const App = () => {
-  return <RouterProvider router={router} />;
+  return (
+    <Suspense fallback={<LoadingPage />}>
+      <RouterProvider router={router} />
+    </Suspense>
+  );
 };
 
 export default App;

src/app/providers/store-reset-listener.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+import { ROUTES } from "@/app/routes/paths";
+import { useReportStore } from "@/features/experience-matching/store/report.store";
+
+export const StoreResetListener = () => {
+  const location = useLocation();
+  const reset = useReportStore((state) => state.reset);
+
+  useEffect(() => {
+    if (location.pathname !== ROUTES.EXPERIENCE_MATCHING) {
+      reset();
+    }
+  }, [location.pathname, reset]);
+
+  return null;
+};

src/app/routes/app-router.tsx

@@ -1,19 +1,31 @@
 import { createBrowserRouter } from "react-router-dom";
 
+import { NotFoundPage } from "@/pages/fallback/not-found-page";
+
+import AuthGuard from "./auth-guard";
 import { protectedRoutes } from "./protected-routes";
-import { publicRoutes } from "./public-routes";
+import { guestRoutes, publicRoutes } from "./public-routes";
 import { RootLayout } from "./root-layout";
 
+// import { useAuthStore } from "../store";
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <RootLayout />,
     children: [
       ...publicRoutes,
-
-      // TODO: auth에 따른 처리 추가
-      ...protectedRoutes,
-      // TODO: paths 이외의 경로 접근 시 error 처리
+      {
+        element: <AuthGuard type="guest" />,
+        children: [...guestRoutes],
+      },
+      {
+        element: <AuthGuard type="private" />,
+        children: [...protectedRoutes],
+      },
+      {
+        path: "*",
+        element: <NotFoundPage />,
+      },
     ],
   },
 ]);

src/app/routes/auth-guard.tsx

@@ -0,0 +1,28 @@
+import { useLocation, Navigate, Outlet } from "react-router-dom";
+
+import { useAuthStore } from "../store";
+
+interface AuthGuardProps {
+  type?: "private" | "guest";
+}
+
+const AuthGuard = ({ type = "private" }: AuthGuardProps) => {
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const location = useLocation();
+
+  if (location.pathname === "/mypage") return <Outlet />;
+
+  // 로그인이 되어있지 않은데 private 경로에 접근하는 경우 막음
+  if (type === "private" && !isLoggedIn) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  // 이미 로그인되어 있는데 guest 경로에 접근하는 경우 막음
+  if (type === "guest" && isLoggedIn) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+};
+
+export default AuthGuard;

src/app/routes/paths.ts

@@ -1,7 +1,7 @@
 export const ROUTES = {
   HOME: "/",
   LOGIN: "/login",
-  LOGIN_AUTH: "/oauth/kakao/callback",
+  LOGIN_AUTH: "/api/v1/oauth/kakao/callback",
   LANDING: "/landing",
   ONBOARDING: "/onboarding",
   COMPANY: (id = ":id") => `/company/${id}`, // 기업 상세

src/app/routes/protected-routes.tsx

@@ -1,13 +1,49 @@
-import { ExperiencePage } from "@/pages/experience/experience-page";
-import { ExperienceDetailPage } from "@/pages/experience-detail/experience-detail-page";
-import { ExperienceMatchingPage } from "@/pages/experience-matching/experience-matching-page";
-import { MatchingDetailPage } from "@/pages/matching-detail/matching-detail-page";
-import { MatchingListPage } from "@/pages/matching-list/matching-list-page";
-import { MyPage } from "@/pages/my-page/my-page";
-import { OnboardingPage } from "@/pages/onboarding/onboarding-page";
+import { lazy } from "react";
 
 import { ROUTES } from "./paths";
 
+const OnboardingPage = lazy(() =>
+  import("@/pages/onboarding/onboarding-page").then((module) => ({
+    default: module.OnboardingPage,
+  }))
+);
+
+const ExperienceMatchingPage = lazy(() =>
+  import("@/pages/experience-matching/experience-matching-page").then(
+    (module) => ({ default: module.ExperienceMatchingPage })
+  )
+);
+
+const MatchingListPage = lazy(() =>
+  import("@/pages/matching-list/matching-list-page").then((module) => ({
+    default: module.MatchingListPage,
+  }))
+);
+
+const MatchingDetailPage = lazy(() =>
+  import("@/pages/matching-detail/matching-detail-page").then((module) => ({
+    default: module.MatchingDetailPage,
+  }))
+);
+
+const ExperiencePage = lazy(() =>
+  import("@/pages/experience/experience-page").then((module) => ({
+    default: module.ExperiencePage,
+  }))
+);
+
+const ExperienceDetailPage = lazy(() =>
+  import("@/pages/experience-detail/experience-detail-page").then((module) => ({
+    default: module.ExperienceDetailPage,
+  }))
+);
+
+const MyPage = lazy(() =>
+  import("@/pages/my-page/my-page").then((module) => ({
+    default: module.MyPage,
+  }))
+);
+
 export const protectedRoutes = [
   { path: ROUTES.ONBOARDING, element: <OnboardingPage /> },
   { path: ROUTES.EXPERIENCE_MATCHING, element: <ExperienceMatchingPage /> },

src/app/routes/public-routes.tsx

@@ -1,16 +1,44 @@
-import { CompanyDetailPage } from "@/pages/company-detail/company-detail-page";
-import { HomePage } from "@/pages/home/home-page";
-import { LandingPage } from "@/pages/landing/landing-page";
-import { KakaoLoginPage } from "@/pages/login/kakao-login-page";
-import { LoginPage } from "@/pages/login/login-page";
+import { lazy } from "react";
 
 import { ROUTES } from "./paths";
 
-export const publicRoutes = [
+const LoginPage = lazy(() =>
+  import("@/pages/login/login-page").then((module) => ({
+    default: module.LoginPage,
+  }))
+);
+
+const KakaoLoginPage = lazy(() =>
+  import("@/pages/login/kakao-login-page").then((module) => ({
+    default: module.KakaoLoginPage,
+  }))
+);
+
+const LandingPage = lazy(() =>
+  import("@/pages/landing/landing-page").then((module) => ({
+    default: module.LandingPage,
+  }))
+);
+
+const HomePage = lazy(() =>
+  import("@/pages/home/home-page").then((module) => ({
+    default: module.HomePage,
+  }))
+);
+
+const CompanyDetailPage = lazy(() =>
+  import("@/pages/company-detail/company-detail-page").then((module) => ({
+    default: module.CompanyDetailPage,
+  }))
+);
+
+export const guestRoutes = [
   { path: ROUTES.LOGIN, element: <LoginPage /> },
   { path: ROUTES.LOGIN_AUTH, element: <KakaoLoginPage /> },
-  { path: ROUTES.LANDING, element: <LandingPage /> },
+];
 
+export const publicRoutes = [
+  { path: ROUTES.LANDING, element: <LandingPage /> },
   { path: ROUTES.HOME, element: <HomePage /> },
   { path: ROUTES.COMPANY(), element: <CompanyDetailPage /> },
 ];

src/app/routes/root-layout.tsx

@@ -1,20 +1,15 @@
 import { Outlet } from "react-router-dom";
 
-import useDevice from "@/shared/model/use-device";
 import { Header } from "@widgets/index";
 
-import { themeVars } from "../styles";
+import { StoreResetListener } from "../providers/store-reset-listener";
 
 export const RootLayout = () => {
-  const { isMobile } = useDevice();
   return (
     <>
+      <StoreResetListener />
       <Header />
-      <main
-        style={{
-          marginTop: !isMobile ? themeVars.height.header : "0",
-        }}
-      >
+      <main>
         <Outlet />
       </main>
     </>

src/app/store/index.ts

@@ -1 +1 @@
-export { useAuthStore } from "@shared/model/auth";
+export { useAuthStore } from "@/shared/model/store";