feat : 찾아오시는길 반응형 및 sticky 추가

src/css/common.css

@@ -165,11 +165,12 @@ body{overflow-x:hidden;}
 .location-tab { padding: 10px 24px; border-radius: 100px; border: 1px solid #e8e8e8; background: #fff; font-size: 14px; font-weight: 600; color: #999; cursor: pointer; transition: all 0.2s ease; }
 .location-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
 .location-tab:hover:not(.active) { border-color: #ccc; color: #333; }
-.location-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; }
+.location-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start; padding-bottom: 6rem; }
 .location-map { width: 100%; height: 480px; border-radius: 20px; overflow: hidden; }
 .location-map iframe { width: 100%; height: 100%; border: none; display: block; }
-.location-info-card { display: flex; flex-direction: column }
+.location-info-card { display: flex; flex-direction: column; }
 .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-wrapper { align-self: start; position: sticky; top: 100px; max-height: calc(100vh - 200px); overflow-y: auto; }
 .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; }
@@ -179,7 +180,7 @@ body{overflow-x:hidden;}
 .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: 32px; padding-bottom: 6rem; }
+.location-transport { padding-top: 32px; padding-bottom: 0; }
 .location-transport-title { font-size: 16px; font-weight: 700; color: #111; letter-spacing: -0.03em; margin: 0 0 20px; }
 .location-transport-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
 .location-transport-item { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; border-radius: 16px; background: #fff; border: 1px solid #e8e8e8; }
@@ -197,13 +198,21 @@ body{overflow-x:hidden;}
 .location-transport-route { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid #f0f0f0; }
 .location-transport-route-title { font-size: 12px; font-weight: 700; color: #333; margin: 0; }
 .location-transport-route-desc { font-size: 12px; color: #888; line-height: 1.6; margin: 0; white-space: pre-line; }
+.location-info-section-title { display: none; font-size: 16px; font-weight: 700; color: #111; letter-spacing: -0.03em; margin: 0 0 20px; }
+
 @media (max-width: 768px) {
 .location-tabs { margin-bottom: 24px; }
 .location-wrap { grid-template-columns: 1fr; gap: 2rem; }
 .location-map { height: 260px; }
-.location-info-card { position: static; }
+.location-transport {padding-bottom: 0rem;}
 .location-transport-list { grid-template-columns: 1fr; }
-.location-transport { padding-bottom: 4rem; }
+.location-info-card { padding: 28px 24px; margin-bottom: 4rem; background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; margin-top: 24px; }
+.location-info-list { gap: 20px; margin-bottom: 28px; }
+.location-hours { margin-top: 0; padding-top: 20px; margin-bottom: 20px; }
+.location-inquiry-btn { margin-top: 0; border-radius: 12px; }
+.location-info-section-title { display: block; }
+.location-info-wrapper { position: static; }
+
 }
 
 

src/pages/company/LocationPage.jsx

@@ -244,6 +244,18 @@ export default function LocationPage() {
                   </div>
                 </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">회사 정보</p>
 
                 {/* 연락처 카드 */}
                 <motion.div
@@ -261,7 +273,9 @@ export default function LocationPage() {
                   <ul className="location-info-list">
                     {currentInfo.map((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 ? (
                           <a className="location-info-value" href={item.href}>
                             {item.value}
@@ -290,12 +304,15 @@ export default function LocationPage() {
                   <Link
                     to="/contact/inquiry"
                     className="location-inquiry-btn"
-                  onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.opacity = ".85")
+                    }
                     onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
                   >
                     문의하기
                   </Link>
                 </motion.div>
+              </motion.div>
             </div>
           </section>
         </div>