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
Unified 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 { 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.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.location-tab:hover:not(.active) { border-color: #ccc; color: #333; } .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 { width: 100%; height: 480px; border-radius: 20px; overflow: hidden; }
.location-map iframe { width: 100%; height: 100%; border: none; display: block; } .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-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-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-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-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-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-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-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-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-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; } .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 { 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-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-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) { @media (max-width: 768px) {
.location-tabs { margin-bottom: 24px; } .location-tabs { margin-bottom: 24px; }
.location-wrap { grid-template-columns: 1fr; gap: 2rem; } .location-wrap { grid-template-columns: 1fr; gap: 2rem; }
.location-map { height: 260px; } .location-map { height: 260px; }
.location-info-card { position: static; } .location-transport {padding-bottom: 0rem;}
.location-transport-list { grid-template-columns: 1fr; } .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>
</div> </div>
</motion.div> </motion.div>
{/* 연락처 카드 */}
<motion.div <motion.div
key={tab + "-info"} className="location-info-wrapper"
className="location-info-card" initial={{ opacity: 0, y: 40 }}
initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }}
animate={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }}
transition={{ transition={{
duration: 0.4, duration: 0.6,
ease: [0.4, 0, 0.2, 1], ease: [0.4, 0, 0.2, 1],
delay: 0.1, delay: 0.15,
}} }}
> >
<h3>{isIncheon ? "인천 본사" : "마곡 지점"}</h3> <p className="location-info-section-title">회사 정보</p>
<ul className="location-info-list">
{currentInfo.map((item) => ( {/* 연락처 카드 */}
<li key={item.label} className="location-info-item"> <motion.div
<span className="location-info-label">{item.label}</span> key={tab + "-info"}
{item.href ? ( className="location-info-card"
<a className="location-info-value" href={item.href}> initial={{ opacity: 0, y: 24 }}
{item.value} animate={{ opacity: 1, y: 0 }}
</a> transition={{
) : ( duration: 0.4,
<p ease: [0.4, 0, 0.2, 1],
className="location-info-value" delay: 0.1,
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")}
> >
문의하기 <h3>{isIncheon ? "인천 본사" : "마곡 지점"}</h3>
</Link> <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> </motion.div>
</div> </div>
</section> </section>

Write Preview
Loading…
Cancel
Save