You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
504 lines
17 KiB
504 lines
17 KiB
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"; |
|
import { useLanguage } from "../../context/LanguageContext"; |
|
|
|
const COMPANY_NAV_KO = [ |
|
{ label: "회사소개", to: "/company/about" }, |
|
{ label: "인증 및 특허현황", to: "/company/cert" }, |
|
{ label: "연혁", to: "/company/history" }, |
|
{ label: "고객 및 협력사", to: "/company/partners" }, |
|
{ label: "찾아오시는 길", to: "/company/location" }, |
|
]; |
|
|
|
const COMPANY_NAV_EN = [ |
|
{ label: "About Us", to: "/company/about" }, |
|
{ label: "Certifications & Patents", to: "/company/cert" }, |
|
{ label: "History", to: "/company/history" }, |
|
{ label: "Clients & Partners", to: "/company/partners" }, |
|
{ label: "Location", to: "/company/location" }, |
|
]; |
|
|
|
const INFO_KO = [ |
|
{ |
|
label: "주소", |
|
value: "인천광역시 서해구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호", |
|
}, |
|
{ label: "전화", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
{ label: "팩스", value: "032-727-5908" }, |
|
{ |
|
label: "이메일", |
|
value: "help@palnet.co.kr", |
|
href: "mailto:help@palnet.co.kr", |
|
}, |
|
]; |
|
|
|
const INFO_EN = [ |
|
{ |
|
label: "Address", |
|
value: "14F, 1401-2, Robot Land\n155-11 Robot Land-ro, Seo-gu, Incheon", |
|
}, |
|
{ label: "Phone", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
{ label: "Fax", value: "032-727-5908" }, |
|
{ |
|
label: "Email", |
|
value: "help@palnet.co.kr", |
|
href: "mailto:help@palnet.co.kr", |
|
}, |
|
]; |
|
|
|
const INFO_MAGOK_KO = [ |
|
{ |
|
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 INFO_MAGOK_EN = [ |
|
{ |
|
label: "Address", |
|
value: |
|
"Seoul Magok District Centennia Building\n219 Gonghangdae-ro, Gangseo-gu, Seoul", |
|
}, |
|
{ label: "Phone", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
{ |
|
label: "Email", |
|
value: "help@palnet.co.kr", |
|
href: "mailto:help@palnet.co.kr", |
|
}, |
|
]; |
|
|
|
const TRANSPORT_INCHEON_KO = [ |
|
{ |
|
badge: "대중교통", |
|
icon: "/images/subway.png", |
|
items: [ |
|
{ |
|
title: "공항철도 청라국제도시역", |
|
desc: "청라국제도시역 → 간선 2-1번 버스 승차 → 청라백세요양병원 정류장 하차 → 도보 10분 이동 → 로봇타워", |
|
}, |
|
{ |
|
title: "공항철도/인천2호선 검암역", |
|
desc: "검암역 → 간선 70번 버스 승차 → 청라로봇랜드 정류장 하차 → 로봇타워", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "셔틀버스", |
|
icon: "/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: "/images/car.png", |
|
items: [ |
|
{ |
|
title: "서울 출발", |
|
desc: "서울외곽순환고속도로(43.5㎞) → 인천국제공항고속도로(9.4㎞) → 청중로(4.3㎞) → 로봇랜드로 639m → 인천로봇랜드 로봇타워", |
|
}, |
|
{ |
|
title: "인천 출발", |
|
desc: "경인고속도로(10.3㎞) → 서곶로(0.7㎞) → 봉오대로(2.4㎞) → 서해교차로에서 경인항 방면 우회전 → 로봇랜드로 346m → 인천로봇랜드 로봇타워", |
|
}, |
|
], |
|
}, |
|
]; |
|
|
|
const TRANSPORT_INCHEON_EN = [ |
|
{ |
|
badge: "Public Transit", |
|
icon: "/images/subway.png", |
|
items: [ |
|
{ |
|
title: "Cheongna Int'l City Station (Airport Railroad)", |
|
desc: "Cheongna Int'l City Stn \u2192 Take Trunk Bus 2-1 \u2192 Get off at Cheongna Baekse Nursing Hospital stop \u2192 10-min walk \u2192 Robot Tower", |
|
}, |
|
{ |
|
title: "Geomam Station (Airport Railroad / Incheon Line 2)", |
|
desc: "Geomam Stn \u2192 Take Trunk Bus 70 \u2192 Get off at Cheongna Robot Land stop \u2192 Robot Tower", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "Shuttle Bus", |
|
icon: "/images/bus.png", |
|
items: [ |
|
{ |
|
title: "Departs from Cheongna Int'l City Station", |
|
desc: "Cheongna Stn Exit 1 \u2192 Robot Tower \u2192 Gajeong Stn Exit 4\nDeparture: 7:40 / 8:10 / 8:40 / 9:10 / 9:40", |
|
}, |
|
{ |
|
title: "Departs from Gajeong Station A (Exit 4)", |
|
desc: "Departure: 7:00 / 7:40 / 8:30 / 9:30", |
|
}, |
|
{ |
|
title: "Departs from Gajeong Station B (via Cheongna Complex)", |
|
desc: "Departure: 7:20 / 8:20 / 9:20 / 9:30", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "By Car", |
|
icon: "/images/car.png", |
|
items: [ |
|
{ |
|
title: "From Seoul", |
|
desc: "Seoul Ring Expressway (43.5km) \u2192 Incheon Int'l Airport Expwy (9.4km) \u2192 Cheongjung-ro (4.3km) \u2192 Robot Land-ro 639m \u2192 Incheon Robot Land Robot Tower", |
|
}, |
|
{ |
|
title: "From Incheon", |
|
desc: "Gyeongin Expwy (10.3km) \u2192 Seogot-ro (0.7km) \u2192 Bongodae-ro (2.4km) \u2192 Turn right toward Gyeongin Port at Seohae Intersection \u2192 Robot Land-ro 346m \u2192 Incheon Robot Land Robot Tower", |
|
}, |
|
], |
|
}, |
|
]; |
|
|
|
const TRANSPORT_MAGOK_KO = [ |
|
{ |
|
badge: "지하철", |
|
icon: "/images/subway.png", |
|
items: [ |
|
{ |
|
title: "5호선 마곡역", |
|
desc: "9번 출구 → 도보 약 5분 (공항대로 방향 직진, 서울마곡지구센테니아빌딩 도착)", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "버스", |
|
icon: "/images/bus.png", |
|
items: [ |
|
{ |
|
title: "마곡역 정류장 하차", |
|
desc: "간선버스 601, 605, 654 이용 → 도보 약 5분 이동", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "자가용", |
|
icon: "/images/car.png", |
|
items: [ |
|
{ |
|
title: "강남 출발", |
|
desc: "올림픽대로 → 방화대교 → 공항대로 진입 → 마곡역 사거리에서 좌회전 → 공항대로 219 도착 (약 40분 소요)", |
|
}, |
|
{ |
|
title: "인천 출발", |
|
desc: "경인고속도로 → 가양대교 → 공항대로 진입 → 마곡역 사거리에서 우회전 → 공항대로 219 도착 (약 50분 소요)", |
|
}, |
|
], |
|
}, |
|
]; |
|
|
|
const TRANSPORT_MAGOK_EN = [ |
|
{ |
|
badge: "Subway", |
|
icon: "/images/subway.png", |
|
items: [ |
|
{ |
|
title: "Magok Station (Line 5)", |
|
desc: "Exit 9 \u2192 About 5-min walk (straight toward Gonghangdae-ro, arrive at Seoul Magok District Centennia Building)", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "Bus", |
|
icon: "/images/bus.png", |
|
items: [ |
|
{ |
|
title: "Get off at Magok Station stop", |
|
desc: "Take Trunk Bus 601, 605, or 654 \u2192 About 5-min walk", |
|
}, |
|
], |
|
}, |
|
{ |
|
badge: "By Car", |
|
icon: "/images/car.png", |
|
items: [ |
|
{ |
|
title: "From Gangnam", |
|
desc: "Olympic-daero \u2192 Banghwa Bridge \u2192 Enter Gonghangdae-ro \u2192 Turn left at Magok Stn intersection \u2192 Arrive at 219 Gonghangdae-ro (approx. 40 min)", |
|
}, |
|
{ |
|
title: "From Incheon", |
|
desc: "Gyeongin Expwy \u2192 Gayang Bridge \u2192 Enter Gonghangdae-ro \u2192 Turn right at Magok Stn intersection \u2192 Arrive at 219 Gonghangdae-ro (approx. 50 min)", |
|
}, |
|
], |
|
}, |
|
]; |
|
|
|
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"; |
|
|
|
const PAGE_TEXT = { |
|
ko: { |
|
heroSub: |
|
"고객 여러분의 방문을 위해 팔네트웍스의 위치 정보를 안내해드립니다.", |
|
tabIncheon: "인천 본사", |
|
tabMagok: "마곡 지점", |
|
companyInfoLabel: "회사 정보", |
|
hoursLabel: "운영 시간", |
|
hoursText: ( |
|
<> |
|
평일 09:00 – 18:00 |
|
<br /> |
|
<span className="location-hours-text">토·일·공휴일 휴무</span> |
|
</> |
|
), |
|
inquiryBtn: "문의하기", |
|
transportTitle: "교통편 안내", |
|
mapTitle: "팔네트웍스 위치", |
|
}, |
|
en: { |
|
heroSub: "For your visit, here is PAL Networks' location information.", |
|
tabIncheon: "Incheon HQ", |
|
tabMagok: "Magok Branch", |
|
companyInfoLabel: "Company Information", |
|
hoursLabel: "Business Hours", |
|
hoursText: ( |
|
<> |
|
Weekdays 09:00 – 18:00 |
|
<br /> |
|
<span className="location-hours-text"> |
|
Closed on weekends & holidays |
|
</span> |
|
</> |
|
), |
|
inquiryBtn: "Inquiry", |
|
transportTitle: "Directions", |
|
mapTitle: "PAL Networks Location", |
|
}, |
|
}; |
|
|
|
export default function LocationPage() { |
|
const { lang, withLang } = useLanguage(); |
|
const COMPANY_NAV = lang === "en" ? COMPANY_NAV_EN : COMPANY_NAV_KO; |
|
const INFO = lang === "en" ? INFO_EN : INFO_KO; |
|
const INFO_MAGOK = lang === "en" ? INFO_MAGOK_EN : INFO_MAGOK_KO; |
|
const TRANSPORT_INCHEON = |
|
lang === "en" ? TRANSPORT_INCHEON_EN : TRANSPORT_INCHEON_KO; |
|
const TRANSPORT_MAGOK = |
|
lang === "en" ? TRANSPORT_MAGOK_EN : TRANSPORT_MAGOK_KO; |
|
const t = PAGE_TEXT[lang]; |
|
|
|
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}> |
|
<SubHero |
|
label="Company" |
|
title={ |
|
<> |
|
<em>Location</em> |
|
</> |
|
} |
|
navItems={COMPANY_NAV} |
|
/> |
|
|
|
<div className="sub-content"> |
|
<div className="inner-wrap"> |
|
<motion.div |
|
className="ht-header" |
|
initial={{ opacity: 0, y: 32 }} |
|
whileInView={{ opacity: 1, y: 0 }} |
|
viewport={{ once: true, margin: "-80px" }} |
|
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }} |
|
> |
|
<p className="ht-header-title"> |
|
Find Us, |
|
<br /> |
|
<em> |
|
<span>Here</span> <b>We Are</b> |
|
</em> |
|
</p> |
|
<em className="ht-header-sub">{t.heroSub}</em> |
|
</motion.div> |
|
|
|
<div className="location-tabs"> |
|
<button |
|
className={`location-tab ${isIncheon ? "active" : ""}`} |
|
onClick={() => setTab("incheon")} |
|
> |
|
{t.tabIncheon} |
|
</button> |
|
<button |
|
className={`location-tab ${!isIncheon ? "active" : ""}`} |
|
onClick={() => setTab("magok")} |
|
> |
|
{t.tabMagok} |
|
</button> |
|
</div> |
|
|
|
<section className="sub-section"> |
|
<div className="location-wrap"> |
|
{/* 지도 */} |
|
<motion.div |
|
className="location-map-wrap" |
|
key={tab + "-map"} |
|
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={currentMap} |
|
allowFullScreen |
|
loading="lazy" |
|
referrerPolicy="no-referrer-when-downgrade" |
|
title={t.mapTitle} |
|
/> |
|
</div> |
|
</motion.div> |
|
|
|
{/* 회사 정보 */} |
|
<motion.div |
|
className="location-info-wrapper" |
|
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], |
|
delay: 0.15, |
|
}} |
|
> |
|
<p className="location-info-section-title"> |
|
{t.companyInfoLabel} |
|
</p> |
|
<motion.div |
|
key={tab + "-info"} |
|
className="location-info-card" |
|
initial={{ opacity: 0, y: 24 }} |
|
animate={{ opacity: 1, y: 0 }} |
|
transition={{ |
|
duration: 0.4, |
|
ease: [0.4, 0, 0.2, 1], |
|
delay: 0.1, |
|
}} |
|
> |
|
<h3>{isIncheon ? t.tabIncheon : t.tabMagok}</h3> |
|
<ul className="location-info-list"> |
|
{currentInfo.map((item) => ( |
|
<li key={item.label} className="location-info-item"> |
|
<span className="location-info-label"> |
|
{item.label} |
|
</span> |
|
{item.href ? ( |
|
<a className="location-info-value" href={item.href}> |
|
{item.value} |
|
</a> |
|
) : ( |
|
<p |
|
className="location-info-value" |
|
style={{ margin: 0, whiteSpace: "pre-line" }} |
|
> |
|
{item.value} |
|
</p> |
|
)} |
|
</li> |
|
))} |
|
</ul> |
|
<div className="location-hours"> |
|
<p className="location-hours-eyebrow">{t.hoursLabel}</p> |
|
<p className="location-hours-label">{t.hoursText}</p> |
|
</div> |
|
<Link |
|
to={withLang("/contact/inquiry")} |
|
className="location-inquiry-btn" |
|
onMouseEnter={(e) => |
|
(e.currentTarget.style.opacity = ".85") |
|
} |
|
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")} |
|
> |
|
{t.inquiryBtn} |
|
</Link> |
|
</motion.div> |
|
</motion.div> |
|
|
|
{/* 교통편 */} |
|
<motion.div |
|
className="location-transport-wrap" |
|
key={tab + "-transport"} |
|
initial={{ opacity: 0, y: 24 }} |
|
animate={{ opacity: 1, y: 0 }} |
|
transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }} |
|
> |
|
<div className="location-transport"> |
|
<h3 className="location-transport-title"> |
|
{t.transportTitle} |
|
</h3> |
|
<div className="location-transport-list"> |
|
{currentTransport.map((item, i) => ( |
|
<motion.div |
|
key={item.badge} |
|
className="location-transport-item" |
|
initial={{ opacity: 0, y: 24 }} |
|
whileInView={{ opacity: 1, y: 0 }} |
|
viewport={{ once: true }} |
|
transition={{ |
|
duration: 0.5, |
|
ease: [0.4, 0, 0.2, 1], |
|
delay: i * 0.1, |
|
}} |
|
> |
|
<div className="location-transport-item-top"> |
|
<div className="location-transport-icon"> |
|
<img src={item.icon} alt={item.badge} /> |
|
</div> |
|
<span className="location-transport-badge"> |
|
{item.badge} |
|
</span> |
|
</div> |
|
<div className="location-transport-routes"> |
|
{item.items.map((route, j) => ( |
|
<div key={j} className="location-transport-route"> |
|
<p className="location-transport-route-title"> |
|
{route.title} |
|
</p> |
|
<p className="location-transport-route-desc"> |
|
{route.desc} |
|
</p> |
|
</div> |
|
))} |
|
</div> |
|
</motion.div> |
|
))} |
|
</div> |
|
</div> |
|
</motion.div> |
|
</div> |
|
</section> |
|
</div> |
|
</div> |
|
</article> |
|
); |
|
}
|
|
|