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

fix : 메인 해상도 깨짐 수정

main
이시연 2 weeks ago
parent
5ea0414f83
commit
d56c0f974c
2 changed files with 72 additions and 20 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. 69
      src/components/main/MainUam.jsx
  2. 19
      src/css/main.css

69
src/components/main/MainUam.jsx
Unescape View File

@ -58,7 +58,6 @@ function MainUam() {
const dotRef = useRef(null); const dotRef = useRef(null);
const uamImageRef = useRef(null); const uamImageRef = useRef(null);
const canvasRef = useRef(null); const canvasRef = useRef(null);
const isMobile = window.innerWidth <= 768;
useEffect(() => { useEffect(() => {
// ── 배경 캔버스 ───────────────────────────────────────── // ── 배경 캔버스 ─────────────────────────────────────────
@ -97,7 +96,14 @@ function MainUam() {
const steps = 200; const steps = 200;
const ampScale = mobile ? 0.35 : 0.5 + scrollP * 0.7; const ampScale = mobile ? 0.35 : 0.5 + scrollP * 0.7;
const pts = Array.from({ length: steps + 1 }, (_, s) => [(s / steps) * W, canvas.height * w.yRatio + Math.sin((s / steps) * Math.PI * w.freq + ts * w.speed + w.phase) * w.amp * canvas.height * ampScale]); const pts = Array.from({ length: steps + 1 }, (_, s) => [
(s / steps) * W,
canvas.height * w.yRatio +
Math.sin((s / steps) * Math.PI * w.freq + ts * w.speed + w.phase) *
w.amp *
canvas.height *
ampScale,
]);
const alphaCenter = scrollP * (mobile ? 0.12 : 0.18); const alphaCenter = scrollP * (mobile ? 0.12 : 0.18);
const grad = c.createLinearGradient(0, 0, W, 0); const grad = c.createLinearGradient(0, 0, W, 0);
@ -128,7 +134,14 @@ function MainUam() {
const ampScale = mobile ? 0.35 : 0.5 + scrollP * 0.7; const ampScale = mobile ? 0.35 : 0.5 + scrollP * 0.7;
const x = d.t * W; const x = d.t * W;
const y = canvas.height * d.wave.yRatio + Math.sin(d.t * Math.PI * d.wave.freq + ts * d.wave.speed + d.wave.phase) * d.wave.amp * canvas.height * ampScale; const y =
canvas.height * d.wave.yRatio +
Math.sin(
d.t * Math.PI * d.wave.freq + ts * d.wave.speed + d.wave.phase,
) *
d.wave.amp *
canvas.height *
ampScale;
const edgeFade = Math.sin(d.t * Math.PI); const edgeFade = Math.sin(d.t * Math.PI);
const alpha = edgeFade * scrollP * 0.45; const alpha = edgeFade * scrollP * 0.45;
if (alpha < 0.01) return; if (alpha < 0.01) return;
@ -167,12 +180,35 @@ function MainUam() {
window.addEventListener("resize", resize); window.addEventListener("resize", resize);
raf = requestAnimationFrame(draw); raf = requestAnimationFrame(draw);
const getCoverScale = () => {
const section = sectionRef.current;
const dot = dotRef.current;
if (!section || !dot) return 1;
const sectionWidth = section.clientWidth;
const sectionHeight = section.clientHeight;
// translate(-50%, -50%)를 사용하므로 left와 top이 원의 중심
const centerX = dot.offsetLeft;
const centerY = dot.offsetTop;
const farthestX = Math.max(centerX, sectionWidth - centerX);
const farthestY = Math.max(centerY, sectionHeight - centerY);
const requiredRadius = Math.hypot(farthestX, farthestY);
// 모서리에 미세한 틈이 생기지 않도록 8% 여유
return (requiredRadius / (dot.offsetWidth / 2)) * 1.08;
};
// ── GSAP 기존 애니메이션 ──────────────────────────────── // ── GSAP 기존 애니메이션 ────────────────────────────────
const ctx = gsap.context(() => { const ctx = gsap.context(() => {
gsap.set(rightRef.current, { xPercent: 100 }); gsap.set(rightRef.current, { xPercent: 100 });
gsap.set(lineRef.current, { scaleX: 0, transformOrigin: "left center" }); gsap.set(lineRef.current, { scaleX: 0, transformOrigin: "left center" });
gsap.set(dotRef.current, { gsap.set(dotRef.current, {
x: isMobile ? -160 : -320, xPercent: -50,
yPercent: -50,
x: window.innerWidth <= 768 ? -160 : -320,
opacity: 0, opacity: 0,
scale: 1, scale: 1,
}); });
@ -187,6 +223,7 @@ function MainUam() {
scrub: 1, scrub: 1,
pin: true, pin: true,
anticipatePin: 1, anticipatePin: 1,
invalidateOnRefresh: true,
}, },
}); });
@ -197,7 +234,11 @@ function MainUam() {
ease: "none", ease: "none",
}); });
tl.to(dotRef.current, { x: 0, opacity: 1, duration: 0.7, ease: "none" }, "<0.1"); tl.to(
dotRef.current,
{ x: 0, opacity: 1, duration: 0.7, ease: "none" },
"<0.1",
);
tl.to(leftRef.current, { xPercent: -100, duration: 1, ease: "none" }); tl.to(leftRef.current, { xPercent: -100, duration: 1, ease: "none" });
tl.to(rightRef.current, { xPercent: 0, duration: 1, ease: "none" }, "<"); tl.to(rightRef.current, { xPercent: 0, duration: 1, ease: "none" }, "<");
@ -209,12 +250,22 @@ function MainUam() {
tl.to(dotRef.current, { tl.to(dotRef.current, {
x: 0, x: 0,
y: 0, y: 0,
scale: isMobile ? 42 : 52, scale: () => getCoverScale(),
duration: 1.2, duration: 1.2,
ease: "power2.inOut", ease: "power2.inOut",
}); });
tl.to([".airspace-uam-content", uamImageRef.current], { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }, "-=0.35"); tl.to(
".airspace-uam-content",
{ opacity: 1, y: 0, duration: 0.8, ease: "power2.out" },
">",
);
tl.to(
uamImageRef.current,
{ opacity: 1, duration: 0.8, ease: "power2.out" },
"<",
);
}, sectionRef); }, sectionRef);
return () => { return () => {
@ -252,11 +303,11 @@ function MainUam() {
))} ))}
</div> </div>
<div className="airspace-moving-dot" ref={dotRef}> <div className="airspace-moving-dot" ref={dotRef}></div>
<div className="airspace-dot-image" ref={uamImageRef}> <div className="airspace-dot-image" ref={uamImageRef}>
<img src={uamImg} alt="UAM Aircraft" /> <img src={uamImg} alt="UAM Aircraft" />
</div> </div>
</div>
<div className="airspace-uam-content"> <div className="airspace-uam-content">
<p>{t.networkLabel}</p> <p>{t.networkLabel}</p>

19
src/css/main.css
Unescape View File

@ -248,27 +248,28 @@ body{overflow-x:hidden;}
.airspace-moving-dot, .airspace-moving-dot,
.airspace-uam-content {position: relative; z-index: 1; } .airspace-uam-content {position: relative; z-index: 1; }
.airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(26,31,94,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(26,31,94,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);} .airspace-transition-section{--uam-center-x:68%;--uam-center-y:49%;position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(26,31,94,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(26,31,94,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);}
.airspace-transition-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 20%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.24) 80%,rgba(255,255,255,.72) 100%);pointer-events:none;} .airspace-transition-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 20%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.24) 80%,rgba(255,255,255,.72) 100%);pointer-events:none;}
.airspace-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;} .airspace-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;}
.airspace-panel--utm{background:transparent;} .airspace-panel--utm{background:transparent;}
.airspace-panel--UTM{background:radial-gradient(circle at 72% 34%,rgba(112,180,255,.12),transparent 34%),radial-gradient(circle at 42% 78%,rgba(26,31,94,.08),transparent 28%);} .airspace-panel--uam{background:radial-gradient(circle at 72% 34%,rgba(112,180,255,.12),transparent 34%),radial-gradient(circle at 42% 78%,rgba(26,31,94,.08),transparent 28%);}
.airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#1a1f5e;} .airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#1a1f5e;}
.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-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-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:#1a1f5e;border:1px solid rgba(26,31,94,.14);box-shadow:0 0 0 12px rgba(26,31,94,.06),0 20px 50px rgba(26,31,94,.18);transform-origin:center center;} .airspace-moving-dot{position:absolute;left:var(--uam-center-x);top:var(--uam-center-y);z-index:6;width:54px;height:54px;min-width:54px;min-height:54px;aspect-ratio:1/1;border-radius:50%;background:#1a1f5e;border:1px solid rgba(26,31,94,.14);box-shadow:0 0 0 12px rgba(26,31,94,.06),0 20px 50px rgba(26,31,94,.18);transform:translate(-50%,-50%);transform-origin:center center;}
.airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;} .airspace-moving-dot::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;aspect-ratio:1/1;border-radius:50%;background:#ffffff;opacity:.9;transform:translate(-50%,-50%);}
.airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;} .airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;}
.airspace-uam-content p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.28em;color:rgba(255,255,255,.72);} .airspace-uam-content p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.28em;color:rgba(255,255,255,.72);}
.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 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-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{position:absolute;left:var(--uam-center-x);top:var(--uam-center-y);z-index:7;width:clamp(560px,36vw,700px);opacity:0;pointer-events:none;transform:translate(-50%,-50%);}
.airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(26,31,94,.28));animation:float-UTM 5s ease-in-out infinite;will-change:transform;} .airspace-dot-image img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(26,31,94,.28));animation:uamAircraftFloat 3.2s ease-in-out infinite;transform-origin:center center;will-change:transform;}
.airspace-mobile-br{display:none;} .airspace-mobile-br{display:none;}
@media (max-width:768px){ @media (max-width:768px){
.airspace-transition-section{--uam-center-x:88%;--uam-center-y:43%;}.airspace-dot-image{width:min(88vw,480px);}
.airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);} .airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);}
.airspace-dot-UTM{width:110px;} .airspace-dot-UTM{width:110px;}
.airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;} .airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;}
@ -279,6 +280,7 @@ body{overflow-x:hidden;}
} }
@media (min-width:769px) and (max-width:1024px){ @media (min-width:769px) and (max-width:1024px){
.airspace-transition-section{--uam-center-x:82%;--uam-center-y:50%;}.airspace-dot-image{width:min(58vw,620px);}
.airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);} .airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);}
.airspace-dot-UTM{width:280px;} .airspace-dot-UTM{width:280px;}
.airspace-uam-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;} .airspace-uam-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;}
@ -289,8 +291,7 @@ body{overflow-x:hidden;}
} }
@keyframes UTMShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}} @keyframes UTMShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}
@keyframes float-UTM{0%{transform:translateY(0px);}48%{transform:translateY(-1px);}100%{transform:translateY(0px);}} @keyframes uamAircraftFloat{0%,100%{transform:translateY(10px) rotate(.3deg);}50%{transform:translateY(-28px) rotate(-.3deg);}}
/* ─── SOLUTION ─── */ /* ─── SOLUTION ─── */
.main-solution-section { position: relative; height: auto; min-height: 100dvh; overflow: visible; padding: 120px 8vw 160px; background: linear-gradient(180deg,#ffffff 0%,#f7f9ff 52%,#ffffff 100%); } .main-solution-section { position: relative; height: auto; min-height: 100dvh; overflow: visible; padding: 120px 8vw 160px; background: linear-gradient(180deg,#ffffff 0%,#f7f9ff 52%,#ffffff 100%); }

Write Preview
Loading…
Cancel
Save