fromis_9/frontend/src/App.jsx

import { useEffect } from 'react';
import { BrowserRouter, useLocation } from 'react-router-dom';
import { BrowserView, MobileView } from 'react-device-detect';

// 공통 컴포넌트
import { ScrollToTop } from '@/components/common';

// 라우트
import { PCPublicRoutes, PCAdminRoutes, MobileRoutes } from '@/routes';

// 스토어
import { useAuthStore } from '@/stores';

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

/**
 * PC 라우트 - admin 경로일 때만 AdminRoutes 렌더링
 */
function PCRoutes() {
  const location = useLocation();
  const isAdminPath = location.pathname.startsWith('/admin');
  const { _hasHydrated } = useAuthStore();

  // admin 경로에서 hydration 완료 전까지 빈 화면
  if (isAdminPath && !_hasHydrated) {
    return null;
  }

  return (
    <PCWrapper>
      {isAdminPath ? <PCAdminRoutes /> : <PCPublicRoutes />}
    </PCWrapper>
  );
}

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

      {/* PC 뷰 */}
      <BrowserView>
        <PCRoutes />
      </BrowserView>

      {/* Mobile 뷰 */}
      <MobileView>
        <MobileRoutes />
      </MobileView>
    </BrowserRouter>
  );
}

export default App;