feat : 기체 이미지 추가

src/components/main/MainUam.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
+import uamImg from "../../../public/images/uam-silver.png";
 gsap.registerPlugin(ScrollTrigger);
 
 function MainAirspaceTransition() {
@@ -9,22 +10,15 @@ function MainAirspaceTransition() {
   const rightRef = useRef(null);
   const lineRef = useRef([]);
   const dotRef = useRef(null);
-  const uamImageRef = useRef(null);
+  const uamImageRef = useRef(null); // ← 추가
 
   useEffect(() => {
     const ctx = gsap.context(() => {
       gsap.set(rightRef.current, { xPercent: 100 });
       gsap.set(lineRef.current, { scaleX: 0, transformOrigin: "left center" });
-      gsap.set(dotRef.current, {
-        x: -320,
-        opacity: 0,
-        scale: 1,
-      });
-
-      gsap.set(".airspace-uam-content", {
-        opacity: 0,
-        y: 36,
-      });
+      gsap.set(dotRef.current, { x: -320, opacity: 0, scale: 1 });
+      gsap.set(".airspace-uam-content", { opacity: 0, y: 36 });
+      gsap.set(uamImageRef.current, { opacity: 0 }); // ← 추가
 
       const tl = gsap.timeline({
         scrollTrigger: {
@@ -71,39 +65,21 @@ function MainAirspaceTransition() {
         "<",
       );
 
-      // /* 마지막: 동그라미 줌 */
-      // tl.to(dotRef.current, {
-      //   scale: 46,
-      //   duration: 1.2,
-      //   ease: "power2.inOut",
-      // });
-
-      // tl.to(
-      //   ".airspace-uam-content",
-      //   {
-      //     opacity: 1,
-      //     y: 0,
-      //     duration: 0.8,
-      //     ease: "power2.out",
-      //   },
-      //   "-=0.35"
-      // );
-
-      /* 마지막: 내부 점 제거 */
       tl.call(() => {
         dotRef.current?.classList.add("is-zooming");
       });
 
-      /* 마지막: 동그라미 줌 */
       tl.to(dotRef.current, {
         x: 0,
         y: 0,
-        scale: 72,
+        scale: 52,
         duration: 1.2,
         ease: "power2.inOut",
       });
+
+      // airspace-uam-content + UAM 이미지 동시 등장  ← 수정
       tl.to(
-        ".airspace-uam-content",
+        [".airspace-uam-content", uamImageRef.current],
         {
           opacity: 1,
           y: 0,
@@ -141,11 +117,13 @@ function MainAirspaceTransition() {
         ))}
       </div>
 
-      <div className="airspace-moving-dot" ref={dotRef} />
-
-      <div className="airspace-uam-vehicle" ref={uamImageRef}>
-        <img src="/images/uam-silver.png" alt="" />
+      {/* 동그라미 + UAM 이미지 */}
+      <div className="airspace-moving-dot" ref={dotRef}>
+        <div className="airspace-dot-image" ref={uamImageRef}>
+          <img src={uamImg} alt="UAM Aircraft" />
+        </div>
       </div>
+
       <div className="airspace-uam-content">
         <p>UAM NETWORK</p>
         <h2>Urban Air Mobility</h2>

src/css/main.css

@@ -211,7 +211,7 @@ body{overflow-x:hidden;}
 .airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#3a4081;}
 .airspace-panel h2{margin:0;max-width:760px;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.96;letter-spacing:-.08em;color:#0e1120;}
 .airspace-lines{position:absolute;inset:0;z-index:5;pointer-events:none;}
-.airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;}
+.airspace-moving-dot{position:absolute;left:68%;top:47%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;}
 .airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;}
 
 .airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;}
@@ -219,11 +219,13 @@ body{overflow-x:hidden;}
 .airspace-uam-content h2{margin:0 0 24px;font-size:clamp(54px,7vw,104px);font-weight:800;line-height:.92;letter-spacing:-.07em;color:#ffffff;}
 .airspace-uam-content span{display:block;max-width:560px;font-size:18px;line-height:1.8;font-weight:500;color:rgba(255,255,255,.72);}
 
-
+.airspace-dot-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:2;pointer-events:none;}
+.airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(58,64,129,.28));animation:float-uam 5s ease-in-out infinite;will-change:transform;}
 
 @media (max-width:768px){.airspace-panel{padding:0 28px;}
 .airspace-panel h2{font-size:44px;}
 .airspace-line{left:28px;}
 }
 
-@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}
+@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}
+@keyframes float-uam{0%{transform:translateY(0px);}48%{transform:translateY(-1px);}100%{transform:translateY(0px);}}