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

Write Preview
Loading…
Cancel
Save