SPMS_WEB/react/src/routes/index.tsx
SEAN fc9b0c0f75 feat: 프론트엔드 아키텍처 셋업 (#2)
- Vite 기본 템플릿 정리 및 index.html 수정
- guideline.html 기반 디자인 토큰 적용 (index.css)
- Feature-based 폴더 구조 (8개 feature 모듈)
- 18개 placeholder 페이지 + lazy loading 라우터
- 레이아웃 컴포넌트 (AppLayout, AppHeader, AppSidebar, AuthLayout)
- Zustand 스토어 (authStore, uiStore)
- API 계층 (Axios client, auth.api)
- 타입 정의, 유틸리티, 환경변수 설정
- ErrorBoundary, ProtectedRoute, PublicRoute

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 13:02:22 +09:00

94 lines
4.1 KiB
TypeScript

import { createBrowserRouter } from "react-router-dom";
import { lazy, Suspense, type ComponentType } from "react";
import AppLayout from "@/components/layout/AppLayout";
import AuthLayout from "@/components/layout/AuthLayout";
import ProtectedRoute from "./ProtectedRoute";
import PublicRoute from "./PublicRoute";
/** lazy import 래퍼 */
function lazyPage(importFn: () => Promise<{ default: ComponentType }>) {
const LazyComponent = lazy(importFn);
return (
<Suspense fallback={<div className="flex h-full items-center justify-center p-6"> ...</div>}>
<LazyComponent />
</Suspense>
);
}
/* Auth 페이지 */
const LoginPage = () => lazyPage(() => import("@/features/auth/pages/LoginPage"));
const SignupPage = () => lazyPage(() => import("@/features/auth/pages/SignupPage"));
const VerifyEmailPage = () => lazyPage(() => import("@/features/auth/pages/VerifyEmailPage"));
/* Dashboard 페이지 */
const HomePage = () => lazyPage(() => import("@/features/dashboard/pages/HomePage"));
const DashboardPage = () => lazyPage(() => import("@/features/dashboard/pages/DashboardPage"));
/* Service 페이지 */
const ServiceListPage = () => lazyPage(() => import("@/features/service/pages/ServiceListPage"));
const ServiceRegisterPage = () => lazyPage(() => import("@/features/service/pages/ServiceRegisterPage"));
const ServiceDetailPage = () => lazyPage(() => import("@/features/service/pages/ServiceDetailPage"));
const ServiceEditPage = () => lazyPage(() => import("@/features/service/pages/ServiceEditPage"));
/* Message 페이지 */
const MessageListPage = () => lazyPage(() => import("@/features/message/pages/MessageListPage"));
const MessageRegisterPage = () => lazyPage(() => import("@/features/message/pages/MessageRegisterPage"));
/* Statistics 페이지 */
const StatisticsPage = () => lazyPage(() => import("@/features/statistics/pages/StatisticsPage"));
const StatisticsHistoryPage = () => lazyPage(() => import("@/features/statistics/pages/StatisticsHistoryPage"));
/* Device 페이지 */
const DeviceListPage = () => lazyPage(() => import("@/features/device/pages/DeviceListPage"));
/* Tag 페이지 */
const TagManagePage = () => lazyPage(() => import("@/features/tag/pages/TagManagePage"));
/* Settings 페이지 */
const MyPage = () => lazyPage(() => import("@/features/settings/pages/MyPage"));
const ProfileEditPage = () => lazyPage(() => import("@/features/settings/pages/ProfileEditPage"));
const NotificationsPage = () => lazyPage(() => import("@/features/settings/pages/NotificationsPage"));
export const router = createBrowserRouter([
{
/* 공개 라우트 (인증 불필요) */
element: <PublicRoute />,
children: [
{
element: <AuthLayout />,
children: [
{ path: "/login", element: <LoginPage /> },
{ path: "/signup", element: <SignupPage /> },
{ path: "/verify-email", element: <VerifyEmailPage /> },
],
},
],
},
{
/* 보호된 라우트 (인증 필요) */
element: <ProtectedRoute />,
children: [
{
element: <AppLayout />,
children: [
{ path: "/", element: <HomePage /> },
{ path: "/dashboard", element: <DashboardPage /> },
{ path: "/services", element: <ServiceListPage /> },
{ path: "/services/register", element: <ServiceRegisterPage /> },
{ path: "/services/:id", element: <ServiceDetailPage /> },
{ path: "/services/:id/edit", element: <ServiceEditPage /> },
{ path: "/messages", element: <MessageListPage /> },
{ path: "/messages/register", element: <MessageRegisterPage /> },
{ path: "/statistics", element: <StatisticsPage /> },
{ path: "/statistics/history", element: <StatisticsHistoryPage /> },
{ path: "/devices", element: <DeviceListPage /> },
{ path: "/tags", element: <TagManagePage /> },
{ path: "/settings", element: <MyPage /> },
{ path: "/settings/profile", element: <ProfileEditPage /> },
{ path: "/settings/notifications", element: <NotificationsPage /> },
],
},
],
},
]);