From 909d3576e9fb669e3765cff5bc3f4deb69d7dbfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?=
 <siyeon00@palnet.co.kr>
Date: Wed, 27 May 2026 17:24:58 +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=EA=B8=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/bus.png              | Bin 0 -> 2364 bytes
 public/images/car.png              | Bin 0 -> 1876 bytes
 public/images/subway.png           | Bin 0 -> 2688 bytes
 src/css/common.css                 |  38 +++++
 src/pages/company/LocationPage.jsx | 250 ++++++++++++++---------------
 5 files changed, 159 insertions(+), 129 deletions(-)
 create mode 100644 public/images/bus.png
 create mode 100644 public/images/car.png
 create mode 100644 public/images/subway.png

diff --git a/public/images/bus.png b/public/images/bus.png
new file mode 100644
index 0000000000000000000000000000000000000000..05c19ac76c1176959a730002ba3cfe7b7abf0005
GIT binary patch
literal 2364
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
VmA_*{z{ckTU{``m{eDW?e*tHbD3AaE

literal 0
HcmV?d00001

diff --git a/public/images/car.png b/public/images/car.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ecf9380c202b9bec15ed67c6fb12e61e79cbc9d
GIT binary patch
literal 1876
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

literal 0
HcmV?d00001

diff --git a/public/images/subway.png b/public/images/subway.png
new file mode 100644
index 0000000000000000000000000000000000000000..99111394151112db6b22e1edbb55c7c0176dfdff
GIT binary patch
literal 2688
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

literal 0
HcmV?d00001

diff --git a/src/css/common.css b/src/css/common.css
index e2a344d..f83851c 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -160,6 +160,44 @@ body{overflow-x:hidden;}
 .cta-bg { background-size: cover; background-position: center; mask-image: linear-gradient(to bottom, transparent 0%, black 40%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%); }
 }
 
+/* ── 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-map iframe { width: 100%; height: 100%; border: none; display: block; }
+.location-info-card { display: flex; flex-direction: column; top: 100px; }
+.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; }
+.location-info-label { font-size: 11px; font-weight: 600; color: #bbb; letter-spacing: 0.1em; text-transform: uppercase; }
+.location-info-value { cursor: default; font-size: 14px; font-weight: 500; color: #111; text-decoration: none; line-height: 1.6; }
+.location-hours { border-top: 1px solid #ebebeb; padding-top: 20px; margin-top: 28px; margin-bottom: 20px; }
+.location-hours-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(17,17,17,.35); }
+.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-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-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; }
+@media (max-width: 768px) {
+.location-wrap { grid-template-columns: 1fr; gap: 2rem; }
+.location-map { height: 260px; }
+.location-info-card { position: static; }
+.location-transport-list { grid-template-columns: 1fr; }
+.location-transport { padding-bottom: 4rem; }
+}
+
 
 /*연혁*/
 
diff --git a/src/pages/company/LocationPage.jsx b/src/pages/company/LocationPage.jsx
index 355e406..c365bc5 100644
--- a/src/pages/company/LocationPage.jsx
+++ b/src/pages/company/LocationPage.jsx
@@ -1,5 +1,6 @@
 import SubHero from "../../components/SubHero";
 import useFadeIn from "../../hooks/useFadeIn";
+import { motion } from "framer-motion";
 
 const COMPANY_NAV = [
   { label: "회사소개", to: "/company/about" },
@@ -8,58 +9,14 @@ const COMPANY_NAV = [
   { label: "찾아오시는 길", to: "/company/location" },
 ];
 
-// 아이콘 모음
-function IconPin() {
-  return (
-    <svg viewBox="0 0 24 24">
-      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
-      <circle cx="12" cy="10" r="3" />
-    </svg>
-  );
-}
-function IconPhone() {
-  return (
-    <svg viewBox="0 0 24 24">
-      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.13 6.13l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />
-    </svg>
-  );
-}
-function IconFax() {
-  return (
-    <svg viewBox="0 0 24 24">
-      <polyline points="22 17 22 11 16 11" />
-      <path d="M21.73 11l-5.73-7H2v18h12.27l5-7z" />
-    </svg>
-  );
-}
-function IconMail() {
-  return (
-    <svg viewBox="0 0 24 24">
-      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
-      <polyline points="22,6 12,13 2,6" />
-    </svg>
-  );
-}
-
 const INFO = [
   {
-    icon: <IconPin />,
     label: "주소",
     value: "인천광역시 서구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호",
   },
+  { label: "전화", value: "032-727-5909", href: "tel:032-727-5909" },
+  { label: "팩스", value: "032-727-5908" },
   {
-    icon: <IconPhone />,
-    label: "전화",
-    value: "032-727-5909",
-    href: "tel:032-727-5909",
-  },
-  {
-    icon: <IconFax />,
-    label: "팩스",
-    value: "032-727-5908",
-  },
-  {
-    icon: <IconMail />,
     label: "이메일",
     value: "help@palnet.co.kr",
     href: "mailto:help@palnet.co.kr",
@@ -70,19 +27,22 @@ const TRANSPORT = [
   {
     badge: "지하철",
     text: "인천 1호선 검암역 하차 → 도보 약 15분 또는 택시 5분 (로봇랜드 방면)",
+    icon: "/PALNetworks/images/subway.png",
   },
   {
     badge: "버스",
     text: "검암역 환승센터에서 서구 방면 버스 탑승 → 로봇랜드 하차",
+    icon: "/PALNetworks/images/bus.png",
   },
   {
     badge: "자가용",
     text: "제2경인고속도로 검단IC 진출 → 로봇랜드로 방면 직진 약 5분",
+    icon: "/PALNetworks/images/car.png",
   },
 ];
 
-// 카카오맵 위도/경도: 인천 로봇랜드 좌표
-const MAP_SRC = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3161.8!2d126.6854!3d37.5613!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7f6e5a5cfc7f%3A0x0!2z7Iuc7LKc7Jy87Lanb-qzoOq1rOyGjA!5e0!3m2!1sko!2skr!4v1700000000000";
+const MAP_SRC =
+  "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";
 
 export default function LocationPage() {
   const ref = useFadeIn();
@@ -93,107 +53,139 @@ export default function LocationPage() {
         label="Company"
         title={
           <>
-            {/* <span style={{ color: "#111" }}>방문 안내</span>
-            <br /> */}
             <em>Location</em>
           </>
         }
-        // desc="인천광역시 서구 로봇랜드에 위치한 팔네트웍스 본사입니다."
         navItems={COMPANY_NAV}
       />
 
       <div className="sub-content">
-        <section className="sub-section">
-          <div className="location-wrap">
-            {/* 지도 */}
-            <div className="sub-fade-in">
-              <div className="location-map">
-                <iframe src={MAP_SRC} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade" title="팔네트웍스 본사 위치" />
-              </div>
+        <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">
+              인천광역시 서구 로봇랜드에 위치한 팔네트웍스 본사입니다
+            </em>
+          </motion.div>
 
-              {/* 교통편 */}
-              <div className="location-transport" style={{ marginTop: "28px" }}>
-                <h3 className="location-transport-title">교통편 안내</h3>
-                <ul className="location-transport-list">
-                  {TRANSPORT.map((t) => (
-                    <li key={t.badge} className="location-transport-item">
-                      <span className="location-transport-badge">{t.badge}</span>
-                      <span className="location-transport-text">{t.text}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </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] }}
+              >
+                <div className="location-map">
+                  <iframe
+                    src={MAP_SRC}
+                    allowFullScreen
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                    title="팔네트웍스 본사 위치"
+                  />
+                </div>
 
-            {/* 연락처 카드 */}
-            <div className="location-info-card sub-fade-in" style={{ transitionDelay: "100ms" }}>
-              <h3>(주) PALNETWORKS</h3>
-              <ul className="location-info-list">
-                {INFO.map((item) => (
-                  <li key={item.label} className="location-info-item">
-                    <div className="location-info-icon">{item.icon}</div>
-                    <div>
+                <div className="location-transport">
+                  <h3 className="location-transport-title">교통편 안내</h3>
+                  <ul className="location-transport-list">
+                    {TRANSPORT.map((t, i) => (
+                      <motion.li
+                        key={t.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={t.icon} alt={t.badge} />
+                          </div>
+                          <span className="location-transport-badge">
+                            {t.badge}
+                          </span>
+                        </div>
+                        <span className="location-transport-text">
+                          {t.text}
+                        </span>
+                      </motion.li>
+                    ))}
+                  </ul>
+                </div>
+              </motion.div>
+
+              {/* 연락처 카드 */}
+              <motion.div
+                className="location-info-card"
+                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,
+                }}
+              >
+                <h3>(주) PALNETWORKS</h3>
+                <ul className="location-info-list">
+                  {INFO.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" }}>
+                        <p
+                          className="location-info-value"
+                          style={{ margin: 0, whiteSpace: "pre-line" }}
+                        >
                           {item.value}
                         </p>
                       )}
-                    </div>
-                  </li>
-                ))}
-              </ul>
-
-              {/* 운영시간 */}
-              <div className="location-hours">
-                <p
-                  style={{
-                    margin: "0 0 10px",
-                    fontSize: "11px",
-                    fontWeight: 700,
-                    letterSpacing: ".1em",
-                    textTransform: "uppercase",
-                    color: "rgba(17,17,17,.4)",
-                  }}
+                    </li>
+                  ))}
+                </ul>
+                <div className="location-hours">
+                  <p className="location-hours-eyebrow">운영 시간</p>
+                  <p className="location-hours-label">
+                    평일 09:00 – 18:00
+                    <br />
+                    <span className="location-hours-text">
+                      토·일·공휴일 휴무
+                    </span>
+                  </p>
+                </div>
+                <a
+                  href="/contact/inquiry"
+                  className="location-inquiry-btn"
+                  onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
+                  onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
                 >
-                  운영 시간
-                </p>
-                <p className="location-hours-label">
-                  평일 09:00 – 18:00
-                  <br />
-                  <span className="location-hours-text">토·일·공휴일 휴무</span>
-                </p>
-              </div>
-
-              <a
-                href="/contact/inquiry"
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  marginTop: "20px",
-                  height: "50px",
-                  background: "var(--color-primary)",
-                  borderRadius: "12px",
-                  fontSize: "15px",
-                  fontWeight: 700,
-                  color: "#fff",
-                  textDecoration: "none",
-                  letterSpacing: "-.01em",
-                  transition: "opacity .2s",
-                }}
-                onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
-                onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
-              >
-                문의하기
-              </a>
+                  문의하기
+                </a>
+              </motion.div>
             </div>
-          </div>
-        </section>
+          </section>
+        </div>
       </div>
     </article>
   );