diff --git a/src/components/main/MainUam.jsx b/src/components/main/MainUam.jsx
index 989b067..4aa47b4 100644
--- a/src/components/main/MainUam.jsx
+++ b/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() {
))}
-
-
-
-

+ {/* 동그라미 + UAM 이미지 */}
+
+
+

+
+
UAM NETWORK
Urban Air Mobility
diff --git a/src/css/main.css b/src/css/main.css
index 682e870..ddc35c0 100644
--- a/src/css/main.css
+++ b/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;}}
\ No newline at end of file
+@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);}}