레이아웃 1차

package.json

@@ -16,6 +16,7 @@
     "@tailwindcss/vite": "^4.1.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2",
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {

src/App.jsx

@@ -1,13 +1,23 @@
+import { Routes, Route } from "react-router-dom";
+import Main from "@/pages/main/index.jsx";
+import BusinessLayout from "@/pages/business/BusinessLayout.jsx";
+import Landmarks from "@/pages/business/Landmarks.jsx";
 import Header from "@/componenets/Header.jsx";
-import Main from "./pages/main/index.jsx";
 
 function App() {
     return (
         <>
-            <Header/>
-            <Main/>
+            <Header />
+            <Routes>
+                <Route path="/" element={<Main />} />
+                
+                {/* 사업소개 */}
+                <Route path="/business" element={<BusinessLayout />}>
+                    <Route path="landmarks" element={<Landmarks />} />
+                </Route>
+            </Routes>
         </>
-    )
+    );
 }
 
-export default App
+export default App;

src/componenets/Header.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import menuItems from '@/data/menuItems.json';
+import {Link} from "react-router-dom";
 
 const Header = () => {
     const [activeIndex, setActiveIndex] = useState(null);
@@ -10,12 +11,16 @@ const Header = () => {
                 id="sidebar-dimmer"
                 className={`fixed top-20 left-0 w-full h-full transition-opacity duration-500 ease-in-out ${activeIndex !== null ? 'bg-black/50 opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
             />
-            
+
             {/* 로고 영역 */}
-            <div className="absolute left-[40px] top-[26px] flex items-center gap-1 w-32">
-                <img className="w-10 h-7" src='/logo.png' alt='logo'/>
+            <Link
+                to="/"
+                onClick={() => setActiveIndex(null)}
+                className="absolute left-[40px] top-[26px] flex items-center gap-1 w-32"
+            >
+                <img className="w-10 h-7" src="/logo.png" alt="logo"/>
                 <div className="text-gray-600 text-xl font-bold font-['Inter']">반도산전</div>
-            </div>
+            </Link>
 
             {/* 메뉴 영역 */}
             <nav className="flex justify-center items-center w-full h-full">
@@ -25,9 +30,11 @@ const Header = () => {
                         className="relative flex flex-col items-center px-[3vw] cursor-pointer"
                         onMouseEnter={() => setActiveIndex(index)}
                     >
-                        <div className={`relative group font-bold font-['Inter'] cursor-pointer ${activeIndex === index ? 'text-blue-600' : 'text-gray-600'}`}>
+                        <div
+                            className={`relative group font-bold font-['Inter'] cursor-pointer ${activeIndex === index ? 'text-blue-600' : 'text-gray-600'}`}>
                             {item.label}
-                            <span className={`absolute left-0 bottom-[-2px] h-[2px] bg-blue-600 transition-all duration-300 ${activeIndex === index ? 'w-full' : 'w-0'}`}></span>
+                            <span
+                                className={`absolute left-0 bottom-[-2px] h-[2px] bg-blue-600 transition-all duration-300 ${activeIndex === index ? 'w-full' : 'w-0'}`}></span>
                         </div>
 
                         {activeIndex === index && item.children.length > 0 && (
@@ -36,24 +43,28 @@ const Header = () => {
                                 className="absolute flex flex-col space-y-6 mt-13 pt-4 z-10 bg-blue-900 text-white cursor-pointer"
                             >
                                 {item.children.map((child, cIdx) => (
-                                    <div
+                                    <Link
+                                        to={child.href}
                                         key={cIdx}
-                                        className="relative inline-block text-md text-center font-light font-['Inter'] text-white whitespace-pre-line hover:text-white/80 transition-colors duration-200 group cursor-pointer"
+                                        className="relative inline-block text-md text-center font-light font-['Inter'] text-white whitespace-pre-line hover:text-white/80 transition-colors duration-200 group"
+                                        onClick={() => setActiveIndex(null)}
                                     >
                                         <span className="relative">
                                             {child.label}
-                                            <span className="absolute left-0 bottom-[-2px] h-[2px] w-0 bg-white transition-all duration-300 group-hover:w-full"></span>
+                                            <span
+                                                className="absolute left-0 bottom-[-2px] h-[2px] w-0 bg-white transition-all duration-300 group-hover:w-full"></span>
                                         </span>
-                                    </div>
+                                    </Link>
                                 ))}
                             </div>
                         )}
                     </div>
                 ))}
             </nav>
-            
+
             {activeIndex !== null && (
-                <div id="menuBox" className="absolute w-full h-[50vh] top-20 border bg-blue-900" onMouseLeave={() => setActiveIndex(null)}></div>
+                <div id="menuBox" className="absolute w-full h-[50vh] top-20 border bg-blue-900"
+                     onMouseLeave={() => setActiveIndex(null)}></div>
             )}
         </header>
     );

src/componenets/PageHeader.jsx

@@ -0,0 +1,16 @@
+const PageHeader = ({ title, path }) => {
+    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']">
+                    {title}
+                </h2>
+                <div className="text-sm text-gray-400 font-['Inter'] self-end">
+                    {path}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PageHeader;

src/data/menuItems.json

@@ -1,9 +1,9 @@
 [
     {
         "label": "사업소개",
-        "href": "/company",
+        "href": "/business",
         "children": [
-            { "label": "주요 사업", "href": "/ceo" },
+            { "label": "주요 사업", "href": "/business/landmarks" },
             { "label": "주요 랜드마크\n시공현장", "href": "/ceo" }
         ]
     },

src/main.jsx

@@ -1,5 +1,10 @@
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import {BrowserRouter} from "react-router-dom";
 
-createRoot(document.getElementById('root')).render(<App />)
+createRoot(document.getElementById('root')).render(
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+);

src/pages/business/BusinessLayout.jsx

@@ -0,0 +1,25 @@
+import { Outlet } from "react-router-dom";
+
+const BusinessLayout = () => {
+    return (
+        <>
+            <div
+                className="w-full h-[360px] bg-cover bg-center relative"
+                style={{ backgroundImage: "url('/사업소개.jpg')" }}
+            >
+                <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']">사업소개</div>
+                    <div className="text-white text-lg font-normal font-['Inter']">
+                        반도산전의 사업을 소개합니다.
+                    </div>
+                </div>
+            </div>
+
+            {/* 하위 라우트 렌더링 */}
+            <Outlet />
+        </>
+    );
+};
+
+export default BusinessLayout;

src/pages/business/Landmarks.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import PageHeader from "@/componenets/PageHeader.jsx";
+
+const Landmarks = () => {
+    return (
+        <div>
+            <PageHeader title="주요 랜드마크 시공현장" path="HOME > 사업소개 > 주요 랜드마크 시공현장"/>
+        </div>
+    );
+};
+
+export default Landmarks;