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

feat : utm/uatm 화면 로고 변경

remotes/origin/main
이시연 2 weeks ago
parent
271f717716
commit
a300b471e8
2 changed files with 149 additions and 141 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. BIN
      public/images/utm_what_img.png
  2. 290
      src/pages/utm/IntroPage.jsx

BIN
public/images/utm_what_img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

290
src/pages/utm/IntroPage.jsx
Unescape View File

@ -53,7 +53,7 @@ function IntroPage() {
const introRef = useRef(null);
const introInView = useInView(introRef, { once: true, margin: "-60px" });
const whatRef = useRef(null);
const whatInView = useInView(whatRef, { once: true, margin: "-60px" });
const whatInView = useInView(whatRef, { once: true, margin: "-200px" });
return (
<article ref={ref}>
@ -136,167 +136,175 @@ function IntroPage() {
{/* ── UTM 소개 섹션 ── */}
<section className="utm-what" ref={whatRef}>
<div className="inner-wrap">
{/* 상단 텍스트 */}
<div className="utm-what__top">
<motion.span
className="utm-what__eyebrow"
initial={{ opacity: 0, y: 16 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease }}
>
What is UTM
</motion.span>
<motion.h2
className="utm-what__title"
initial={{ opacity: 0, y: 20 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.7, delay: 0.1, ease }}
>
UTM, <em>무엇을 할 수 있나요?</em>
</motion.h2>
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, ease }}
>
{/* 상단 텍스트 */}
<div className="utm-what__top">
<motion.span
className="utm-what__eyebrow"
initial={{ opacity: 0, y: 16 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease }}
>
What is UTM
</motion.span>
<motion.p
className="utm-what__desc"
initial={{ opacity: 0, y: 16 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2, ease }}
>
UTM은 단순한 관제 시스템을 넘어, 도심 저고도 공역 전체를
디지털로 운영하는 통합 플랫폼입니다. 실시간 감시부터 충돌 위험
분석, 기상 연계, 공역 관리까지 — 비행의 모든 순간을 안전하게
연결합니다.
</motion.p>
</div>
<motion.h2
className="utm-what__title"
initial={{ opacity: 0, y: 20 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.7, delay: 0.1, ease }}
>
UTM, <em>무엇을 할 수 있나요?</em>
</motion.h2>
{/* 3열 바디 */}
<div className="utm-what__body">
{/* 왼쪽 카드 */}
<motion.ul
className="utm-what__cards"
initial={{ opacity: 0, x: -24 }}
animate={whatInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.7, delay: 0.3, ease }}
>
{UTM_WHAT_LEFT.map(({ icon: Icon, label }) => (
<li key={label} className="utm-what__card">
<span className="utm-what__card-icon">
<Icon size={16} />
</span>
<span className="utm-what__card-label">{label}</span>
</li>
))}
</motion.ul>
<motion.p
className="utm-what__desc"
initial={{ opacity: 0, y: 16 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2, ease }}
>
UTM은 단순한 관제 시스템을 넘어, 도심 저고도 공역 전체를
디지털로 운영하는 통합 플랫폼입니다. 실시간 감시부터 충돌 위험
분석, 기상 연계, 공역 관리까지 — 비행의 모든 순간을 안전하게
연결합니다.
</motion.p>
</div>
{/* 가운데 목업 (기존 코드 유지) */}
<motion.div
className="utm-what__mockup"
initial={{ opacity: 0, y: 24 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.2, ease }}
>
<div
className="utm-what__img-wrap"
style={{
backgroundImage: `url(${basePath}images/utm_what_img.png)`,
}}
{/* 3열 바디 */}
<div className="utm-what__body">
{/* 왼쪽 카드 */}
<motion.ul
className="utm-what__cards"
initial={{ opacity: 0, x: -24 }}
animate={whatInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.7, delay: 0.3, ease }}
>
{/* 빨간 드론 - 공역 빨간 구역 (중앙) */}
<div
className="drone drone--1"
style={{ top: "35%", left: "48%" }}
>
<div className="drone__badge drone__badge--red">
<div className="drone__badge-top">
<img
src={`${basePath}images/red_drone.png`}
alt="drone"
width="16"
height="16"
/>
<span className="drone__badge-conn">PA001</span>
</div>
<span className="drone__badge-id">COLL-ACR-001</span>
<span className="drone__badge-status">13m/s / 100m</span>
</div>
<div className="drone__ping drone__ping--red" />
<div className="drone__ping drone__ping--red drone__ping--delay" />
</div>
{UTM_WHAT_LEFT.map(({ icon: Icon, label }) => (
<li key={label} className="utm-what__card">
<span className="utm-what__card-icon">
<Icon size={16} />
</span>
<span className="utm-what__card-label">{label}</span>
</li>
))}
</motion.ul>
{/* 파란 드론 - 왼쪽 검은 구역 주위 */}
{/* 가운데 목업 (기존 코드 유지) */}
<motion.div
className="utm-what__mockup"
initial={{ opacity: 0, y: 24 }}
animate={whatInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.2, ease }}
>
<div
className="drone drone--2"
style={{ top: "25%", left: "22%" }}
className="utm-what__img-wrap"
style={{
backgroundImage: `url(${basePath}images/utm_what_img.png)`,
}}
>
<div className="drone__badge drone__badge--blue">
<div className="drone__badge-top">
<img
src={`${basePath}images/blue_drone.png`}
alt="drone"
width="16"
height="16"
/>
<span className="drone__badge-conn">BLE</span>
{/* 빨간 드론 - 공역 빨간 구역 (중앙) */}
<div
className="drone drone--1"
style={{ top: "35%", left: "48%" }}
>
<div className="drone__badge drone__badge--red">
<div className="drone__badge-top">
<img
src={`${basePath}images/red_drone.png`}
alt="drone"
width="16"
height="16"
/>
<span className="drone__badge-conn">PA001</span>
</div>
<span className="drone__badge-id">COLL-ACR-001</span>
<span className="drone__badge-status">
13m/s / 100m
</span>
</div>
<span className="drone__badge-id">DJI-TEST-0005</span>
<span className="drone__badge-status">
LTE · 9m/s / 100m
</span>
<div className="drone__ping drone__ping--red" />
<div className="drone__ping drone__ping--red drone__ping--delay" />
</div>
<div className="drone__ping drone__ping--blue" />
<div className="drone__ping drone__ping--blue drone__ping--delay" />
</div>
{/* 주황 드론 - 오른쪽 분홍 구역 근처 */}
<div
className="drone drone--3"
style={{ top: "58%", left: "72%" }}
>
<div className="drone__badge drone__badge--orange">
<div className="drone__badge-top">
{/* 파란 드론 - 왼쪽 검은 구역 주위 */}
<div
className="drone drone--2"
style={{ top: "25%", left: "22%" }}
>
<div className="drone__badge drone__badge--blue">
<div className="drone__badge-top">
<img
src={`${basePath}images/orange_drone.png`}
src={`${basePath}images/blue_drone.png`}
alt="drone"
width="16"
height="16"
/>
<span className="drone__badge-conn">LTE</span>
<span className="drone__badge-conn">BLE</span>
</div>
<span className="drone__badge-id">DJI-TEST-0005</span>
<span className="drone__badge-status">
LTE · 9m/s / 100m
</span>
</div>
<span className="drone__badge-id">FPA502</span>
<span className="drone__badge-status">
338m / 172k/m / 81°
<br />
126.745021/37.287339
</span>
<div className="drone__ping drone__ping--blue" />
<div className="drone__ping drone__ping--blue drone__ping--delay" />
</div>
{/* 주황 드론 - 오른쪽 분홍 구역 근처 */}
<div
className="drone drone--3"
style={{ top: "58%", left: "72%" }}
>
<div className="drone__badge drone__badge--orange">
<div className="drone__badge-top">
<div className="drone__badge-top">
<img
src={`${basePath}images/orange_drone.png`}
alt="drone"
width="16"
height="16"
/>
<span className="drone__badge-conn">LTE</span>
</div>
</div>
<span className="drone__badge-id">FPA502</span>
<span className="drone__badge-status">
338m / 172k/m / 81°
<br />
126.745021/37.287339
</span>
</div>
<div className="drone__ping drone__ping--orange" />
<div className="drone__ping drone__ping--orange drone__ping--delay" />
</div>
<div className="drone__ping drone__ping--orange" />
<div className="drone__ping drone__ping--orange drone__ping--delay" />
</div>
</div>
</motion.div>
</motion.div>
{/* 오른쪽 카드 */}
<motion.ul
className="utm-what__cards utm-what__cards--right"
initial={{ opacity: 0, x: 24 }}
animate={whatInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.7, delay: 0.3, ease }}
>
{UTM_WHAT_RIGHT.map(({ icon: Icon, label }) => (
<li
key={label}
className="utm-what__card utm-what__card--right"
>
<span className="utm-what__card-label">{label}</span>
<span className="utm-what__card-icon">
<Icon size={16} />
</span>
</li>
))}
</motion.ul>
</div>
{/* 오른쪽 카드 */}
<motion.ul
className="utm-what__cards utm-what__cards--right"
initial={{ opacity: 0, x: 24 }}
animate={whatInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.7, delay: 0.3, ease }}
>
{UTM_WHAT_RIGHT.map(({ icon: Icon, label }) => (
<li
key={label}
className="utm-what__card utm-what__card--right"
>
<span className="utm-what__card-label">{label}</span>
<span className="utm-what__card-icon">
<Icon size={16} />
</span>
</li>
))}
</motion.ul>
</div>
</motion.div>
</div>
</section>
<div className="inner-wrap">

Write Preview
Loading…
Cancel
Save