|
|
|
|
@ -1,12 +1,12 @@
|
|
|
|
|
import { useRef, useState } from "react"; |
|
|
|
|
import { motion, useInView, AnimatePresence } from "framer-motion"; |
|
|
|
|
import { Radio, Puzzle, Network, Expand, Shield, ArrowUpRight } from "lucide-react"; |
|
|
|
|
import { Radio, Puzzle, Network, Expand, Shield, ArrowUpRight, Package, Wind, AlertTriangle, Ship, Plane } from "lucide-react"; |
|
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
|
|
|
|
|
const SOLUTION_NAV = [ |
|
|
|
|
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, |
|
|
|
|
{ label: "IBE", to: "/solution/ibe" }, |
|
|
|
|
{ label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, |
|
|
|
|
{ label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, |
|
|
|
|
{ label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, |
|
|
|
|
]; |
|
|
|
|
@ -19,6 +19,21 @@ const FEATURES = [
|
|
|
|
|
{ icon: Shield, label: "안정적 서비스" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const STATS = [ |
|
|
|
|
{ value: "90%+", label: "운항 데이터 정확도" }, |
|
|
|
|
{ value: "10분", label: "이내 실시간 처리" }, |
|
|
|
|
{ value: "24/7", label: "무중단 모니터링" }, |
|
|
|
|
{ value: "N+1", label: "다중 비행체 동시 관제" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const DOMAINS = [ |
|
|
|
|
{ icon: Package, label: "드론 물류·배송 관제", desc: "도심 및 광역 드론 배송 경로 최적화 및 실시간 위치 관제" }, |
|
|
|
|
{ icon: Plane, label: "UAM 도심항공 모빌리티", desc: "미래형 도심 항공 교통 인프라 연계 관제 시스템" }, |
|
|
|
|
{ icon: Wind, label: "무인기 환경측정", desc: "대기질·기상 데이터 수집 드론 운용 및 모니터링" }, |
|
|
|
|
{ icon: AlertTriangle, label: "안티드론 보안관제", desc: "비인가 드론 탐지·추적 및 무력화 대응 지원" }, |
|
|
|
|
{ icon: Ship, label: "선박·항공기 통합관제", desc: "해상·공중 복합 식별정보 수집 및 통합 상황관리" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const FUNCTIONS = [ |
|
|
|
|
{ num: "01", img: "./images/s1-01.jpg", label: "비행가능 지역 및 공역표출" }, |
|
|
|
|
{ num: "02", img: "./images/s1-02.jpg", label: "비행체 위치 표출" }, |
|
|
|
|
@ -28,6 +43,14 @@ const FUNCTIONS = [
|
|
|
|
|
{ num: "06", img: "./images/s1-06.jpg", label: "비정상 상황의 경보 표출" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const FLOW = [ |
|
|
|
|
{ step: "01", label: "비행체 식별", desc: "항공기·드론·선박 실시간 신호 수집" }, |
|
|
|
|
{ step: "02", label: "데이터 수집", desc: "위치·속도·고도·식별코드 통합 처리" }, |
|
|
|
|
{ step: "03", label: "관제 서버", desc: "통합 관제 서버 분석 및 상황 판단" }, |
|
|
|
|
{ step: "04", label: "모니터링", desc: "관제사 화면 실시간 현황 표출" }, |
|
|
|
|
{ step: "05", label: "경보·대응", desc: "이상 상황 감지 즉시 경보 및 대응" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
|
|
|
|
|
|
function RevealText({ children, delay = 0, className }) { |
|
|
|
|
@ -60,10 +83,16 @@ function FlightControlPage() {
|
|
|
|
|
const [activeIdx, setActiveIdx] = useState(0); |
|
|
|
|
|
|
|
|
|
const overviewRef = useRef(null); |
|
|
|
|
const statsRef = useRef(null); |
|
|
|
|
const domainsRef = useRef(null); |
|
|
|
|
const funcRef = useRef(null); |
|
|
|
|
const flowRef = useRef(null); |
|
|
|
|
|
|
|
|
|
const overviewInView = useInView(overviewRef, { once: true, margin: "-60px" }); |
|
|
|
|
const statsInView = useInView(statsRef, { once: true, margin: "-60px" }); |
|
|
|
|
const domainsInView = useInView(domainsRef, { once: true, margin: "-60px" }); |
|
|
|
|
const funcInView = useInView(funcRef, { once: true, margin: "-80px" }); |
|
|
|
|
const flowInView = useInView(flowRef, { once: true, margin: "-60px" }); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<article ref={ref}> |
|
|
|
|
@ -75,20 +104,17 @@ function FlightControlPage() {
|
|
|
|
|
<section className="fc-overview" ref={overviewRef}> |
|
|
|
|
<motion.img src="./images/test111.png" alt="" className="fc-overview__bg" initial={{ scale: 1.08 }} animate={overviewInView ? { scale: 1 } : {}} transition={{ duration: 2.2, ease: [0.22, 1, 0.36, 1] }} /> |
|
|
|
|
<div className="fc-overview__overlay" /> |
|
|
|
|
|
|
|
|
|
<div className="fc-overview__content"> |
|
|
|
|
{overviewInView && ( |
|
|
|
|
<RevealText delay={0.1} className="fc-eyebrow fc-eyebrow--light"> |
|
|
|
|
비행상황 관리 시스템 |
|
|
|
|
</RevealText> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
{overviewInView && ( |
|
|
|
|
<div className="fc-overview__title"> |
|
|
|
|
<StaggerWords text="항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템" delay={0.18} className="fc-overview__title-inner" /> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
<motion.div className="fc-overview__bottom" initial={{ opacity: 0, filter: "blur(8px)", y: 12 }} animate={overviewInView ? { opacity: 1, filter: "blur(0px)", y: 0 } : {}} transition={{ duration: 0.85, ease, delay: 0.85 }}> |
|
|
|
|
<p className="fc-overview__sub">각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한 환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.</p> |
|
|
|
|
<div className="fc-badges"> |
|
|
|
|
@ -103,12 +129,39 @@ function FlightControlPage() {
|
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* 2. 주요기능 */} |
|
|
|
|
{/* 2. 수치 지표 */} |
|
|
|
|
<section className="fc-stats" ref={statsRef}> |
|
|
|
|
{STATS.map(({ value, label }, i) => ( |
|
|
|
|
<motion.div key={label} className="fc-stat-item" initial={{ opacity: 0, y: 24 }} animate={statsInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.55, ease, delay: 0.08 * i }}> |
|
|
|
|
<span className="fc-stat-item__value">{value}</span> |
|
|
|
|
<span className="fc-stat-item__label">{label}</span> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* 3. 적용 분야 */} |
|
|
|
|
<section className="fc-domains" ref={domainsRef}> |
|
|
|
|
<motion.span className="fc-section-title" initial={{ opacity: 0, y: 20 }} animate={domainsInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
적용 분야 |
|
|
|
|
</motion.span> |
|
|
|
|
<div className="fc-domains__grid"> |
|
|
|
|
{DOMAINS.map(({ icon: Icon, label, desc }, i) => ( |
|
|
|
|
<motion.div key={label} className="fc-domain-card" initial={{ opacity: 0, y: 24 }} animate={domainsInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.55, ease, delay: 0.07 * i }} whileHover={{ y: -4, transition: { duration: 0.2 } }}> |
|
|
|
|
<div className="fc-domain-card__icon"> |
|
|
|
|
<Icon size={22} strokeWidth={1.5} /> |
|
|
|
|
</div> |
|
|
|
|
<span className="fc-domain-card__label">{label}</span> |
|
|
|
|
<p className="fc-domain-card__desc">{desc}</p> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* 4. 주요기능 */} |
|
|
|
|
<section className="fc-functions" ref={funcRef}> |
|
|
|
|
<motion.span className="fc-func-section-title" initial={{ opacity: 0, y: 20 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
<motion.span className="fc-section-title" initial={{ opacity: 0, y: 20 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
주요기능 |
|
|
|
|
</motion.span> |
|
|
|
|
|
|
|
|
|
<div className="fc-functions__body"> |
|
|
|
|
<ul className="fc-func-list"> |
|
|
|
|
{FUNCTIONS.map(({ num, label }, i) => ( |
|
|
|
|
@ -122,7 +175,6 @@ function FlightControlPage() {
|
|
|
|
|
</motion.li> |
|
|
|
|
))} |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<div className="fc-func-display"> |
|
|
|
|
<AnimatePresence mode="wait"> |
|
|
|
|
<motion.div key={activeIdx} className="fc-func-display__inner" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.35, ease: "easeInOut" }}> |
|
|
|
|
@ -140,6 +192,23 @@ function FlightControlPage() {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
{/* 5. 시스템 구성 흐름 */} |
|
|
|
|
<section className="fc-flow" ref={flowRef}> |
|
|
|
|
<motion.span className="fc-section-title" initial={{ opacity: 0, y: 20 }} animate={flowInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
시스템 구성 |
|
|
|
|
</motion.span> |
|
|
|
|
<div className="fc-flow__row"> |
|
|
|
|
{FLOW.map(({ step, label, desc }, i) => ( |
|
|
|
|
<motion.div key={step} className="fc-flow__item" initial={{ opacity: 0, y: 20 }} animate={flowInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.5, ease, delay: 0.08 * i }}> |
|
|
|
|
<span className="fc-flow__step">{step}</span> |
|
|
|
|
<span className="fc-flow__label">{label}</span> |
|
|
|
|
<p className="fc-flow__desc">{desc}</p> |
|
|
|
|
{i < FLOW.length - 1 && <motion.div className="fc-flow__arrow" initial={{ opacity: 0, scaleX: 0 }} animate={flowInView ? { opacity: 1, scaleX: 1 } : {}} transition={{ duration: 0.4, ease, delay: 0.08 * i + 0.3 }} />} |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
|
