|
|
|
@ -24,7 +24,7 @@ const COMPANY_NAV_EN = [ |
|
|
|
const INFO_KO = [ |
|
|
|
const INFO_KO = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "주소", |
|
|
|
label: "주소", |
|
|
|
value: "인천광역시 서구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호", |
|
|
|
value: "인천광역시 서해구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ label: "전화", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
|
|
{ label: "전화", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
|
|
{ label: "팩스", value: "032-727-5908" }, |
|
|
|
{ label: "팩스", value: "032-727-5908" }, |
|
|
|
@ -65,7 +65,8 @@ const INFO_MAGOK_KO = [ |
|
|
|
const INFO_MAGOK_EN = [ |
|
|
|
const INFO_MAGOK_EN = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
label: "Address", |
|
|
|
label: "Address", |
|
|
|
value: "Seoul Magok District Centennia Building\n219 Gonghangdae-ro, Gangseo-gu, Seoul", |
|
|
|
value: |
|
|
|
|
|
|
|
"Seoul Magok District Centennia Building\n219 Gonghangdae-ro, Gangseo-gu, Seoul", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ label: "Phone", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
|
|
{ label: "Phone", value: "032-727-5909", href: "tel:032-727-5909" }, |
|
|
|
{ |
|
|
|
{ |
|
|
|
@ -247,12 +248,15 @@ const TRANSPORT_MAGOK_EN = [ |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
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_INCHEON = |
|
|
|
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"; |
|
|
|
"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 = { |
|
|
|
const PAGE_TEXT = { |
|
|
|
ko: { |
|
|
|
ko: { |
|
|
|
heroSub: "고객 여러분의 방문을 위해 팔네트웍스의 위치 정보를 안내해드립니다.", |
|
|
|
heroSub: |
|
|
|
|
|
|
|
"고객 여러분의 방문을 위해 팔네트웍스의 위치 정보를 안내해드립니다.", |
|
|
|
tabIncheon: "인천 본사", |
|
|
|
tabIncheon: "인천 본사", |
|
|
|
tabMagok: "마곡 지점", |
|
|
|
tabMagok: "마곡 지점", |
|
|
|
companyInfoLabel: "회사 정보", |
|
|
|
companyInfoLabel: "회사 정보", |
|
|
|
@ -278,7 +282,9 @@ const PAGE_TEXT = { |
|
|
|
<> |
|
|
|
<> |
|
|
|
Weekdays 09:00 – 18:00 |
|
|
|
Weekdays 09:00 – 18:00 |
|
|
|
<br /> |
|
|
|
<br /> |
|
|
|
<span className="location-hours-text">Closed on weekends & holidays</span> |
|
|
|
<span className="location-hours-text"> |
|
|
|
|
|
|
|
Closed on weekends & holidays |
|
|
|
|
|
|
|
</span> |
|
|
|
</> |
|
|
|
</> |
|
|
|
), |
|
|
|
), |
|
|
|
inquiryBtn: "Inquiry", |
|
|
|
inquiryBtn: "Inquiry", |
|
|
|
@ -292,8 +298,10 @@ export default function LocationPage() { |
|
|
|
const COMPANY_NAV = lang === "en" ? COMPANY_NAV_EN : COMPANY_NAV_KO; |
|
|
|
const COMPANY_NAV = lang === "en" ? COMPANY_NAV_EN : COMPANY_NAV_KO; |
|
|
|
const INFO = lang === "en" ? INFO_EN : INFO_KO; |
|
|
|
const INFO = lang === "en" ? INFO_EN : INFO_KO; |
|
|
|
const INFO_MAGOK = lang === "en" ? INFO_MAGOK_EN : INFO_MAGOK_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_INCHEON = |
|
|
|
const TRANSPORT_MAGOK = lang === "en" ? TRANSPORT_MAGOK_EN : TRANSPORT_MAGOK_KO; |
|
|
|
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 t = PAGE_TEXT[lang]; |
|
|
|
|
|
|
|
|
|
|
|
const ref = useFadeIn(); |
|
|
|
const ref = useFadeIn(); |
|
|
|
@ -318,7 +326,13 @@ export default function LocationPage() { |
|
|
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
<div className="sub-content"> |
|
|
|
<div className="inner-wrap"> |
|
|
|
<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] }}> |
|
|
|
<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"> |
|
|
|
<p className="ht-header-title"> |
|
|
|
Find Us, |
|
|
|
Find Us, |
|
|
|
<br /> |
|
|
|
<br /> |
|
|
|
@ -330,10 +344,16 @@ export default function LocationPage() { |
|
|
|
</motion.div> |
|
|
|
</motion.div> |
|
|
|
|
|
|
|
|
|
|
|
<div className="location-tabs"> |
|
|
|
<div className="location-tabs"> |
|
|
|
<button className={`location-tab ${isIncheon ? "active" : ""}`} onClick={() => setTab("incheon")}> |
|
|
|
<button |
|
|
|
|
|
|
|
className={`location-tab ${isIncheon ? "active" : ""}`} |
|
|
|
|
|
|
|
onClick={() => setTab("incheon")} |
|
|
|
|
|
|
|
> |
|
|
|
{t.tabIncheon} |
|
|
|
{t.tabIncheon} |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
<button className={`location-tab ${!isIncheon ? "active" : ""}`} onClick={() => setTab("magok")}> |
|
|
|
<button |
|
|
|
|
|
|
|
className={`location-tab ${!isIncheon ? "active" : ""}`} |
|
|
|
|
|
|
|
onClick={() => setTab("magok")} |
|
|
|
|
|
|
|
> |
|
|
|
{t.tabMagok} |
|
|
|
{t.tabMagok} |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -341,9 +361,21 @@ export default function LocationPage() { |
|
|
|
<section className="sub-section"> |
|
|
|
<section className="sub-section"> |
|
|
|
<div className="location-wrap"> |
|
|
|
<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] }}> |
|
|
|
<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"> |
|
|
|
<div className="location-map"> |
|
|
|
<iframe src={currentMap} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade" title={t.mapTitle} /> |
|
|
|
<iframe |
|
|
|
|
|
|
|
src={currentMap} |
|
|
|
|
|
|
|
allowFullScreen |
|
|
|
|
|
|
|
loading="lazy" |
|
|
|
|
|
|
|
referrerPolicy="no-referrer-when-downgrade" |
|
|
|
|
|
|
|
title={t.mapTitle} |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</motion.div> |
|
|
|
</motion.div> |
|
|
|
|
|
|
|
|
|
|
|
@ -359,7 +391,9 @@ export default function LocationPage() { |
|
|
|
delay: 0.15, |
|
|
|
delay: 0.15, |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
<p className="location-info-section-title">{t.companyInfoLabel}</p> |
|
|
|
<p className="location-info-section-title"> |
|
|
|
|
|
|
|
{t.companyInfoLabel} |
|
|
|
|
|
|
|
</p> |
|
|
|
<motion.div |
|
|
|
<motion.div |
|
|
|
key={tab + "-info"} |
|
|
|
key={tab + "-info"} |
|
|
|
className="location-info-card" |
|
|
|
className="location-info-card" |
|
|
|
@ -375,13 +409,18 @@ export default function LocationPage() { |
|
|
|
<ul className="location-info-list"> |
|
|
|
<ul className="location-info-list"> |
|
|
|
{currentInfo.map((item) => ( |
|
|
|
{currentInfo.map((item) => ( |
|
|
|
<li key={item.label} className="location-info-item"> |
|
|
|
<li key={item.label} className="location-info-item"> |
|
|
|
<span className="location-info-label">{item.label}</span> |
|
|
|
<span className="location-info-label"> |
|
|
|
|
|
|
|
{item.label} |
|
|
|
|
|
|
|
</span> |
|
|
|
{item.href ? ( |
|
|
|
{item.href ? ( |
|
|
|
<a className="location-info-value" href={item.href}> |
|
|
|
<a className="location-info-value" href={item.href}> |
|
|
|
{item.value} |
|
|
|
{item.value} |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<p className="location-info-value" style={{ margin: 0, whiteSpace: "pre-line" }}> |
|
|
|
<p |
|
|
|
|
|
|
|
className="location-info-value" |
|
|
|
|
|
|
|
style={{ margin: 0, whiteSpace: "pre-line" }} |
|
|
|
|
|
|
|
> |
|
|
|
{item.value} |
|
|
|
{item.value} |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
)} |
|
|
|
)} |
|
|
|
@ -392,16 +431,31 @@ export default function LocationPage() { |
|
|
|
<p className="location-hours-eyebrow">{t.hoursLabel}</p> |
|
|
|
<p className="location-hours-eyebrow">{t.hoursLabel}</p> |
|
|
|
<p className="location-hours-label">{t.hoursText}</p> |
|
|
|
<p className="location-hours-label">{t.hoursText}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Link to={withLang("/contact/inquiry")} className="location-inquiry-btn" onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")} onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}> |
|
|
|
<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} |
|
|
|
{t.inquiryBtn} |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
</motion.div> |
|
|
|
</motion.div> |
|
|
|
</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] }}> |
|
|
|
<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"> |
|
|
|
<div className="location-transport"> |
|
|
|
<h3 className="location-transport-title">{t.transportTitle}</h3> |
|
|
|
<h3 className="location-transport-title"> |
|
|
|
|
|
|
|
{t.transportTitle} |
|
|
|
|
|
|
|
</h3> |
|
|
|
<div className="location-transport-list"> |
|
|
|
<div className="location-transport-list"> |
|
|
|
{currentTransport.map((item, i) => ( |
|
|
|
{currentTransport.map((item, i) => ( |
|
|
|
<motion.div |
|
|
|
<motion.div |
|
|
|
@ -420,13 +474,19 @@ export default function LocationPage() { |
|
|
|
<div className="location-transport-icon"> |
|
|
|
<div className="location-transport-icon"> |
|
|
|
<img src={item.icon} alt={item.badge} /> |
|
|
|
<img src={item.icon} alt={item.badge} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span className="location-transport-badge">{item.badge}</span> |
|
|
|
<span className="location-transport-badge"> |
|
|
|
|
|
|
|
{item.badge} |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="location-transport-routes"> |
|
|
|
<div className="location-transport-routes"> |
|
|
|
{item.items.map((route, j) => ( |
|
|
|
{item.items.map((route, j) => ( |
|
|
|
<div key={j} className="location-transport-route"> |
|
|
|
<div key={j} className="location-transport-route"> |
|
|
|
<p className="location-transport-route-title">{route.title}</p> |
|
|
|
<p className="location-transport-route-title"> |
|
|
|
<p className="location-transport-route-desc">{route.desc}</p> |
|
|
|
{route.title} |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p className="location-transport-route-desc"> |
|
|
|
|
|
|
|
{route.desc} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
이시연
