feat : 찾아오시는 길 수정

src/css/common.css

@@ -161,10 +161,14 @@ body{overflow-x:hidden;}
 }
 
 /* ── Location Page ── */
-.location-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 4rem; align-items: start; }
+.location-tabs { display: flex; gap: 8px; margin-bottom: 32px; }
-.location-map { width: 100%; height: 520px; border-radius: 20px; overflow: hidden; }
+.location-tab { padding: 10px 24px; border-radius: 100px; border: 1px solid #e8e8e8; background: #fff; font-size: 14px; font-weight: 600; color: #999; cursor: pointer; transition: all 0.2s ease; }
+.location-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
+.location-tab:hover:not(.active) { border-color: #ccc; color: #333; }
+.location-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; }
+.location-map { width: 100%; height: 480px; border-radius: 20px; overflow: hidden; }
 .location-map iframe { width: 100%; height: 100%; border: none; display: block; }
-.location-info-card { display: flex; flex-direction: column; top: 100px; }
+.location-info-card { display: flex; flex-direction: column }
 .location-info-card h3 { font-size: 12px; font-weight: 700; color: #bbb; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 32px; }
 .location-info-list { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 24px; }
 .location-info-item { display: flex; flex-direction: column; gap: 4px; }
@@ -175,22 +179,26 @@ body{overflow-x:hidden;}
 .location-hours-label { margin: 0; font-size: 15px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.6; }
 .location-hours-text { font-size: 13px; font-weight: 400; color: #bbb; }
 .location-inquiry-btn { display: flex; align-items: center; justify-content: center; height: 50px; background: var(--color-primary); border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -.01em; transition: opacity .2s; }
-.location-transport { padding-top: 40px; padding-bottom: 6rem; }
+.location-transport { padding-top: 32px; padding-bottom: 6rem; }
 .location-transport-title { font-size: 16px; font-weight: 700; color: #111; letter-spacing: -0.03em; margin: 0 0 20px; }
-.location-transport-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+.location-transport-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
-.location-transport-item { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 16px; background: #fff; border: 1px solid #e8e8e8; }
+.location-transport-item { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; border-radius: 16px; background: #fff; border: 1px solid #e8e8e8; }
 .location-transport-item-top { display: flex; align-items: center; justify-content: space-between; }
-.location-transport-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+.location-transport-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
-.location-transport-icon img { width: 26px; height: 26px; object-fit: contain; }
+.location-transport-icon img { width: 24px; height: 24px; object-fit: contain; }
-.location-transport-item:nth-child(1) .location-transport-icon { background: #c850c0; }
+.location-transport-item:nth-child(1) .location-transport-icon { background: #a855a0; }
-.location-transport-item:nth-child(2) .location-transport-icon { background: #8b5cf6; }
+.location-transport-item:nth-child(2) .location-transport-icon { background: #7c5cc4; }
-.location-transport-item:nth-child(3) .location-transport-icon { background: #4158d0; }
+.location-transport-item:nth-child(3) .location-transport-icon { background: #3d51b8; }
-.location-transport-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #fff; }
+.location-transport-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #fff; }
-.location-transport-item:nth-child(1) .location-transport-badge { background: #c850c0; }
+.location-transport-item:nth-child(1) .location-transport-badge { background: #a855a0; }
-.location-transport-item:nth-child(2) .location-transport-badge { background: #8b5cf6; }
+.location-transport-item:nth-child(2) .location-transport-badge { background: #7c5cc4; }
-.location-transport-item:nth-child(3) .location-transport-badge { background: #4158d0; }
+.location-transport-item:nth-child(3) .location-transport-badge { background: #3d51b8; }
-.location-transport-text { font-size: 13px; color: #777; line-height: 1.7; }
+.location-transport-routes { display: flex; flex-direction: column; gap: 10px; }
+.location-transport-route { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid #f0f0f0; }
+.location-transport-route-title { font-size: 12px; font-weight: 700; color: #333; margin: 0; }
+.location-transport-route-desc { font-size: 12px; color: #888; line-height: 1.6; margin: 0; white-space: pre-line; }
 @media (max-width: 768px) {
+.location-tabs { margin-bottom: 24px; }
 .location-wrap { grid-template-columns: 1fr; gap: 2rem; }
 .location-map { height: 260px; }
 .location-info-card { position: static; }
@@ -199,6 +207,7 @@ body{overflow-x:hidden;}
 }
 
 
+
 /*연혁*/
 
 /* ── Inner Wrap (공통 max-width) ── */

src/pages/company/LocationPage.jsx

@@ -1,6 +1,8 @@
 import SubHero from "../../components/SubHero";
 import useFadeIn from "../../hooks/useFadeIn";
 import { motion } from "framer-motion";
+import { useState } from "react";
+import { Link } from "react-router-dom";
 
 const COMPANY_NAV = [
   { label: "회사소개", to: "/company/about" },
@@ -23,29 +25,117 @@ const INFO = [
   },
 ];
 
-const TRANSPORT = [
+const INFO_MAGOK = [
+  {
+    label: "주소",
+    value: "서울특별시 강서구 공항대로 219\n서울마곡지구센테니아빌딩",
+  },
+  { label: "전화", value: "032-727-5909", href: "tel:032-727-5909" },
+  {
+    label: "이메일",
+    value: "help@palnet.co.kr",
+    href: "mailto:help@palnet.co.kr",
+  },
+];
+
+const TRANSPORT_INCHEON = [
+  {
+    badge: "대중교통",
+    icon: "/PALNetworks/images/subway.png",
+    items: [
+      {
+        title: "공항철도 청라국제도시역",
+        desc: "청라국제도시역 → 간선 2-1번 버스 승차 → 청라백세요양병원 정류장 하차 → 도보 10분 이동 → 로봇타워",
+      },
+      {
+        title: "공항철도/인천2호선 검암역",
+        desc: "검암역 → 간선 70번 버스 승차 → 청라로봇랜드 정류장 하차 → 로봇타워",
+      },
+    ],
+  },
+  {
+    badge: "셔틀버스",
+    icon: "/PALNetworks/images/bus.png",
+    items: [
+      {
+        title: "청라국제도시역 출발",
+        desc: "청라역 1번출구 앞 → 로봇타워 앞 → 가정역 4번출구\n출발: 7:40 / 8:10 / 8:40 / 9:10 / 9:40",
+      },
+      {
+        title: "가정역A 출발 (4번출구)",
+        desc: "출발: 7:00 / 7:40 / 8:30 / 9:30",
+      },
+      {
+        title: "가정역B 출발 (청라단지 경유)",
+        desc: "출발: 7:20 / 8:20 / 9:20 / 9:30",
+      },
+    ],
+  },
+  {
+    badge: "자가용",
+    icon: "/PALNetworks/images/car.png",
+    items: [
+      {
+        title: "서울 출발",
+        desc: "서울외곽순환고속도로(43.5㎞) → 인천국제공항고속도로(9.4㎞) → 청중로(4.3㎞) → 로봇랜드로 639m → 인천로봇랜드 로봇타워",
+      },
+      {
+        title: "인천 출발",
+        desc: "경인고속도로(10.3㎞) → 서곶로(0.7㎞) → 봉오대로(2.4㎞) → 서해교차로에서 경인항 방면 우회전 → 로봇랜드로 346m → 인천로봇랜드 로봇타워",
+      },
+    ],
+  },
+];
+const TRANSPORT_MAGOK = [
   {
     badge: "지하철",
-    text: "인천 1호선 검암역 하차 → 도보 약 15분 또는 택시 5분 (로봇랜드 방면)",
     icon: "/PALNetworks/images/subway.png",
+    items: [
+      {
+        title: "5호선 마곡역",
+        desc: "9번 출구 → 도보 약 5분 (공항대로 방향 직진, 서울마곡지구센테니아빌딩 도착)",
+      },
+    ],
   },
   {
     badge: "버스",
-    text: "검암역 환승센터에서 서구 방면 버스 탑승 → 로봇랜드 하차",
     icon: "/PALNetworks/images/bus.png",
+    items: [
+      {
+        title: "마곡역 정류장 하차",
+        desc: "간선버스 601, 605, 654 이용 → 도보 약 5분 이동",
+      },
+    ],
   },
   {
     badge: "자가용",
-    text: "제2경인고속도로 검단IC 진출 → 로봇랜드로 방면 직진 약 5분",
     icon: "/PALNetworks/images/car.png",
+    items: [
+      {
+        title: "강남 출발",
+        desc: "올림픽대로 → 방화대교 → 공항대로 진입 → 마곡역 사거리에서 좌회전 → 공항대로 219 도착 (약 40분 소요)",
+      },
+      {
+        title: "인천 출발",
+        desc: "경인고속도로 → 가양대교 → 공항대로 진입 → 마곡역 사거리에서 우회전 → 공항대로 219 도착 (약 50분 소요)",
+      },
+    ],
   },
 ];
 
-const MAP_SRC =
+const MAP_INCHEON =
   "https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3164.5077769134846!2d126.60837056230932!3d37.51952592193411!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z7J247LKcIOuhnOu0h-uenOuTnA!5e0!3m2!1sko!2skr!4v1779870074094!5m2!1sko!2skr";
+const MAP_MAGOK =
+  "https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3162.80690228454!2d126.82939801231092!3d37.559612971923826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z7IS87YWM64uI7JWE!5e0!3m2!1sko!2skr!4v1779871233362!5m2!1sko!2skr";
 
 export default function LocationPage() {
   const ref = useFadeIn();
+  const [tab, setTab] = useState("incheon");
+
+  const isIncheon = tab === "incheon";
+  const currentInfo = isIncheon ? INFO : INFO_MAGOK;
+  const currentTransport = isIncheon ? TRANSPORT_INCHEON : TRANSPORT_MAGOK;
+  const currentMap = isIncheon ? MAP_INCHEON : MAP_MAGOK;
 
   return (
     <article ref={ref}>
@@ -75,35 +165,49 @@ export default function LocationPage() {
                 <span>Here</span> <b>We Are</b>
               </em>
             </p>
-            <em className="ht-header-sub">
+            <em className="ht-header-sub">팔네트웍스 사업장 위치 안내입니다</em>
-              인천광역시 서구 로봇랜드에 위치한 팔네트웍스 본사입니다
-            </em>
           </motion.div>
 
+          {/* 탭 메뉴 */}
+          <div className="location-tabs">
+            <button
+              className={`location-tab ${isIncheon ? "active" : ""}`}
+              onClick={() => setTab("incheon")}
+            >
+              인천 본사
+            </button>
+            <button
+              className={`location-tab ${!isIncheon ? "active" : ""}`}
+              onClick={() => setTab("magok")}
+            >
+              마곡 지점
+            </button>
+          </div>
+
           <section className="sub-section">
             <div className="location-wrap">
               {/* 지도 + 교통편 */}
               <motion.div
-                initial={{ opacity: 0, y: 40 }}
+                key={tab}
-                whileInView={{ opacity: 1, y: 0 }}
+                initial={{ opacity: 0, y: 24 }}
-                viewport={{ once: true, margin: "-60px" }}
+                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
+                transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
               >
                 <div className="location-map">
                   <iframe
-                    src={MAP_SRC}
+                    src={currentMap}
                     allowFullScreen
                     loading="lazy"
                     referrerPolicy="no-referrer-when-downgrade"
-                    title="팔네트웍스 본사 위치"
+                    title="팔네트웍스 위치"
                   />
                 </div>
 
                 <div className="location-transport">
                   <h3 className="location-transport-title">교통편 안내</h3>
-                  <ul className="location-transport-list">
+                  <div className="location-transport-list">
-                    {TRANSPORT.map((t, i) => (
+                    {currentTransport.map((t, i) => (
-                      <motion.li
+                      <motion.div
                         key={t.badge}
                         className="location-transport-item"
                         initial={{ opacity: 0, y: 24 }}
@@ -123,30 +227,39 @@ export default function LocationPage() {
                             {t.badge}
                           </span>
                         </div>
-                        <span className="location-transport-text">
+                        <div className="location-transport-routes">
-                          {t.text}
+                          {t.items.map((item, j) => (
-                        </span>
+                            <div key={j} className="location-transport-route">
-                      </motion.li>
+                              <p className="location-transport-route-title">
+                                {item.title}
+                              </p>
+                              <p className="location-transport-route-desc">
+                                {item.desc}
+                              </p>
+                            </div>
+                          ))}
+                        </div>
+                      </motion.div>
                     ))}
-                  </ul>
+                  </div>
                 </div>
               </motion.div>
 
               {/* 연락처 카드 */}
               <motion.div
+                key={tab + "-info"}
                 className="location-info-card"
-                initial={{ opacity: 0, y: 40 }}
+                initial={{ opacity: 0, y: 24 }}
-                whileInView={{ opacity: 1, y: 0 }}
+                animate={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: "-60px" }}
                 transition={{
-                  duration: 0.6,
+                  duration: 0.4,
                   ease: [0.4, 0, 0.2, 1],
-                  delay: 0.15,
+                  delay: 0.1,
                 }}
               >
-                <h3>(주) PALNETWORKS</h3>
+                <h3>{isIncheon ? "인천 본사" : "마곡 지점"}</h3>
                 <ul className="location-info-list">
-                  {INFO.map((item) => (
+                  {currentInfo.map((item) => (
                     <li key={item.label} className="location-info-item">
                       <span className="location-info-label">{item.label}</span>
                       {item.href ? (
@@ -174,14 +287,14 @@ export default function LocationPage() {
                     </span>
                   </p>
                 </div>
-                <a
+                <Link
-                  href="/contact/inquiry"
+                  to="/contact/inquiry"
                   className="location-inquiry-btn"
                   onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
                   onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
                 >
                   문의하기
-                </a>
+                </Link>
               </motion.div>
             </div>
           </section>