fromis_9/frontend/src/App.jsx

import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } 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';

/**
 * PC 환경에서 body에 클래스 추가하는 래퍼
 */
function PCWrapper({ children }) {
  useEffect(() => {
    document.body.classList.add('is-pc');
    return () => document.body.classList.remove('is-pc');
  }, []);
  return children;
}

/**
 * 프로미스나인 팬사이트 메인 앱
 * react-device-detect를 사용한 PC/Mobile 분리
 */
function App() {
  return (
    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
      <ScrollToTop />

      {/* 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>
        </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>
      </MobileView>
    </BrowserRouter>
  );
}

export default App;