찾아오시는 길

src/App.jsx

@@ -4,6 +4,7 @@ import Landmarks from "@/pages/business/Landmarks.jsx";
 import Header from "@/components/Header.jsx";
 import Layout from "@/components/Layout.jsx";
 import Sections from "@/pages/business/Sections.jsx";
+import Location from "@/pages/about/Location.jsx";
 
 function App() {
     return (
@@ -15,6 +16,9 @@ function App() {
                     <Route path="landmarks" element={<Landmarks/>}/>
                     <Route path="sections" element={<Sections/>}/>
                 </Route>
+                <Route path="/about" element={<Layout/>}>
+                    <Route path="location" element={<Location/>}/>
+                </Route>
             </Routes>
         </>
     );

src/components/Layout.jsx

@@ -15,14 +15,14 @@ const Layout = () => {
 
     const title = matched?.parent.label || "";
     const description = matched?.parent.description || "";
-    const url = matched?.parent.url || "/default.jpg";
+    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('${url}')`}}
+                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">

src/data/menuItems.json

@@ -2,6 +2,8 @@
     {
         "label": "사업소개",
         "href": "/business",
+        "layoutImg": "/layout/사업소개.jpg",
+        "description": "반도산전의 사업을 소개합니다.",
         "children": [
             { "label": "주요 사업", "href": "/business/sections" },
             { "label": "주요 랜드마크 시공현장", "href": "/business/landmarks" }
@@ -9,12 +11,14 @@
     },
     {
         "label": "기업소개",
-        "href": "/business",
+        "href": "/about",
+        "layoutImg": "/layout/기업소개.jpg",
+        "description": "반도산전을 소개합니다.",
         "children": [
             { "label": "CEO 인사말", "href": "/ceo" },
             { "label": "협력사", "href": "/office" },
             { "label": "연혁", "href": "/history" },
-            { "label": "찾아오시는 길", "href": "/patent" },
+            { "label": "찾아오시는 길", "href": "/about/location" },
             { "label": "조직도", "href": "/organization" },
             { "label": "갤러리", "href": "/partners" }
         ]

src/pages/about/Location.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Directions from "@/pages/main/Directions.jsx";
+
+const Location = () => {
+    return (
+        <Directions disableTitle />
+    );
+};
+
+export default Location;

src/pages/main/Directions.jsx

@@ -27,7 +27,7 @@ const tabContent = {
     },
 };
 
-const Directions = () => {
+const Directions = ({disableTitle}) => {
     const [activeTab, setActiveTab] = useState('busan');
     const mapRef = useRef(null);
     const mapInstanceRef = useRef(null);
@@ -61,11 +61,13 @@ const Directions = () => {
     }, [activeTab]);
 
     return (
-        <div className="px-[2vw] py-[4vw] space-y-[5vw]">
+        <div className="px-[2vw] pb-[4vw] space-y-[5vw]">
             <div className="max-w-7xl mx-auto">
-                <div className="space-y-2 mb-2.5 pb-10">
-                    <div className="text-4xl text-blue-900 font-bold font-['Inter']">찾아오시는 길</div>
-                </div>
+                {!disableTitle && (
+                    <div className="space-y-2">
+                        <div className="text-4xl text-blue-900 font-bold font-['Inter']">찾아오시는 길</div>
+                    </div>
+                )}
 
                 <div className="mx-30 h-40 flex text-center items-center justify-around">
                     {tabs.map((tab, idx) => (

src/pages/main/Partners.jsx

@@ -5,7 +5,7 @@ import partnerList from '@/data/partnersList.json';
 const Partners = () => {
     return (
         <div
-            className="relative w-full pt-10 pb-20 bg-cover bg-center"
+            className="relative w-full pt-10 pb-20 mb-[4vw] bg-cover bg-center"
             style={{backgroundImage: 'url(/partners-bg.jpg)'}}
         >
             <DarkOverlay/>