|
|
|
|
@ -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> |
|
|
|
|
<em className="ht-header-sub">팔네트웍스 사업장 위치 안내입니다</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 }} |
|
|
|
|
whileInView={{ opacity: 1, y: 0 }} |
|
|
|
|
viewport={{ once: true, margin: "-60px" }} |
|
|
|
|
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }} |
|
|
|
|
key={tab} |
|
|
|
|
initial={{ opacity: 0, y: 24 }} |
|
|
|
|
animate={{ opacity: 1, y: 0 }} |
|
|
|
|
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"> |
|
|
|
|
{TRANSPORT.map((t, i) => ( |
|
|
|
|
<motion.li |
|
|
|
|
<div className="location-transport-list"> |
|
|
|
|
{currentTransport.map((t, i) => ( |
|
|
|
|
<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"> |
|
|
|
|
{t.text} |
|
|
|
|
</span> |
|
|
|
|
</motion.li> |
|
|
|
|
<div className="location-transport-routes"> |
|
|
|
|
{t.items.map((item, j) => ( |
|
|
|
|
<div key={j} className="location-transport-route"> |
|
|
|
|
<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 }} |
|
|
|
|
whileInView={{ opacity: 1, y: 0 }} |
|
|
|
|
viewport={{ once: true, margin: "-60px" }} |
|
|
|
|
initial={{ opacity: 0, y: 24 }} |
|
|
|
|
animate={{ opacity: 1, y: 0 }} |
|
|
|
|
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 |
|
|
|
|
href="/contact/inquiry" |
|
|
|
|
<Link |
|
|
|
|
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> |
|
|
|
|
|
