palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

remotes/origin/main
이시연 4 weeks ago
parent
ec47bc051b
commit
3c6c3a8cdd
2 changed files with 76 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      src/css/common.css
  2. 107
      src/pages/company/LocationPage.jsx

19
src/css/common.css
Unescape View File

@ -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; }
}

107
src/pages/company/LocationPage.jsx
Unescape View File

@ -244,57 +244,74 @@ export default function LocationPage() {
</div>
</div>
</motion.div>
{/* 연락처 카드 */}
<motion.div
key={tab + "-info"}
className="location-info-card"
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
className="location-info-wrapper"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-60px" }}
transition={{
duration: 0.4,
duration: 0.6,
ease: [0.4, 0, 0.2, 1],
delay: 0.1,
delay: 0.15,
}}
>
<h3>{isIncheon ? "인천 본사" : "마곡 지점"}</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">운영 시간</p>
<p className="location-hours-label">
평일 09:00 – 18:00
<br />
<span className="location-hours-text">
토·일·공휴일 휴무
</span>
</p>
</div>
<Link
to="/contact/inquiry"
className="location-inquiry-btn"
onMouseEnter={(e) => (e.currentTarget.style.opacity = ".85")}
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
<p className="location-info-section-title">회사 정보</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,
}}
>
문의하기
</Link>
<h3>{isIncheon ? "인천 본사" : "마곡 지점"}</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">운영 시간</p>
<p className="location-hours-label">
평일 09:00 – 18:00
<br />
<span className="location-hours-text">
토·일·공휴일 휴무
</span>
</p>
</div>
<Link
to="/contact/inquiry"
className="location-inquiry-btn"
onMouseEnter={(e) =>
(e.currentTarget.style.opacity = ".85")
}
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
>
문의하기
</Link>
</motion.div>
</motion.div>
</div>
</section>

Write Preview
Loading…
Cancel
Save