From 918981899f1ee8129c1185004e8a617d94d9a8f3 Mon Sep 17 00:00:00 2001
From: woo-dev-log <sswwhh.dev@gmail.com>
Date: Tue, 5 Aug 2025 16:17:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=20=EB=B3=B4=ED=98=B8=EB=A5=BC=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20PrivateRoute=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 로그인 인증 상태 체크 로직 추가
- App 컴포넌트를 PrivateRoute로 감싸 주요 페이지 보호
- 로그인/콜백/온보딩 페이지는 공개 라우트로 분리
---
 src/components/auth/PrivateRoute.tsx | 14 ++++++++++++++
 src/main.tsx                         | 23 ++++++++++++++---------
 2 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/components/auth/PrivateRoute.tsx

diff --git a/src/components/auth/PrivateRoute.tsx b/src/components/auth/PrivateRoute.tsx
new file mode 100644
index 0000000..6d6b515
--- /dev/null
+++ b/src/components/auth/PrivateRoute.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+interface PrivateRouteProps {
+  children: ReactNode;
+}
+
+export const PrivateRoute = ({ children }: PrivateRouteProps) => {
+  // TODO: 현재 백엔드에서 로그인 응답을 sessionId로 제공하고 있어 
+  // 임시로 session_id로 인증 체크 중. 추후 access_token으로 통일 예정
+  const token = localStorage.getItem('session_id');
+  
+  return token ? <>{children}</> : <Navigate to="/login" replace />;
+};
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index f0b22f2..46f8204 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -25,6 +25,7 @@ const queryClient = new QueryClient({
 });
 import { OnboardingPage } from "./pages/onboarding/OnboardingPage.tsx";
 import { PostDetailPage } from "./pages/community/PostDetailPage.tsx";
+import { PrivateRoute } from "./components/auth/PrivateRoute.tsx";
 
 async function enableMocking() {
   if (import.meta.env.DEV) {
@@ -36,7 +37,11 @@ async function enableMocking() {
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: (
+      <PrivateRoute>
+        <App />
+      </PrivateRoute>
+    ),
     children: [
       {
         index: true,
@@ -62,20 +67,20 @@ const router = createBrowserRouter([
         path: "community",
         element: <PostDetailPage />,
       },
-      {
-        path: "login",
-        element: <LoginPage />,
-      },
-      {
-        path: "onboarding",
-        element: <OnboardingPage />,
-      },
     ],
   },
+  {
+    path: "/login",
+    element: <LoginPage />,
+  },
   {
     path: "/callback",
     element: <AuthCallbackPage />,
   },
+  {
+    path: "/onboarding",
+    element: <OnboardingPage />,
+  },
 ]);
 
 enableMocking().then(() => {

From e7fd5a75613d96b8ae07d36fa7ea296b62133e68 Mon Sep 17 00:00:00 2001
From: woo-dev-log <sswwhh.dev@gmail.com>
Date: Tue, 5 Aug 2025 16:21:35 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20PrivateRoute=20=EB=B6=84=EB=A6=AC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EA=B3=B5=EA=B0=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 로그인, 온보딩 페이지가 App 컴포넌트 밖으로 가면서 발생한 레이아웃 이슈 해결
- 로그인 페이지에 GlobalLayout 개별 적용
- 온보딩 페이지에 GlobalLayout 개별 적용
---
 src/pages/auth/LoginPage.tsx            | 49 ++++++++++----------
 src/pages/onboarding/OnboardingPage.tsx | 59 +++++++++++++------------
 2 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx
index 8a8db44..eec9be1 100644
--- a/src/pages/auth/LoginPage.tsx
+++ b/src/pages/auth/LoginPage.tsx
@@ -1,3 +1,4 @@
+import GlobalLayout from "@/components/layout/GlobalLayout";
 import { Button } from "@/components/ui/button";
 
 export function LoginPage() {
@@ -20,22 +21,23 @@ export function LoginPage() {
   };
 
   return (
-    <div className="flex flex-col justify-between min-h-full p-8">
-      <section className="mt-20">
-        <p className="text-brand-primary text-lg mb-8">
-          우리 동네 개발자 커뮤니티
-        </p>
-        <h1 className="text-brand-primary text-5xl font-bold">CO-MEET</h1>
-      </section>
+    <GlobalLayout showHeader={false} showBottomNavigation={false}>
+      <div className="flex flex-col justify-between min-h-full p-8">
+        <section className="mt-20">
+          <p className="text-brand-primary text-lg mb-8">
+            우리 동네 개발자 커뮤니티
+          </p>
+          <h1 className="text-brand-primary text-5xl font-bold">CO-MEET</h1>
+        </section>
 
-      <section className="mx-auto">
-        <img src="/logo.svg" alt="CO-MEET 로고" className="w-52 h-auto" />
-      </section>
+        <section className="mx-auto">
+          <img src="/logo.svg" alt="CO-MEET 로고" className="w-52 h-auto" />
+        </section>
 
-      <section className="mb-4">
-        <Button
-          onClick={handleGitHubLogin}
-          className="
+        <section className="mb-4">
+          <Button
+            onClick={handleGitHubLogin}
+            className="
           w-full
           h-12
           bg-brand-primary 
@@ -46,14 +48,15 @@ export function LoginPage() {
           gap-5
           cursor-pointer
         ">
-          <img
-            src="/github-black.svg"
-            alt="Github 로고"
-            className="w-8 h-auto"
-          />
-          <span>Github 로그인</span>
-        </Button>
-      </section>
-    </div>
+            <img
+              src="/github-black.svg"
+              alt="Github 로고"
+              className="w-8 h-auto"
+            />
+            <span>Github 로그인</span>
+          </Button>
+        </section>
+      </div>
+    </GlobalLayout>
   );
 }
diff --git a/src/pages/onboarding/OnboardingPage.tsx b/src/pages/onboarding/OnboardingPage.tsx
index b747bc3..95d690d 100644
--- a/src/pages/onboarding/OnboardingPage.tsx
+++ b/src/pages/onboarding/OnboardingPage.tsx
@@ -4,6 +4,7 @@ import { OnboardingStep2 } from "@/pages/onboarding/__components/OnboardingStep2
 import { OnboardingStep3 } from "@/pages/onboarding/__components/OnboardingStep3";
 import { OnboardingStep4 } from "@/pages/onboarding/__components/OnboardingStep4";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import GlobalLayout from "@/components/layout/GlobalLayout";
 
 export interface OnboardingData {
   nickname?: string;
@@ -55,36 +56,38 @@ export function OnboardingPage() {
   };
 
   return (
-    <div className="w-full pt-8">
-      {step < TOTAL_STEPS && (
-        <div className="w-full bg-gray-700 rounded-full h-2 mb-4">
-          <div
-            className="bg-lime-400 h-2 rounded-full transition-all duration-500"
-            style={{ width: `${progress}%` }}
-          />
-        </div>
-      )}
-      <Card className="bg-transparent border-none text-white">
+    <GlobalLayout showHeader={false} showBottomNavigation={false}>
+      <div className="w-full pt-8">
         {step < TOTAL_STEPS && (
-          <CardHeader>
-            <CardTitle className="text-2xl font-bold">
-              {getStepTitle()}
-            </CardTitle>
-          </CardHeader>
+          <div className="w-full bg-gray-700 rounded-full h-2 mb-4">
+            <div
+              className="bg-lime-400 h-2 rounded-full transition-all duration-500"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
         )}
-        <CardContent>
-          {step === 1 && (
-            <OnboardingStep1 onNext={handleNext} data={onboardingData} />
+        <Card className="bg-transparent border-none text-white">
+          {step < TOTAL_STEPS && (
+            <CardHeader>
+              <CardTitle className="text-2xl font-bold">
+                {getStepTitle()}
+              </CardTitle>
+            </CardHeader>
           )}
-          {step === 2 && (
-            <OnboardingStep2 onNext={handleNext} data={onboardingData} />
-          )}
-          {step === 3 && (
-            <OnboardingStep3 onNext={handleNext} data={onboardingData} />
-          )}
-          {step === 4 && <OnboardingStep4 />}
-        </CardContent>
-      </Card>
-    </div>
+          <CardContent>
+            {step === 1 && (
+              <OnboardingStep1 onNext={handleNext} data={onboardingData} />
+            )}
+            {step === 2 && (
+              <OnboardingStep2 onNext={handleNext} data={onboardingData} />
+            )}
+            {step === 3 && (
+              <OnboardingStep3 onNext={handleNext} data={onboardingData} />
+            )}
+            {step === 4 && <OnboardingStep4 />}
+          </CardContent>
+        </Card>
+      </div>
+    </GlobalLayout>
   );
 }