|
|
|
|
@ -1,53 +1,120 @@
|
|
|
|
|
import { useRef, useState } from "react"; |
|
|
|
|
import { motion, useInView, AnimatePresence } from "framer-motion"; |
|
|
|
|
import { Radio, Puzzle, Network, Expand, Shield } from "lucide-react"; |
|
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
|
|
|
|
|
function FlightControlPage() { |
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
const SOLUTION_NAV = [ |
|
|
|
|
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, |
|
|
|
|
{ label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, |
|
|
|
|
{ label: "IBE", to: "/solution/ibe" }, |
|
|
|
|
{ label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, |
|
|
|
|
{ label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const FEATURES = [ |
|
|
|
|
{ icon: Radio, label: "실시간 모니터링" }, |
|
|
|
|
{ icon: Puzzle, label: "손쉬운 연계모듈" }, |
|
|
|
|
{ icon: Network, label: "네트워크 기반 방식" }, |
|
|
|
|
{ icon: Expand, label: "확장성 고려" }, |
|
|
|
|
{ icon: Shield, label: "안정적 서비스" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const FUNCTIONS = [ |
|
|
|
|
{ num: "01", img: "./images/s1-01.jpg", label: "비행가능 지역 및 공역표출" }, |
|
|
|
|
{ num: "02", img: "./images/s1-02.jpg", label: "비행체 위치 표출" }, |
|
|
|
|
{ num: "03", img: "./images/s1-03.jpg", label: "항공기 비행경로 및 히스토리 표출" }, |
|
|
|
|
{ num: "04", img: "./images/s1-04.jpg", label: "항공기 비행정보 표출" }, |
|
|
|
|
{ num: "05", img: "./images/s1-05.jpg", label: "비행계획서 조회" }, |
|
|
|
|
{ num: "06", img: "./images/s1-06.jpg", label: "비정상 상황의 경보 표출" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
|
|
|
|
|
|
function FlightControlPage() { |
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
|
|
|
|
|
const overviewRef = useRef(null); |
|
|
|
|
const funcRef = useRef(null); |
|
|
|
|
|
|
|
|
|
const overviewInView = useInView(overviewRef, { once: true, margin: "-80px" }); |
|
|
|
|
const funcInView = useInView(funcRef, { once: true, margin: "-80px" }); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<article ref={ref}> |
|
|
|
|
<SubHero |
|
|
|
|
label="SOLUTION" |
|
|
|
|
title={ |
|
|
|
|
<> |
|
|
|
|
{/* <span style={{ color: "#111" }}>실시간 운항 관제</span> |
|
|
|
|
<br /> */} |
|
|
|
|
<em>Flight Management</em> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
// desc="항공기 운항 정보를 실시간으로 수집·분석하여 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다." |
|
|
|
|
navItems={SOLUTION_NAV} |
|
|
|
|
/> |
|
|
|
|
<SubHero label="SOLUTION" title={<em>Flight Management</em>} navItems={SOLUTION_NAV} /> |
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
|
<section className="sub-section"> |
|
|
|
|
<span className="sub-section-eyebrow sub-fade-in">비행상황관리 시스템</span> |
|
|
|
|
{/* <main className="sub-page"> |
|
|
|
|
<section className="sub-visual"> |
|
|
|
|
<div className="inner"> |
|
|
|
|
<h2>비행상황관리 시스템</h2> |
|
|
|
|
<p>Flight Situation Management System</p> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
{/* ════════════════════════════ |
|
|
|
|
1. 개요 + 특징 배지 |
|
|
|
|
════════════════════════════ */} |
|
|
|
|
<section className="fc-overview" ref={overviewRef}> |
|
|
|
|
{/* 텍스트 + 배지 */} |
|
|
|
|
<motion.div className="fc-overview__text" initial={{ opacity: 0, x: -36 }} animate={overviewInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.75, ease }}> |
|
|
|
|
<span className="fc-eyebrow">비행상황 관리 시스템</span> |
|
|
|
|
<p className="fc-overview__desc">항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템</p> |
|
|
|
|
<p className="fc-overview__desc fc-overview__desc--sub">각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한 환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.</p> |
|
|
|
|
|
|
|
|
|
{/* 특징 배지 */} |
|
|
|
|
<div className="fc-badges"> |
|
|
|
|
{FEATURES.map(({ icon: Icon, label }, i) => ( |
|
|
|
|
<motion.span key={label} className="fc-badge" initial={{ opacity: 0, y: 12 }} animate={overviewInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.45, ease, delay: 0.35 + i * 0.07 }}> |
|
|
|
|
<Icon size={13} strokeWidth={2} /> |
|
|
|
|
{label} |
|
|
|
|
</motion.span> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</motion.div> |
|
|
|
|
|
|
|
|
|
<section className="sub-content-section"> |
|
|
|
|
<div className="inner"> |
|
|
|
|
<h3>실시간 비행 상황 통합 관제</h3> |
|
|
|
|
<p> |
|
|
|
|
항공기 운항 정보를 실시간으로 수집·분석하여 |
|
|
|
|
<br /> |
|
|
|
|
안전한 비행 운영을 지원하는 통합 관제 솔루션입니다. |
|
|
|
|
</p> |
|
|
|
|
{/* 이미지 패널 */} |
|
|
|
|
<motion.div className="fc-overview__panel" initial={{ opacity: 0, x: 48 }} animate={overviewInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.85, ease, delay: 0.1 }}> |
|
|
|
|
<div className="fc-overview__panel-inner"> |
|
|
|
|
<img src="./images/solution01.png" alt="비행상황관리 시스템 화면" className="fc-overview__img" /> |
|
|
|
|
</div> |
|
|
|
|
</motion.div> |
|
|
|
|
</section> |
|
|
|
|
</main> */} |
|
|
|
|
|
|
|
|
|
{/* ════════════════════════════ |
|
|
|
|
2. 주요기능 카드 |
|
|
|
|
════════════════════════════ */} |
|
|
|
|
<section className="fc-functions" ref={funcRef}> |
|
|
|
|
<motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 20 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
|
비행상황관리 시스템 주요기능 |
|
|
|
|
</motion.span> |
|
|
|
|
|
|
|
|
|
<div className="fc-functions__grid"> |
|
|
|
|
{FUNCTIONS.map(({ num, img, label }, i) => ( |
|
|
|
|
<motion.div key={num} className="fc-func-card" initial={{ opacity: 0, y: 28 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.55, ease, delay: 0.06 * i }} whileHover="hover"> |
|
|
|
|
<div className="fc-func-card__img-wrap"> |
|
|
|
|
<motion.img |
|
|
|
|
src={img} |
|
|
|
|
alt={label} |
|
|
|
|
className="fc-func-card__img" |
|
|
|
|
variants={{ |
|
|
|
|
hover: { scale: 1.05, transition: { duration: 0.4, ease } }, |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className="fc-func-card__body"> |
|
|
|
|
<span className="fc-func-card__num">{num}</span> |
|
|
|
|
<span className="fc-func-card__label">{label}</span> |
|
|
|
|
</div> |
|
|
|
|
<motion.div |
|
|
|
|
className="fc-func-card__overlay" |
|
|
|
|
variants={{ |
|
|
|
|
hover: { opacity: 1, transition: { duration: 0.25 } }, |
|
|
|
|
}} |
|
|
|
|
initial={{ opacity: 0 }} |
|
|
|
|
> |
|
|
|
|
<span className="fc-func-card__overlay-num">{num}</span> |
|
|
|
|
<span className="fc-func-card__overlay-label">{label}</span> |
|
|
|
|
</motion.div> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
