diff --git a/src/components/main/MainUam.jsx b/src/components/main/MainUam.jsx index 04decd5..bbfe622 100644 --- a/src/components/main/MainUam.jsx +++ b/src/components/main/MainUam.jsx @@ -1,16 +1,16 @@ import { useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; -import UTMImg from "../../../public/images/UTM-silver.png"; +import uamImg from "../../../public/images/uam-silver.png"; gsap.registerPlugin(ScrollTrigger); -function MainUTM() { +function MainUam() { const sectionRef = useRef(null); const leftRef = useRef(null); const rightRef = useRef(null); const lineRef = useRef([]); const dotRef = useRef(null); - const UTMImageRef = useRef(null); + const uamImageRef = useRef(null); const canvasRef = useRef(null); const isMobile = window.innerWidth <= 768; @@ -130,8 +130,8 @@ function MainUTM() { opacity: 0, scale: 1, }); - gsap.set(".airspace-UTM-content", { opacity: 0, y: 36 }); - gsap.set(UTMImageRef.current, { opacity: 0 }); + gsap.set(".airspace-uam-content", { opacity: 0, y: 36 }); + gsap.set(uamImageRef.current, { opacity: 0 }); const tl = gsap.timeline({ scrollTrigger: { @@ -168,7 +168,7 @@ function MainUTM() { ease: "power2.inOut", }); - tl.to([".airspace-UTM-content", UTMImageRef.current], { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }, "-=0.35"); + tl.to([".airspace-uam-content", uamImageRef.current], { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }, "-=0.35"); }, sectionRef); return () => { @@ -189,8 +189,8 @@ function MainUTM() {

드론 하늘길에서

-
-

UTM SYSTEM

+
+

UAM SYSTEM

도심 항공 @@ -211,13 +211,13 @@ function MainUTM() {

-
- UTM Aircraft +
+ UAM Aircraft
-
-

UTM NETWORK

+
+

UAM NETWORK

Urban Air Mobility

도심 내 버티포트, 운항 경로, 항공 교통 데이터를
@@ -228,4 +228,4 @@ function MainUTM() { ); } -export default MainUTM; +export default MainUam; diff --git a/src/css/main.css b/src/css/main.css index 26b00a9..1bf8a60 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -230,7 +230,7 @@ body{overflow-x:hidden;} .airspace-panel, .airspace-lines, .airspace-moving-dot, -.airspace-UTM-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::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;} @@ -243,10 +243,10 @@ body{overflow-x:hidden;} .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::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;} -.airspace-UTM-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;} -.airspace-UTM-content p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.28em;color:rgba(255,255,255,.72);} -.airspace-UTM-content h2{margin:0 0 24px;font-size:clamp(54px,7vw,104px);font-weight:800;line-height:.92;letter-spacing:-.07em;color:#ffffff;} -.airspace-UTM-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{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 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(26,31,94,.28));animation:float-UTM 5s ease-in-out infinite;will-change:transform;} @@ -255,9 +255,9 @@ body{overflow-x:hidden;} @media (max-width:768px){ .airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);} .airspace-dot-UTM{width:110px;} - .airspace-UTM-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;} - .airspace-UTM-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;} - .airspace-UTM-content span{font-size:14px;line-height:1.7;word-break:keep-all;} + .airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;} + .airspace-uam-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;} + .airspace-uam-content span{font-size:14px;line-height:1.7;word-break:keep-all;} .airspace-dot-image img{width: 16px;height:16%} .airspace-dot-image{transform:translateX(-5%);} } @@ -265,9 +265,9 @@ body{overflow-x:hidden;} @media (min-width:769px) and (max-width:1024px){ .airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);} .airspace-dot-UTM{width:280px;} - .airspace-UTM-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;} - .airspace-UTM-content h2{font-size:clamp(44px,7vw,72px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;} - .airspace-UTM-content span{font-size:15px;line-height:1.7;word-break:keep-all;} + .airspace-uam-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;} + .airspace-uam-content h2{font-size:clamp(44px,7vw,72px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;} + .airspace-uam-content span{font-size:15px;line-height:1.7;word-break:keep-all;} .airspace-dot-image img{width:16px;height:auto;} .airspace-dot-image{transform:translateX(-6%);} } diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 90b7940..3002935 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,6 +1,6 @@ import MainVisual from "../components/main/MainVisual"; import MainUtm from "../components/main/MainUtm"; -import MainUTM from "../components/main/MainUTM"; +import MainUam from "../components/main/MainUam"; import MainSolution from "../components/main/MainSolution"; import MainNews from "../components/main/MainNews"; import MainContact from "../components/main/MainContact"; @@ -10,7 +10,7 @@ function MainPage() {
- + diff --git a/src/pages/contact/InquiryPage.jsx b/src/pages/contact/InquiryPage.jsx index 781218e..2e251da 100644 --- a/src/pages/contact/InquiryPage.jsx +++ b/src/pages/contact/InquiryPage.jsx @@ -5,7 +5,7 @@ function InquiryPage() { const ref = useFadeIn(); const CONTACT_NAV = [ { label: "문의하기", to: "/contact/inquiry" }, - { label: "채용정보", to: "/contact/inquiry" }, + { label: "채용정보", to: "/contact/recruit" }, ]; return (
diff --git a/src/pages/contact/RecruitPage.jsx b/src/pages/contact/RecruitPage.jsx index a8ed297..b97eb3a 100644 --- a/src/pages/contact/RecruitPage.jsx +++ b/src/pages/contact/RecruitPage.jsx @@ -5,7 +5,7 @@ function RecruitPage() { const ref = useFadeIn(); const CONTACT_NAV = [ { label: "문의하기", to: "/contact/inquiry" }, - { label: "채용정보", to: "/contact/inquiry" }, + { label: "채용정보", to: "/contact/recruit" }, ]; return (