|
|
|
@ -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,6 +136,11 @@ 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 |
|
|
|
|
|
|
|
initial={{ opacity: 0, y: 40 }} |
|
|
|
|
|
|
|
animate={whatInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
|
|
|
transition={{ duration: 0.8, ease }} |
|
|
|
|
|
|
|
> |
|
|
|
{/* 상단 텍스트 */} |
|
|
|
{/* 상단 텍스트 */} |
|
|
|
<div className="utm-what__top"> |
|
|
|
<div className="utm-what__top"> |
|
|
|
<motion.span |
|
|
|
<motion.span |
|
|
|
@ -217,7 +222,9 @@ function IntroPage() { |
|
|
|
<span className="drone__badge-conn">PA001</span> |
|
|
|
<span className="drone__badge-conn">PA001</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span className="drone__badge-id">COLL-ACR-001</span> |
|
|
|
<span className="drone__badge-id">COLL-ACR-001</span> |
|
|
|
<span className="drone__badge-status">13m/s / 100m</span> |
|
|
|
<span className="drone__badge-status"> |
|
|
|
|
|
|
|
13m/s / 100m |
|
|
|
|
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="drone__ping drone__ping--red" /> |
|
|
|
<div className="drone__ping drone__ping--red" /> |
|
|
|
<div className="drone__ping drone__ping--red drone__ping--delay" /> |
|
|
|
<div className="drone__ping drone__ping--red drone__ping--delay" /> |
|
|
|
@ -297,6 +304,7 @@ function IntroPage() { |
|
|
|
))} |
|
|
|
))} |
|
|
|
</motion.ul> |
|
|
|
</motion.ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</motion.div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
<div className="inner-wrap"> |
|
|
|
<div className="inner-wrap"> |
|
|
|
|