feat : 찾아오시는길 추가

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; }
+}
+
 
 /*연혁*/
 

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 =
-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";
+  "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="inner-wrap">
-          <div className="location-wrap">
+          <motion.div
-            {/* 지도 */}
+            className="ht-header"
-            <div className="sub-fade-in">
+            initial={{ opacity: 0, y: 32 }}
-              <div className="location-map">
+            whileInView={{ opacity: 1, y: 0 }}
-                <iframe src={MAP_SRC} allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade" title="팔네트웍스 본사 위치" />
+            viewport={{ once: true, margin: "-80px" }}
-              </div>
+            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>
 
-              {/* 교통편 */}
+          <section className="sub-section">
-              <div className="location-transport" style={{ marginTop: "28px" }}>
+            <div className="location-wrap">
-                <h3 className="location-transport-title">교통편 안내</h3>
+              {/* 지도 + 교통편 */}
-                <ul className="location-transport-list">
+              <motion.div
-                  {TRANSPORT.map((t) => (
+                initial={{ opacity: 0, y: 40 }}
-                    <li key={t.badge} className="location-transport-item">
+                whileInView={{ opacity: 1, y: 0 }}
-                      <span className="location-transport-badge">{t.badge}</span>
+                viewport={{ once: true, margin: "-60px" }}
-                      <span className="location-transport-text">{t.text}</span>
+                transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
-                    </li>
+              >
-                  ))}
+                <div className="location-map">
-                </ul>
+                  <iframe
-              </div>
+                    src={MAP_SRC}
-            </div>
+                    allowFullScreen
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                    title="팔네트웍스 본사 위치"
+                  />
+                </div>
 
-            {/* 연락처 카드 */}
+                <div className="location-transport">
-            <div className="location-info-card sub-fade-in" style={{ transitionDelay: "100ms" }}>
+                  <h3 className="location-transport-title">교통편 안내</h3>
-              <h3>(주) PALNETWORKS</h3>
+                  <ul className="location-transport-list">
-              <ul className="location-info-list">
+                    {TRANSPORT.map((t, i) => (
-                {INFO.map((item) => (
+                      <motion.li
-                  <li key={item.label} className="location-info-item">
+                        key={t.badge}
-                    <div className="location-info-icon">{item.icon}</div>
+                        className="location-transport-item"
-                    <div>
+                        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>
-                  </li>
+                  ))}
-                ))}
+                </ul>
-              </ul>
+                <div className="location-hours">
-
+                  <p className="location-hours-eyebrow">운영 시간</p>
-              {/* 운영시간 */}
+                  <p className="location-hours-label">
-              <div className="location-hours">
+                    평일 09:00 – 18:00
-                <p
+                    <br />
-                  style={{
+                    <span className="location-hours-text">
-                    margin: "0 0 10px",
+                      토·일·공휴일 휴무
-                    fontSize: "11px",
+                    </span>
-                    fontWeight: 700,
+                  </p>
-                    letterSpacing: ".1em",
+                </div>
-                    textTransform: "uppercase",
+                <a
-                    color: "rgba(17,17,17,.4)",
+                  href="/contact/inquiry"
-                  }}
+                  className="location-inquiry-btn"
+                  onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
+                  onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
                 >
-                  운영 시간
+                  문의하기
-                </p>
+                </a>
-                <p className="location-hours-label">
+              </motion.div>
-                  평일 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>
             </div>
-          </div>
+          </section>
-        </section>
+        </div>
       </div>
     </article>
   );