From a15169463033a8d6937e44601510ab7fdaa8845e Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Fri, 23 Jan 2026 13:34:28 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20App.jsx=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

라우트를 플랫폼/영역별로 분리하여 관리 용이성 향상
- routes/pc/public/index.jsx: PC 공개 라우트
- routes/pc/admin/index.jsx: PC 관리자 라우트
- routes/mobile/index.jsx: Mobile 라우트
- App.jsx: 194줄 → 47줄로 간소화

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/App.jsx                    | 158 +-----------------------
 frontend/src/routes/index.js            |   3 +
 frontend/src/routes/mobile/index.jsx    |  85 +++++++++++++
 frontend/src/routes/pc/admin/index.jsx  |  45 +++++++
 frontend/src/routes/pc/public/index.jsx |  45 +++++++
 5 files changed, 184 insertions(+), 152 deletions(-)
 create mode 100644 frontend/src/routes/index.js
 create mode 100644 frontend/src/routes/mobile/index.jsx
 create mode 100644 frontend/src/routes/pc/admin/index.jsx
 create mode 100644 frontend/src/routes/pc/public/index.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 51bc0e1..7b7f7c3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,56 +1,12 @@
 import { useEffect } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { BrowserView, MobileView } from 'react-device-detect';
 
 // 공통 컴포넌트
 import { ScrollToTop } from '@/components/common';
 
-// PC 레이아웃
-import { Layout as PCLayout } from '@/components/pc/public';
-
-// Mobile 레이아웃
-import { Layout as MobileLayout } from '@/components/mobile';
-
-// PC 공개 페이지
-import PCHome from '@/pages/pc/public/home/Home';
-import PCMembers from '@/pages/pc/public/members/Members';
-import PCSchedule from '@/pages/pc/public/schedule/Schedule';
-import PCScheduleDetail from '@/pages/pc/public/schedule/ScheduleDetail';
-import PCBirthday from '@/pages/pc/public/schedule/Birthday';
-import PCAlbum from '@/pages/pc/public/album/Album';
-import PCAlbumDetail from '@/pages/pc/public/album/AlbumDetail';
-import PCTrackDetail from '@/pages/pc/public/album/TrackDetail';
-import PCAlbumGallery from '@/pages/pc/public/album/AlbumGallery';
-import PCNotFound from '@/pages/pc/public/common/NotFound';
-
-// PC 관리자 페이지
-import AdminLogin from '@/pages/pc/admin/login/Login';
-import AdminDashboard from '@/pages/pc/admin/dashboard/Dashboard';
-import AdminMembers from '@/pages/pc/admin/members/Members';
-import AdminMemberEdit from '@/pages/pc/admin/members/MemberEdit';
-import AdminAlbums from '@/pages/pc/admin/albums/Albums';
-import AdminAlbumForm from '@/pages/pc/admin/albums/AlbumForm';
-import AdminAlbumPhotos from '@/pages/pc/admin/albums/AlbumPhotos';
-import AdminSchedules from '@/pages/pc/admin/schedules/Schedules';
-import AdminScheduleForm from '@/pages/pc/admin/schedules/ScheduleForm';
-import AdminScheduleFormPage from '@/pages/pc/admin/schedules/form';
-import AdminYouTubeEditForm from '@/pages/pc/admin/schedules/edit/YouTubeEditForm';
-import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory';
-import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict';
-import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots';
-import AdminNotFound from '@/pages/pc/admin/common/NotFound';
-
-// Mobile 페이지
-import MobileHome from '@/pages/mobile/home/Home';
-import MobileMembers from '@/pages/mobile/members/Members';
-import MobileSchedule from '@/pages/mobile/schedule/Schedule';
-import MobileScheduleDetail from '@/pages/mobile/schedule/ScheduleDetail';
-import MobileBirthday from '@/pages/mobile/schedule/Birthday';
-import MobileAlbum from '@/pages/mobile/album/Album';
-import MobileAlbumDetail from '@/pages/mobile/album/AlbumDetail';
-import MobileTrackDetail from '@/pages/mobile/album/TrackDetail';
-import MobileAlbumGallery from '@/pages/mobile/album/AlbumGallery';
-import MobileNotFound from '@/pages/mobile/common/NotFound';
+// 라우트
+import { PCPublicRoutes, PCAdminRoutes, MobileRoutes } from '@/routes';
 
 /**
  * PC 환경에서 body에 클래스 추가하는 래퍼
@@ -75,116 +31,14 @@ function App() {
       {/* PC 뷰 */}
       <BrowserView>
         <PCWrapper>
-          <Routes>
-            {/* 관리자 페이지 (자체 레이아웃 사용) */}
-            <Route path="/admin" element={<AdminLogin />} />
-            <Route path="/admin/dashboard" element={<AdminDashboard />} />
-            <Route path="/admin/members" element={<AdminMembers />} />
-            <Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
-            <Route path="/admin/albums" element={<AdminAlbums />} />
-            <Route path="/admin/albums/new" element={<AdminAlbumForm />} />
-            <Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
-            <Route path="/admin/albums/:albumId/photos" element={<AdminAlbumPhotos />} />
-            <Route path="/admin/schedule" element={<AdminSchedules />} />
-            <Route path="/admin/schedule/new" element={<AdminScheduleFormPage />} />
-            <Route path="/admin/schedule/new-legacy" element={<AdminScheduleForm />} />
-            <Route path="/admin/schedule/:id/edit" element={<AdminScheduleForm />} />
-            <Route path="/admin/schedule/:id/edit/youtube" element={<AdminYouTubeEditForm />} />
-            <Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
-            <Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
-            <Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
-            {/* 관리자 404 페이지 */}
-            <Route path="/admin/*" element={<AdminNotFound />} />
-
-            {/* 일반 페이지 (레이아웃 포함) */}
-            <Route
-              path="/*"
-              element={
-                <PCLayout>
-                  <Routes>
-                    <Route path="/" element={<PCHome />} />
-                    <Route path="/members" element={<PCMembers />} />
-                    <Route path="/schedule" element={<PCSchedule />} />
-                    <Route path="/schedule/:id" element={<PCScheduleDetail />} />
-                    <Route path="/birthday/:memberName/:year" element={<PCBirthday />} />
-                    <Route path="/album" element={<PCAlbum />} />
-                    <Route path="/album/:name" element={<PCAlbumDetail />} />
-                    <Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
-                    <Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
-                    {/* 404 페이지 */}
-                    <Route path="*" element={<PCNotFound />} />
-                  </Routes>
-                </PCLayout>
-              }
-            />
-          </Routes>
+          <PCAdminRoutes />
+          <PCPublicRoutes />
         </PCWrapper>
       </BrowserView>
 
       {/* Mobile 뷰 */}
       <MobileView>
-        <Routes>
-          <Route
-            path="/"
-            element={
-              <MobileLayout>
-                <MobileHome />
-              </MobileLayout>
-            }
-          />
-          <Route
-            path="/members"
-            element={
-              <MobileLayout pageTitle="멤버" noShadow>
-                <MobileMembers />
-              </MobileLayout>
-            }
-          />
-          <Route
-            path="/schedule"
-            element={
-              <MobileLayout pageTitle="일정" useCustomLayout>
-                <MobileSchedule />
-              </MobileLayout>
-            }
-          />
-          <Route path="/schedule/:id" element={<MobileScheduleDetail />} />
-          <Route path="/birthday/:memberName/:year" element={<MobileBirthday />} />
-          <Route
-            path="/album"
-            element={
-              <MobileLayout pageTitle="앨범">
-                <MobileAlbum />
-              </MobileLayout>
-            }
-          />
-          <Route
-            path="/album/:name"
-            element={
-              <MobileLayout pageTitle="앨범">
-                <MobileAlbumDetail />
-              </MobileLayout>
-            }
-          />
-          <Route
-            path="/album/:name/track/:trackTitle"
-            element={
-              <MobileLayout pageTitle="곡 상세">
-                <MobileTrackDetail />
-              </MobileLayout>
-            }
-          />
-          <Route
-            path="/album/:name/gallery"
-            element={
-              <MobileLayout pageTitle="앨범">
-                <MobileAlbumGallery />
-              </MobileLayout>
-            }
-          />
-          {/* 404 페이지 */}
-          <Route path="*" element={<MobileNotFound />} />
-        </Routes>
+        <MobileRoutes />
       </MobileView>
     </BrowserRouter>
   );
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
new file mode 100644
index 0000000..ade7961
--- /dev/null
+++ b/frontend/src/routes/index.js
@@ -0,0 +1,3 @@
+export { default as PCPublicRoutes } from './pc/public';
+export { default as PCAdminRoutes } from './pc/admin';
+export { default as MobileRoutes } from './mobile';
diff --git a/frontend/src/routes/mobile/index.jsx b/frontend/src/routes/mobile/index.jsx
new file mode 100644
index 0000000..aedb788
--- /dev/null
+++ b/frontend/src/routes/mobile/index.jsx
@@ -0,0 +1,85 @@
+import { Routes, Route } from 'react-router-dom';
+
+// 레이아웃
+import { Layout } from '@/components/mobile';
+
+// 페이지
+import Home from '@/pages/mobile/home/Home';
+import Members from '@/pages/mobile/members/Members';
+import Schedule from '@/pages/mobile/schedule/Schedule';
+import ScheduleDetail from '@/pages/mobile/schedule/ScheduleDetail';
+import Birthday from '@/pages/mobile/schedule/Birthday';
+import Album from '@/pages/mobile/album/Album';
+import AlbumDetail from '@/pages/mobile/album/AlbumDetail';
+import TrackDetail from '@/pages/mobile/album/TrackDetail';
+import AlbumGallery from '@/pages/mobile/album/AlbumGallery';
+import NotFound from '@/pages/mobile/common/NotFound';
+
+/**
+ * Mobile 라우트
+ */
+export default function MobileRoutes() {
+  return (
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <Layout>
+            <Home />
+          </Layout>
+        }
+      />
+      <Route
+        path="/members"
+        element={
+          <Layout pageTitle="멤버" noShadow>
+            <Members />
+          </Layout>
+        }
+      />
+      <Route
+        path="/schedule"
+        element={
+          <Layout pageTitle="일정" useCustomLayout>
+            <Schedule />
+          </Layout>
+        }
+      />
+      <Route path="/schedule/:id" element={<ScheduleDetail />} />
+      <Route path="/birthday/:memberName/:year" element={<Birthday />} />
+      <Route
+        path="/album"
+        element={
+          <Layout pageTitle="앨범">
+            <Album />
+          </Layout>
+        }
+      />
+      <Route
+        path="/album/:name"
+        element={
+          <Layout pageTitle="앨범">
+            <AlbumDetail />
+          </Layout>
+        }
+      />
+      <Route
+        path="/album/:name/track/:trackTitle"
+        element={
+          <Layout pageTitle="곡 상세">
+            <TrackDetail />
+          </Layout>
+        }
+      />
+      <Route
+        path="/album/:name/gallery"
+        element={
+          <Layout pageTitle="앨범">
+            <AlbumGallery />
+          </Layout>
+        }
+      />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}
diff --git a/frontend/src/routes/pc/admin/index.jsx b/frontend/src/routes/pc/admin/index.jsx
new file mode 100644
index 0000000..e18f321
--- /dev/null
+++ b/frontend/src/routes/pc/admin/index.jsx
@@ -0,0 +1,45 @@
+import { Routes, Route } from 'react-router-dom';
+
+// 관리자 페이지
+import AdminLogin from '@/pages/pc/admin/login/Login';
+import AdminDashboard from '@/pages/pc/admin/dashboard/Dashboard';
+import AdminMembers from '@/pages/pc/admin/members/Members';
+import AdminMemberEdit from '@/pages/pc/admin/members/MemberEdit';
+import AdminAlbums from '@/pages/pc/admin/albums/Albums';
+import AdminAlbumForm from '@/pages/pc/admin/albums/AlbumForm';
+import AdminAlbumPhotos from '@/pages/pc/admin/albums/AlbumPhotos';
+import AdminSchedules from '@/pages/pc/admin/schedules/Schedules';
+import AdminScheduleForm from '@/pages/pc/admin/schedules/ScheduleForm';
+import AdminScheduleFormPage from '@/pages/pc/admin/schedules/form';
+import AdminYouTubeEditForm from '@/pages/pc/admin/schedules/edit/YouTubeEditForm';
+import AdminScheduleCategory from '@/pages/pc/admin/schedules/ScheduleCategory';
+import AdminScheduleDict from '@/pages/pc/admin/schedules/ScheduleDict';
+import AdminScheduleBots from '@/pages/pc/admin/schedules/ScheduleBots';
+import AdminNotFound from '@/pages/pc/admin/common/NotFound';
+
+/**
+ * PC 관리자 라우트
+ */
+export default function AdminRoutes() {
+  return (
+    <Routes>
+      <Route path="/admin" element={<AdminLogin />} />
+      <Route path="/admin/dashboard" element={<AdminDashboard />} />
+      <Route path="/admin/members" element={<AdminMembers />} />
+      <Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
+      <Route path="/admin/albums" element={<AdminAlbums />} />
+      <Route path="/admin/albums/new" element={<AdminAlbumForm />} />
+      <Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
+      <Route path="/admin/albums/:albumId/photos" element={<AdminAlbumPhotos />} />
+      <Route path="/admin/schedule" element={<AdminSchedules />} />
+      <Route path="/admin/schedule/new" element={<AdminScheduleFormPage />} />
+      <Route path="/admin/schedule/new-legacy" element={<AdminScheduleForm />} />
+      <Route path="/admin/schedule/:id/edit" element={<AdminScheduleForm />} />
+      <Route path="/admin/schedule/:id/edit/youtube" element={<AdminYouTubeEditForm />} />
+      <Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
+      <Route path="/admin/schedule/dict" element={<AdminScheduleDict />} />
+      <Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
+      <Route path="/admin/*" element={<AdminNotFound />} />
+    </Routes>
+  );
+}
diff --git a/frontend/src/routes/pc/public/index.jsx b/frontend/src/routes/pc/public/index.jsx
new file mode 100644
index 0000000..1e9f44c
--- /dev/null
+++ b/frontend/src/routes/pc/public/index.jsx
@@ -0,0 +1,45 @@
+import { Routes, Route } from 'react-router-dom';
+
+// 레이아웃
+import { Layout } from '@/components/pc/public';
+
+// 공개 페이지
+import Home from '@/pages/pc/public/home/Home';
+import Members from '@/pages/pc/public/members/Members';
+import Schedule from '@/pages/pc/public/schedule/Schedule';
+import ScheduleDetail from '@/pages/pc/public/schedule/ScheduleDetail';
+import Birthday from '@/pages/pc/public/schedule/Birthday';
+import Album from '@/pages/pc/public/album/Album';
+import AlbumDetail from '@/pages/pc/public/album/AlbumDetail';
+import TrackDetail from '@/pages/pc/public/album/TrackDetail';
+import AlbumGallery from '@/pages/pc/public/album/AlbumGallery';
+import NotFound from '@/pages/pc/public/common/NotFound';
+
+/**
+ * PC 공개 라우트
+ */
+export default function PublicRoutes() {
+  return (
+    <Routes>
+      <Route
+        path="/*"
+        element={
+          <Layout>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/members" element={<Members />} />
+              <Route path="/schedule" element={<Schedule />} />
+              <Route path="/schedule/:id" element={<ScheduleDetail />} />
+              <Route path="/birthday/:memberName/:year" element={<Birthday />} />
+              <Route path="/album" element={<Album />} />
+              <Route path="/album/:name" element={<AlbumDetail />} />
+              <Route path="/album/:name/track/:trackTitle" element={<TrackDetail />} />
+              <Route path="/album/:name/gallery" element={<AlbumGallery />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Layout>
+        }
+      />
+    </Routes>
+  );
+}