From e92b916624ac86e3c516516f870f7b454930227c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?= Date: Mon, 11 May 2026 17:33:44 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EB=89=B4=EC=8A=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/MainNews.jsx | 109 +++++++++++++++++++++++++++++++ src/css/main.css | 22 ++++++- src/pages/MainPage.jsx | 2 + 3 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 src/components/main/MainNews.jsx diff --git a/src/components/main/MainNews.jsx b/src/components/main/MainNews.jsx new file mode 100644 index 0000000..5cfc5ee --- /dev/null +++ b/src/components/main/MainNews.jsx @@ -0,0 +1,109 @@ +import { useEffect, useRef } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; + +gsap.registerPlugin(ScrollTrigger); + +function MainNews() { + const sectionRef = useRef(null); + const headRef = useRef(null); + const itemsRef = useRef([]); + + const news = [ + { + date: "2025.00.00", + title: "PAL Networks, 항공 IT 서비스 고도화 추진", + desc: "항공 운항 관리와 예약 플랫폼을 연결하는 통합 서비스 환경을 확대합니다.", + }, + { + date: "2025.00.00", + title: "스마트 관광 예약 플랫폼 기능 확장", + desc: "관광 상품, 예약 데이터, 사용자 경험을 하나의 흐름으로 개선합니다.", + }, + { + date: "2025.00.00", + title: "클라우드 기반 항공 서비스 운영 환경 구축", + desc: "안정적인 공공 클라우드 인프라를 기반으로 서비스 운영 효율을 높입니다.", + }, + ]; + + useEffect(() => { + const ctx = gsap.context(() => { + gsap.set(headRef.current, { opacity: 0, y: 48 }); + gsap.set(itemsRef.current, { opacity: 0, y: 36 }); + + gsap + .timeline({ + scrollTrigger: { + trigger: sectionRef.current, + start: "top 70%", + end: "top 30%", + scrub: 1, + }, + }) + .to(headRef.current, { + opacity: 1, + y: 0, + duration: 0.8, + ease: "power2.out", + }) + .to( + itemsRef.current, + { + opacity: 1, + y: 0, + stagger: 0.14, + duration: 0.75, + ease: "power2.out", + }, + "-=0.35", + ); + }, sectionRef); + + return () => ctx.revert(); + }, []); + + return ( +
+
+
+

INSIDE PAL

+

+ 새로운 항공 서비스와 +
+ 기술 소식 +

+

+ 항공 IT 플랫폼 구축, 서비스 운영, 기술 개발 관련 소식을 전합니다. +

+
+ +
+ {news.map((item, index) => ( +
{ + itemsRef.current[index] = el; + }} + > +
+ NEWS + {item.date} +
+ +
+

{item.title}

+

{item.desc}

+
+ +
↗
+
+ ))} +
+
+
+ ); +} + +export default MainNews; diff --git a/src/css/main.css b/src/css/main.css index 8152f50..2fbfa4b 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -268,4 +268,24 @@ body{overflow-x:hidden;} @media (max-width:1024px){.main-solution-section{padding:110px 6vw 96px;}.main-solution-bg-circle{right:-32vw;top:-28vw;width:90vw;height:90vw;}.main-solution-grid{grid-template-columns:repeat(2,1fr);}.main-solution-card{min-height:220px;}} -@media (max-width:768px){.main-solution-section{padding:88px 6vw 80px;}.main-solution-bg-circle{right:-48vw;top:-30vw;width:110vw;height:110vw;opacity:.88;}.main-solution-arrow{margin-bottom:34px;font-size:30px;}.main-solution-head{margin-bottom:38px;}.main-solution-title{font-size:clamp(36px,10vw,54px);line-height:1.02;}.main-solution-desc{font-size:14px;line-height:1.75;}.main-solution-grid{grid-template-columns:1fr;gap:14px;}.main-solution-card{min-height:190px;padding:24px 22px;border-radius:24px;}.main-solution-card::before{left:22px;top:24px;width:52px;height:52px;}.main-solution-card::after{left:22px;right:22px;bottom:24px;height:72px;}} \ No newline at end of file +@media (max-width:768px){.main-solution-section{padding:88px 6vw 80px;}.main-solution-bg-circle{right:-48vw;top:-30vw;width:110vw;height:110vw;opacity:.88;}.main-solution-arrow{margin-bottom:34px;font-size:30px;}.main-solution-head{margin-bottom:38px;}.main-solution-title{font-size:clamp(36px,10vw,54px);line-height:1.02;}.main-solution-desc{font-size:14px;line-height:1.75;}.main-solution-grid{grid-template-columns:1fr;gap:14px;}.main-solution-card{min-height:190px;padding:24px 22px;border-radius:24px;}.main-solution-card::before{left:22px;top:24px;width:52px;height:52px;}.main-solution-card::after{left:22px;right:22px;bottom:24px;height:72px;}} + +/* News */ +.main-news-section{position:relative;min-height:100vh;padding:130px 8vw;background:#ffffff;overflow:hidden;} +.main-news-section::before{content:"";position:absolute;left:-18vw;bottom:-24vw;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle,rgba(58,64,129,.08),transparent 70%);filter:blur(18px);pointer-events:none;} +.main-news-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.35fr;gap:80px;align-items:start;} +.main-news-head{position:sticky;top:140px;} +.main-news-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;} +.main-news-title{margin:0;font-size:clamp(34px,4vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.06em;color:#10142b;} +.main-news-desc{margin:24px 0 0;max-width:420px;font-size:16px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.58);word-break:keep-all;} +.main-news-list{border-top:1px solid rgba(58,64,129,.16);} +.main-news-item{position:relative;display:grid;grid-template-columns:150px 1fr 42px;gap:34px;align-items:center;padding:34px 0;border-bottom:1px solid rgba(58,64,129,.16);cursor:pointer;transition:padding .35s ease,background .35s ease;} +.main-news-item:hover{padding-left:18px;background:linear-gradient(90deg,rgba(58,64,129,.045),transparent 70%);} +.main-news-meta span{display:block;margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.18em;color:#3a4081;} +.main-news-meta em{font-style:normal;font-size:14px;font-weight:600;color:rgba(16,20,43,.42);} +.main-news-content h3{margin:0 0 12px;font-size:25px;font-weight:800;line-height:1.35;letter-spacing:-.04em;color:#10142b;word-break:keep-all;} +.main-news-content p{margin:0;font-size:15px;line-height:1.75;font-weight:500;color:rgba(16,20,43,.56);word-break:keep-all;} +.main-news-arrow{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(58,64,129,.16);color:#3a4081;font-size:18px;transition:transform .35s ease,background .35s ease,color .35s ease;} +.main-news-item:hover .main-news-arrow{transform:translate(4px,-4px);background:#3a4081;color:#ffffff;} +@media (max-width:1024px){.main-news-section{padding:110px 6vw;}.main-news-inner{grid-template-columns:1fr;gap:54px;}.main-news-head{position:relative;top:auto;}.main-news-item{grid-template-columns:130px 1fr 40px;}} +@media (max-width:768px){.main-news-section{min-height:auto;padding:90px 6vw;}.main-news-title{font-size:clamp(36px,10vw,52px);}.main-news-item{grid-template-columns:1fr;gap:14px;padding:28px 0;}.main-news-item:hover{padding-left:0;background:transparent;}.main-news-arrow{width:38px;height:38px;}.main-news-content h3{font-size:21px;}.main-news-content p{font-size:14px;}} \ No newline at end of file diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index e98fb28..6b476c4 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -2,6 +2,7 @@ import MainVisual from "../components/main/MainVisual"; import MainUtm from "../components/main/MainUtm"; import MainUam from "../components/main/MainUam"; import MainSolution from "../components/main/MainSolution"; +import MainNews from "../components/main/MainNews"; function MainPage() { return ( @@ -10,6 +11,7 @@ function MainPage() { + ); }