♻️ (#31) 사이드바 목록 수정

src/app/routes/AppRouter.tsx

@@ -1,29 +1,30 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ROUTE_PATH } from "@/app/routes/routeConstants";
 
-import OverviewPage from "@/pages/overview/Overview";
-import ResourcesPage from "@/pages/overview/Resources";
-import MembersPage from "@/pages/overview/Members";
+import ProjectOverviewPage from "@/pages/overview/ProjectOverview";
+import TeamResourcesPage from "@/pages/overview/TeamResources";
+import TeamMembersPage from "@/pages/overview/TeamMembers";
 
-import EnvironmentPage from "@/pages/onboarding/Environment";
-import SetupPage from "@/pages/onboarding/Setup";
-import RunPage from "@/pages/onboarding/Run";
-import StructurePage from "@/pages/onboarding/Structure";
-import OnboardingResourcesPage from "@/pages/onboarding/Resources";
+import FrontendOnboardingPage from "@/pages/onboarding/FrontendOnboarding";
+import BackendOnboardingPage from "@/pages/onboarding/BackendOnboarding";
 
-import WorkflowPage from "@/pages/dev-guide/Workflow";
-import GitPage from "@/pages/dev-guide/Git";
-import ReviewPage from "@/pages/dev-guide/Review";
-import TestPage from "@/pages/dev-guide/Test";
+import CommonDevGuidePage from "@/pages/dev-guide/CommonDevGuide";
+import FrontendDevGuidePage from "@/pages/dev-guide/FrontendDevGuide";
+import BackendDevGuidePage from "@/pages/dev-guide/BackendDevGuide";
 
-import FrontendIntroPage from "@/pages/frontend/Intro";
-import DesignSystemPage from "@/pages/frontend/DesignSystem";
-import TechStackPage from "@/pages/frontend/TechStack";
-import FrontendIssuesPage from "@/pages/frontend/Issues";
+import FrontendGettingStartPage from "@/pages/frontend/GettingStart";
+import FrontenDesignSystemPage from "@/pages/frontend/DesignSystem";
+import FrontendKeyFeaturesPage from "@/pages/frontend/KeyFeatures";
+import FrontendTechStackPage from "@/pages/frontend/TechStack";
+import FrontendTroubleShootingPage from "@/pages/frontend/TroubleShooting";
+import FrontendPerformancePage from "@/pages/frontend/Performance";
+import FrontendCiCdPage from "@/pages/frontend/CiCd";
 
-import BackendArchPage from "@/pages/backend/Architecture";
-import BackendERDPage from "@/pages/backend/Erd";
-import BackendIssuesPage from "@/pages/backend/Issues";
+import BackendErdPage from "@/pages/backend/Erd";
+import BackendArchitecturePage from "@/pages/backend/Architecture";
+import BackendTroubleShootingPage from "@/pages/backend/TroubleShooting";
+import BackendPerformancePage from "@/pages/backend/Performance";
+import BackendTechStackPage from "@/pages/backend/TechStack";
 
 import DeployCIPage from "@/pages/deployment/Ci";
 import DeployCDPage from "@/pages/deployment/Cd";
@@ -40,35 +41,84 @@ const router = createBrowserRouter([
     path: "/",
     element: <AppLayout />,
     children: [
-      { path: ROUTE_PATH.OVERVIEW_PROJECT_OVERVIEW, element: <OverviewPage /> },
-      { path: ROUTE_PATH.OVERVIEW_RESOURCES, element: <ResourcesPage /> },
-      { path: ROUTE_PATH.OVERVIEW_MEMBERS, element: <MembersPage /> },
+      // 프로젝트 개요
+      { path: ROUTE_PATH.OVERVIEW.PROJECT, element: <ProjectOverviewPage /> },
+      { path: ROUTE_PATH.OVERVIEW.RESOURCES, element: <TeamResourcesPage /> },
+      { path: ROUTE_PATH.OVERVIEW.MEMBERS, element: <TeamMembersPage /> },
 
-      { path: ROUTE_PATH.ONBOARDING_ENV, element: <EnvironmentPage /> },
-      { path: ROUTE_PATH.ONBOARDING_SETUP, element: <SetupPage /> },
-      { path: ROUTE_PATH.ONBOARDING_RUN, element: <RunPage /> },
-      { path: ROUTE_PATH.ONBOARDING_STRUCTURE, element: <StructurePage /> },
+      // 온보딩 가이드
       {
-        path: ROUTE_PATH.ONBOARDING_RESOURCES,
-        element: <OnboardingResourcesPage />,
+        path: ROUTE_PATH.ONBOARDING.FRONTEND,
+        element: <FrontendOnboardingPage />,
+      },
+      {
+        path: ROUTE_PATH.ONBOARDING.BACKEND,
+        element: <BackendOnboardingPage />,
       },
 
-      { path: ROUTE_PATH.PROCESS_WORKFLOW, element: <WorkflowPage /> },
-      { path: ROUTE_PATH.PROCESS_GIT, element: <GitPage /> },
-      { path: ROUTE_PATH.PROCESS_REVIEW, element: <ReviewPage /> },
-      { path: ROUTE_PATH.PROCESS_TEST, element: <TestPage /> },
+      // 개발 가이드
+      {
+        path: ROUTE_PATH.DEVELOPER_GUIDE.COMMON,
+        element: <CommonDevGuidePage />,
+      },
+      {
+        path: ROUTE_PATH.DEVELOPER_GUIDE.FRONTEND,
+        element: <FrontendDevGuidePage />,
+      },
+      {
+        path: ROUTE_PATH.DEVELOPER_GUIDE.BACKEND,
+        element: <BackendDevGuidePage />,
+      },
 
-      { path: ROUTE_PATH.FRONTEND_INTRO, element: <FrontendIntroPage /> },
-      { path: ROUTE_PATH.FRONTEND_DESIGN, element: <DesignSystemPage /> },
-      { path: ROUTE_PATH.FRONTEND_TECHSTACK, element: <TechStackPage /> },
-      { path: ROUTE_PATH.FRONTEND_ISSUES, element: <FrontendIssuesPage /> },
+      // 프론트엔드 문서
+      {
+        path: ROUTE_PATH.FRONTEND.GETTING_STARTED,
+        element: <FrontendGettingStartPage />,
+      },
+      {
+        path: ROUTE_PATH.FRONTEND.DESIGN,
+        element: <FrontenDesignSystemPage />,
+      },
+      {
+        path: ROUTE_PATH.FRONTEND.TECHSTACK,
+        element: <FrontendTechStackPage />,
+      },
+      {
+        path: ROUTE_PATH.FRONTEND.KEY_FEATURES,
+        element: <FrontendKeyFeaturesPage />,
+      },
+      {
+        path: ROUTE_PATH.FRONTEND.TROUBLE_SHOOTING,
+        element: <FrontendTroubleShootingPage />,
+      },
+      {
+        path: ROUTE_PATH.FRONTEND.PERFORMANCE,
+        element: <FrontendPerformancePage />,
+      },
+      {
+        path: ROUTE_PATH.FRONTEND.CICD,
+        element: <FrontendCiCdPage />,
+      },
 
-      { path: ROUTE_PATH.BACKEND_ARCH, element: <BackendArchPage /> },
-      { path: ROUTE_PATH.BACKEND_ERD, element: <BackendERDPage /> },
-      { path: ROUTE_PATH.BACKEND_ISSUES, element: <BackendIssuesPage /> },
+      // 백엔드 문서
+      {
+        path: ROUTE_PATH.BACKEND.ARCHITECTURE,
+        element: <BackendArchitecturePage />,
+      },
+      { path: ROUTE_PATH.BACKEND.TECHSTACK, element: <BackendTechStackPage /> },
+      { path: ROUTE_PATH.BACKEND.ERD, element: <BackendErdPage /> },
+      {
+        path: ROUTE_PATH.BACKEND.TROUBLE_SHOOTING,
+        element: <BackendTroubleShootingPage />,
+      },
+      {
+        path: ROUTE_PATH.BACKEND.PERFORMANCE,
+        element: <BackendPerformancePage />,
+      },
 
-      { path: ROUTE_PATH.DEPLOY_CI, element: <DeployCIPage /> },
-      { path: ROUTE_PATH.DEPLOY_CD, element: <DeployCDPage /> },
+      // 배포 프로세스
+      { path: ROUTE_PATH.DEPLOYMENT.CI, element: <DeployCIPage /> },
+      { path: ROUTE_PATH.DEPLOYMENT.CD, element: <DeployCDPage /> },
     ],
   },
 ]);

src/app/routes/routeConstants.ts

@@ -1,59 +1,43 @@
 export const ROUTE_PATH = {
   ROOT: "/",
 
-  OVERVIEW_PROJECT_OVERVIEW: "/overview/project-overview",
-  OVERVIEW_RESOURCES: "/overview/resources",
-  OVERVIEW_MEMBERS: "/overview/members",
-
-  ONBOARDING_ENV: "/onboarding/environment",
-  ONBOARDING_SETUP: "/onboarding/setup",
-  ONBOARDING_RUN: "/onboarding/run",
-  ONBOARDING_STRUCTURE: "/onboarding/structure",
-  ONBOARDING_RESOURCES: "/onboarding/resources",
-
-  PROCESS_WORKFLOW: "/process/workflow",
-  PROCESS_GIT: "/process/git",
-  PROCESS_REVIEW: "/process/review",
-  PROCESS_TEST: "/process/test",
-
-  FRONTEND_INTRO: "/frontend/intro",
-  FRONTEND_DESIGN: "/frontend/design-system",
-  FRONTEND_TECHSTACK: "/frontend/tech-stack",
-  FRONTEND_ISSUES: "/frontend/issues",
-
-  BACKEND_ARCH: "/backend/architecture",
-  BACKEND_ERD: "/backend/erd",
-  BACKEND_ISSUES: "/backend/issues",
-
-  DEPLOY_CI: "/deployment/ci",
-  DEPLOY_CD: "/deployment/cd",
-};
-
-export const ROUTES = {
-  OVERVIEW: () => ROUTE_PATH.OVERVIEW_PROJECT_OVERVIEW,
-  OVERVIEW_RESOURCES: () => ROUTE_PATH.OVERVIEW_RESOURCES,
-  OVERVIEW_MEMBERS: () => ROUTE_PATH.OVERVIEW_MEMBERS,
-
-  ONBOARDING_ENV: () => ROUTE_PATH.ONBOARDING_ENV,
-  ONBOARDING_SETUP: () => ROUTE_PATH.ONBOARDING_SETUP,
-  ONBOARDING_RUN: () => ROUTE_PATH.ONBOARDING_RUN,
-  ONBOARDING_STRUCTURE: () => ROUTE_PATH.ONBOARDING_STRUCTURE,
-  ONBOARDING_RESOURCES: () => ROUTE_PATH.ONBOARDING_RESOURCES,
-
-  PROCESS_WORKFLOW: () => ROUTE_PATH.PROCESS_WORKFLOW,
-  PROCESS_GIT: () => ROUTE_PATH.PROCESS_GIT,
-  PROCESS_REVIEW: () => ROUTE_PATH.PROCESS_REVIEW,
-  PROCESS_TEST: () => ROUTE_PATH.PROCESS_TEST,
-
-  FRONTEND_INTRO: () => ROUTE_PATH.FRONTEND_INTRO,
-  FRONTEND_DESIGN: () => ROUTE_PATH.FRONTEND_DESIGN,
-  FRONTEND_TECHSTACK: () => ROUTE_PATH.FRONTEND_TECHSTACK,
-  FRONTEND_ISSUES: () => ROUTE_PATH.FRONTEND_ISSUES,
-
-  BACKEND_ARCH: () => ROUTE_PATH.BACKEND_ARCH,
-  BACKEND_ERD: () => ROUTE_PATH.BACKEND_ERD,
-  BACKEND_ISSUES: () => ROUTE_PATH.BACKEND_ISSUES,
-
-  DEPLOY_CI: () => ROUTE_PATH.DEPLOY_CI,
-  DEPLOY_CD: () => ROUTE_PATH.DEPLOY_CD,
+  OVERVIEW: {
+    PROJECT: "/overview/project-overview",
+    RESOURCES: "/overview/team-resources",
+    MEMBERS: "/overview/team-members",
+  },
+
+  ONBOARDING: {
+    FRONTEND: "/onboarding/frontend",
+    BACKEND: "/onboarding/backend",
+  },
+
+  DEVELOPER_GUIDE: {
+    COMMON: "/developer-guide/common",
+    FRONTEND: "/developer-guide/frontend",
+    BACKEND: "/developer-guide/backend",
+  },
+
+  FRONTEND: {
+    GETTING_STARTED: "/frontend/getting-start",
+    DESIGN: "/frontend/design-system",
+    TECHSTACK: "/frontend/tech-stack",
+    KEY_FEATURES: "/frontend/key-features",
+    TROUBLE_SHOOTING: "/frontend/trouble-shooting",
+    PERFORMANCE: "/frontend/performance-optimization",
+    CICD: "/frontend/ci-cd",
+  },
+
+  BACKEND: {
+    ARCHITECTURE: "/backend/architecture",
+    ERD: "/backend/erd",
+    TECHSTACK: "/backend/tech-stack",
+    TROUBLE_SHOOTING: "/backend/trouble-shooting",
+    PERFORMANCE: "/backend/performance-optimization",
+  },
+
+  DEPLOYMENT: {
+    CI: "/deployment/ci",
+    CD: "/deployment/cd",
+  },
 };

src/features/main/components/MainHero.tsx

@@ -4,7 +4,7 @@ import { ROUTE_PATH } from "@/app/routes/routeConstants";
 
 const MainHero = () => {
   const navigate = useNavigate();
-  const goToOverview = () => navigate(ROUTE_PATH.OVERVIEW_PROJECT_OVERVIEW);
+  const goToOverview = () => navigate(ROUTE_PATH.OVERVIEW.PROJECT);
 
   return (
     <section

src/features/sidebar/constants/sidebarConstants.ts

@@ -7,7 +7,7 @@ import {
   CloudUpload,
 } from "lucide-react";
 import BoostRocket from "@/shared/assets/boost/boost-rocket-2d.png";
-import { ROUTES } from "@/app/routes/routeConstants";
+import { ROUTE_PATH } from "@/app/routes/routeConstants";
 
 export const sidebarItems = {
   header: {
@@ -21,30 +21,26 @@ export const sidebarItems = {
       title: "프로젝트 개요",
       icon: Book,
       items: [
-        { title: "문서/프로젝트 개요", path: ROUTES.OVERVIEW() },
-        { title: "팀 리소스", path: ROUTES.OVERVIEW_RESOURCES() },
-        { title: "팀원 정보", path: ROUTES.OVERVIEW_MEMBERS() },
+        { title: "프로젝트/문서 개요", path: ROUTE_PATH.OVERVIEW.PROJECT },
+        { title: "팀 리소스", path: ROUTE_PATH.OVERVIEW.RESOURCES },
+        { title: "팀원 정보", path: ROUTE_PATH.OVERVIEW.MEMBERS },
       ],
     },
     {
       title: "온보딩 가이드",
       icon: BookOpen,
       items: [
-        { title: "환경 세팅", path: ROUTES.ONBOARDING_ENV() },
-        { title: "프로젝트 가져오기", path: ROUTES.ONBOARDING_SETUP() },
-        { title: "실행 방법", path: ROUTES.ONBOARDING_RUN() },
-        { title: "기본 구조 안내", path: ROUTES.ONBOARDING_STRUCTURE() },
-        { title: "참고 자료 / 지원 채널", path: ROUTES.ONBOARDING_RESOURCES() },
+        { title: "FE 온보딩 가이드", path: ROUTE_PATH.ONBOARDING.FRONTEND },
+        { title: "BE 온보딩 가이든", path: ROUTE_PATH.ONBOARDING.BACKEND },
       ],
     },
     {
       title: "개발 가이드",
       icon: Settings,
       items: [
-        { title: "작업 흐름", path: ROUTES.PROCESS_WORKFLOW() },
-        { title: "Git/Commit 규칙", path: ROUTES.PROCESS_GIT() },
-        { title: "코드 리뷰 기준", path: ROUTES.PROCESS_REVIEW() },
-        { title: "테스트 및 QA 절차", path: ROUTES.PROCESS_TEST() },
+        { title: "공통 개발 가이드", path: ROUTE_PATH.DEVELOPER_GUIDE.COMMON },
+        { title: "FE 개발 가이드", path: ROUTE_PATH.DEVELOPER_GUIDE.FRONTEND },
+        { title: "BE 개발 가이드", path: ROUTE_PATH.DEVELOPER_GUIDE.BACKEND },
       ],
     },
   ],
@@ -53,27 +49,38 @@ export const sidebarItems = {
       title: "프론트엔드 문서",
       icon: LaptopMinimal,
       items: [
-        { title: "소개", path: ROUTES.FRONTEND_INTRO() },
-        { title: "디자인 시스템", path: ROUTES.FRONTEND_DESIGN() },
-        { title: "기술 스택 및 선정 근거", path: ROUTES.FRONTEND_TECHSTACK() },
-        { title: "이슈 및 해결 과정", path: ROUTES.FRONTEND_ISSUES() },
+        { title: "시작하기", path: ROUTE_PATH.FRONTEND.GETTING_STARTED },
+        { title: "디자인 시스템", path: ROUTE_PATH.FRONTEND.DESIGN },
+        {
+          title: "기술 스택 및 선정 근거",
+          path: ROUTE_PATH.FRONTEND.TECHSTACK,
+        },
+        { title: "주요 기능", path: ROUTE_PATH.FRONTEND.KEY_FEATURES },
+        { title: "트러블 슈팅", path: ROUTE_PATH.FRONTEND.TROUBLE_SHOOTING },
+        { title: "성능 최적화", path: ROUTE_PATH.FRONTEND.PERFORMANCE },
+        { title: "CI/CD", path: ROUTE_PATH.FRONTEND.CICD },
       ],
     },
     {
       title: "백엔드 문서",
       icon: Server,
       items: [
-        { title: "아키텍처", path: ROUTES.BACKEND_ARCH() },
-        { title: "ERD", path: ROUTES.BACKEND_ERD() },
-        { title: "이슈 및 해결 과정", path: ROUTES.BACKEND_ISSUES() },
+        {
+          title: "기술 스택 및 선정 근거",
+          path: ROUTE_PATH.BACKEND.TECHSTACK,
+        },
+        { title: "아키텍처", path: ROUTE_PATH.BACKEND.ARCHITECTURE },
+        { title: "ERD", path: ROUTE_PATH.BACKEND.ERD },
+        { title: "트러블 슈팅", path: ROUTE_PATH.BACKEND.TROUBLE_SHOOTING },
+        { title: "성능 최적화", path: ROUTE_PATH.BACKEND.PERFORMANCE },
       ],
     },
     {
       title: "배포 프로세스",
       icon: CloudUpload,
       items: [
-        { title: "CI", path: ROUTES.DEPLOY_CI() },
-        { title: "CD", path: ROUTES.DEPLOY_CD() },
+        { title: "CI", path: ROUTE_PATH.DEPLOYMENT.CI },
+        { title: "CD", path: ROUTE_PATH.DEPLOYMENT.CD },
       ],
     },
   ],

src/pages/backend/Architecture.tsx

@@ -1,5 +1,8 @@
-const ArchitecturePage = () => {
-  return <div>Backend - Architecture 페이지</div>;
+import AnimatedTextBlock from "@/shared/components/animations/AnimatedTextBlock";
+import { PageDescriptions } from "@/shared/constants/pageDescriptions";
+
+const BackendArchitecturePage = () => {
+  return <AnimatedTextBlock items={PageDescriptions.BACKEND.ARCHITECTURE} />;
 };
 
-export default ArchitecturePage;
+export default BackendArchitecturePage;

src/pages/backend/Erd.tsx

@@ -1,5 +1,8 @@
-const ErdPage = () => {
-  return <div>Backend - Erd 페이지</div>;
+import AnimatedTextBlock from "@/shared/components/animations/AnimatedTextBlock";
+import { PageDescriptions } from "@/shared/constants/pageDescriptions";
+
+const BackendErdPage = () => {
+  return <AnimatedTextBlock items={PageDescriptions.BACKEND.ERD} />;
 };
 
-export default ErdPage;
+export default BackendErdPage;

src/pages/backend/Performance.tsx

@@ -0,0 +1,8 @@
+import AnimatedTextBlock from "@/shared/components/animations/AnimatedTextBlock";
+import { PageDescriptions } from "@/shared/constants/pageDescriptions";
+
+const BackendPerformancePage = () => {
+  return <AnimatedTextBlock items={PageDescriptions.BACKEND.PERFORMANCE} />;
+};
+
+export default BackendPerformancePage;