From 686d932d1ce000a1117edd4c09cda52679712faf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?= Date: Wed, 27 May 2026 17:53:40 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=B0=BE=EC=95=84=EC=98=A4=EC=8B=9C?= =?UTF-8?q?=EB=8A=94=20=EA=B8=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/common.css | 41 ++++--- src/pages/company/LocationPage.jsx | 177 +++++++++++++++++++++++------ 2 files changed, 170 insertions(+), 48 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index e100c89..7a2f9c9 100644 --- a/src/css/common.css +++ b/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-map { width: 100%; height: 520px; border-radius: 20px; overflow: hidden; } +.location-tabs { display: flex; gap: 8px; margin-bottom: 32px; } +.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-item { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 16px; background: #fff; border: 1px solid #e8e8e8; } +.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: 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 img { width: 26px; height: 26px; object-fit: contain; } -.location-transport-item:nth-child(1) .location-transport-icon { background: #c850c0; } -.location-transport-item:nth-child(2) .location-transport-icon { background: #8b5cf6; } -.location-transport-item:nth-child(3) .location-transport-icon { background: #4158d0; } -.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-item:nth-child(1) .location-transport-badge { background: #c850c0; } -.location-transport-item:nth-child(2) .location-transport-badge { background: #8b5cf6; } -.location-transport-item:nth-child(3) .location-transport-badge { background: #4158d0; } -.location-transport-text { font-size: 13px; color: #777; line-height: 1.7; } +.location-transport-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } +.location-transport-icon img { width: 24px; height: 24px; object-fit: contain; } +.location-transport-item:nth-child(1) .location-transport-icon { background: #a855a0; } +.location-transport-item:nth-child(2) .location-transport-icon { background: #7c5cc4; } +.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: 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: #a855a0; } +.location-transport-item:nth-child(2) .location-transport-badge { background: #7c5cc4; } +.location-transport-item:nth-child(3) .location-transport-badge { background: #3d51b8; } +.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) ── */ diff --git a/src/pages/company/LocationPage.jsx b/src/pages/company/LocationPage.jsx index c365bc5..5c4823c 100644 --- a/src/pages/company/LocationPage.jsx +++ b/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 (
@@ -75,35 +165,49 @@ export default function LocationPage() { Here We Are

- - 인천광역시 서구 로봇랜드에 위치한 팔네트웍스 본사입니다 - + 팔네트웍스 사업장 위치 안내입니다 + {/* 탭 메뉴 */} +
+ + +
+
{/* 지도 + 교통편 */}