파일구조 변경

src/App.tsx

@@ -15,7 +15,7 @@ import Header from '@/components/Header';
 import { lazyImport, withSuspense } from '@/utils/lazyImport';
 import { renderRoutesFromMenu } from '@/routes/generateRoutes';
 
-const Main = lazyImport('main/index');
+const Main = lazyImport('main');
 const NotFound = lazyImport('NotFound');
 
 const App = () => {

src/components/Layout.tsx

@@ -1,10 +1,9 @@
 import {Outlet, useLocation} from "react-router-dom";
 import menuItems from "@/data/menuItems";
-import PageHeader from "@/components/PageHeader.jsx";
 import React from "react";
 
 const Layout = () => {
-    const { pathname } = useLocation();
+  const {pathname} = useLocation();
 
   const matched = menuItems
     .flatMap(parent =>
@@ -16,32 +15,42 @@ const Layout = () => {
           : `${parent.href}/${child.href}`
       }))
     )
-    .find(({ fullHref }) => fullHref === pathname);
+    .find(({fullHref}) => fullHref === pathname);
 
   const title = matched?.parent.label || "";
-    const description = matched?.parent.description || "";
-    const layoutImg = matched?.parent.layoutImg || "/hero.jpg";
-    const subTitle = matched?.child.label || "";
+  const description = matched?.parent.description || "";
+  const layoutImg = matched?.parent.layoutImg || "/hero.jpg";
+  const subTitle = matched?.child.label || "";
 
-    return (
-        <>
-            <div
-                className="w-full h-[360px] bg-cover bg-center relative"
-                style={{backgroundImage: `url('${layoutImg}')`}}
-            >
-                <div className="absolute inset-0 bg-black/40"/>
-                <div className="relative max-w-7xl top-10 h-full mx-auto flex flex-col justify-center gap-2">
-                    <div className="text-white text-4xl font-bold font-['Inter']">{title}</div>
-                    <div className="text-white text-lg font-normal font-['Inter']">{description}</div>
-                </div>
-            </div>
+  return (
+    <>
+      <div
+        className="w-full h-[360px] bg-cover bg-center relative"
+        style={{backgroundImage: `url('${layoutImg}')`}}
+      >
+        <div className="absolute inset-0 bg-black/40"/>
+        <div className="relative max-w-7xl top-10 h-full mx-auto flex flex-col justify-center gap-2">
+          <div className="text-white text-4xl font-bold font-['Inter']">{title}</div>
+          <div className="text-white text-lg font-normal font-['Inter']">{description}</div>
+        </div>
+      </div>
 
-            <PageHeader title={title} subTitle={subTitle} />
+      {/* page header */}
+      <div className="w-full border-b-3 border-gray-300 py-5">
+        <div className="max-w-7xl mx-auto flex flex-col gap-2">
+          <h2 className="text-3xl text-blue-900 font-bold font-['Inter']">
+            {subTitle}
+          </h2>
+          <div className="text-sm text-gray-400 font-['Inter'] self-end">
+            {`HOME > ${title} > ${subTitle}`}
+          </div>
+        </div>
+      </div>
 
-            {/* 하위 라우트 렌더링 */}
-            <Outlet/>
-        </>
-    );
+      {/* 하위 라우트 렌더링 */}
+      <Outlet/>
+    </>
+  );
 };
 
 export default Layout;

src/components/PageHeader.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-interface PageHeaderProps {
-  /** 현재 페이지의 상위 타이틀 (예: 사업소개) */
-  title: string;
-
-  /** 현재 페이지의 하위 타이틀 (예: 정보통신공사) */
-  subTitle: string;
-}
-
-/**
- * 페이지 상단에 표시되는 헤더 컴포넌트
- */
-const PageHeader: React.FC<PageHeaderProps> = ({ title, subTitle }) => {
-  return (
-    <div className="w-full border-b-3 border-gray-300 py-5">
-      <div className="max-w-7xl mx-auto flex flex-col gap-2">
-        <h2 className="text-3xl text-blue-900 font-bold font-['Inter']">
-          {subTitle}
-        </h2>
-        <div className="text-sm text-gray-400 font-['Inter'] self-end">
-          {`HOME > ${title} > ${subTitle}`}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PageHeader;

src/components/CommonModal.tsx → src/components/common/CommonModal.tsx

@@ -4,7 +4,7 @@ import {MajorProject} from "@/data/project";
 interface CommonModalProps {
     isOpen: boolean;
     onClose: () => void;
-    item: MajorProject;
+    item: MajorProject | null;
 }
 
 /**

src/pages/main/Business.tsx → src/components/main/Business.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DarkOverlay from "@/components/DarkOverlay.jsx";
+import DarkOverlay from "@/components/common/DarkOverlay.jsx";
 import businessItems from '@/data/business';
 
 const RankBox = (title: string, rank: string, topPercent: string) => (

src/pages/main/Hero.tsx → src/components/main/Hero.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import DarkOverlay from "@/components/DarkOverlay.jsx";
+import DarkOverlay from "@/components/common/DarkOverlay.jsx";
 import {IMAGE_PREFIX} from "@/constants";
 
 const images = [

src/pages/main/Partners.tsx → src/components/main/Partners.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DarkOverlay from "@/components/DarkOverlay.jsx";
+import DarkOverlay from "@/components/common/DarkOverlay.jsx";
 import partnerList from '@/data/partners';
 import {IMAGE_PREFIX} from "@/constants";
 

src/pages/Main.tsx

@@ -0,0 +1,23 @@
+import React, { lazy, Suspense } from 'react';
+
+const Hero = lazy(() => import("@/components/main/Hero.jsx"));
+const Business = lazy(() => import("@/components/main/Business.jsx"));
+const Project = lazy(() => import("@/components/main/Project.jsx"));
+const Partners = lazy(() => import("@/components/main/Partners.jsx"));
+const Directions = lazy(() => import("@/components/main/Directions.jsx"));
+const Footer = lazy(() => import("@/components/main/Footer.jsx"));
+
+const Main = () => {
+  return (
+    <Suspense fallback={<div>로딩 중...</div>}>
+      <Hero/>
+      <Business/>
+      <Project/>
+      <Partners/>
+      <Directions/>
+      <Footer/>
+    </Suspense>
+  );
+};
+
+export default Main;

src/pages/about/Location.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Directions from "@/pages/main/Directions.jsx";
+import Directions from "@/components/main/Directions";
 
 const Location = () => {
     return (

src/pages/business/Landmarks.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
-import Pagination from "@/components/Pagination";
+import Pagination from "@/components/common/Pagination";
 import {getPaginatedList} from "@/utils/pagination";
-import {CommonModal} from "@/components/CommonModal";
+import {CommonModal} from "@/components/common/CommonModal";
 import projectList from "@/data/project";
 import type {MajorProject} from "@/data/project";
 

src/pages/business/Sections.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import businessItems from "@/data/business";
 import type { BusinessItem } from "@/data/business";
-import DarkOverlay from "@/components/DarkOverlay";
+import DarkOverlay from "@/components/common/DarkOverlay";
 
 
 const Landmarks = () => {

src/pages/main/Index.tsx

@@ -1,23 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-
-const Hero = lazy(() => import("./Hero.jsx"));
-const Business = lazy(() => import("./Business.jsx"));
-const Project = lazy(() => import("./Project.jsx"));
-const Partners = lazy(() => import("./Partners.jsx"));
-const Directions = lazy(() => import("@/pages/main/Directions.jsx"));
-const Footer = lazy(() => import("@/pages/main/Footer.jsx"));
-
-const Main = () => {
-  return (
-    <Suspense fallback={<div>로딩 중...</div>}>
-      <Hero/>
-      <Business/>
-      <Project/>
-      <Partners/>
-      <Directions/>
-      <Footer/>
-    </Suspense>
-  );
-};
-
-export default Main;