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

feat : 찾아오시는길 순서 변경

remotes/origin/main
이시연 4 weeks ago
parent
3c6c3a8cdd
commit
fb986dd178
2 changed files with 70 additions and 55 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. 24
      src/css/common.css
  2. 101
      src/pages/company/LocationPage.jsx

24
src/css/common.css
Unescape View File

@ -165,7 +165,14 @@ 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; padding-bottom: 6rem; } .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; }
@ -199,24 +206,23 @@ body{overflow-x:hidden;}
.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; } .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 { display: flex; flex-direction: column; gap: 0; padding-bottom: 4rem; }
.location-map { height: 260px; } .location-map-wrap { order: 1; width: 100%; }
.location-transport {padding-bottom: 0rem;} .location-info-wrapper { order: 2; position: static; max-height: none; margin-top: 32px; width: 100%; }
.location-transport-wrap { order: 3; width: 100%; margin-top: 32px; margin-bottom: 4rem; }
.location-map { height: 260px; width: 100%;}
.location-transport { padding-bottom: 0; }
.location-transport-list { grid-template-columns: 1fr; } .location-transport-list { grid-template-columns: 1fr; }
.location-info-card { padding: 28px 24px; margin-bottom: 4rem; background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; margin-top: 24px; } .location-info-card { padding: 28px 24px; width: 100%; box-sizing: border-box; background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; margin-top: 0; margin-left: 0; margin-right: 0; }
.location-info-list { gap: 20px; margin-bottom: 28px; } .location-info-list { gap: 20px; margin-bottom: 28px; }
.location-hours { margin-top: 0; padding-top: 20px; margin-bottom: 20px; } .location-hours { margin-top: 0; padding-top: 20px; margin-bottom: 20px; }
.location-inquiry-btn { margin-top: 0; border-radius: 12px; } .location-inquiry-btn { margin-top: 0; border-radius: 12px; }
.location-info-section-title { display: block; } .location-info-section-title { display: block; }
.location-info-wrapper { position: static; }
} }
/*연혁*/ /*연혁*/
/* ── Inner Wrap (공통 max-width) ── */ /* ── Inner Wrap (공통 max-width) ── */

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

@ -168,7 +168,6 @@ export default function LocationPage() {
<em className="ht-header-sub">팔네트웍스 사업장 위치 안내입니다</em> <em className="ht-header-sub">팔네트웍스 사업장 위치 안내입니다</em>
</motion.div> </motion.div>
{/* 탭 메뉴 */}
<div className="location-tabs"> <div className="location-tabs">
<button <button
className={`location-tab ${isIncheon ? "active" : ""}`} className={`location-tab ${isIncheon ? "active" : ""}`}
@ -186,9 +185,10 @@ export default function LocationPage() {
<section className="sub-section"> <section className="sub-section">
<div className="location-wrap"> <div className="location-wrap">
{/* 지도 + 교통편 */} {/* 지도 */}
<motion.div <motion.div
key={tab} className="location-map-wrap"
key={tab + "-map"}
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }} transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
@ -202,48 +202,9 @@ export default function LocationPage() {
title="팔네트웍스 위치" title="팔네트웍스 위치"
/> />
</div> </div>
<div className="location-transport">
<h3 className="location-transport-title">교통편 안내</h3>
<div className="location-transport-list">
{currentTransport.map((t, i) => (
<motion.div
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>
<div className="location-transport-routes">
{t.items.map((item, j) => (
<div key={j} className="location-transport-route">
<p className="location-transport-route-title">
{item.title}
</p>
<p className="location-transport-route-desc">
{item.desc}
</p>
</div>
))}
</div>
</motion.div>
))}
</div>
</div>
</motion.div> </motion.div>
{/* 회사 정보 */}
<motion.div <motion.div
className="location-info-wrapper" className="location-info-wrapper"
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
@ -256,8 +217,6 @@ export default function LocationPage() {
}} }}
> >
<p className="location-info-section-title">회사 정보</p> <p className="location-info-section-title">회사 정보</p>
{/* 연락처 카드 */}
<motion.div <motion.div
key={tab + "-info"} key={tab + "-info"}
className="location-info-card" className="location-info-card"
@ -313,6 +272,56 @@ export default function LocationPage() {
</Link> </Link>
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* 교통편 */}
<motion.div
className="location-transport-wrap"
key={tab + "-transport"}
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
>
<div className="location-transport">
<h3 className="location-transport-title">교통편 안내</h3>
<div className="location-transport-list">
{currentTransport.map((t, i) => (
<motion.div
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>
<div className="location-transport-routes">
{t.items.map((item, j) => (
<div key={j} className="location-transport-route">
<p className="location-transport-route-title">
{item.title}
</p>
<p className="location-transport-route-desc">
{item.desc}
</p>
</div>
))}
</div>
</motion.div>
))}
</div>
</div>
</motion.div>
</div> </div>
</section> </section>
</div> </div>

Write Preview
Loading…
Cancel
Save