- 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>
94 lines
4.1 KiB
TypeScript
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 /> },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]);
|