|
|
|
@ -1,12 +1,12 @@ |
|
|
|
import { useRef, useState } from "react"; |
|
|
|
import { useRef, useState } from "react"; |
|
|
|
import { motion, useInView, AnimatePresence } from "framer-motion"; |
|
|
|
import { motion, useInView, AnimatePresence, useMotionValue, useTransform, useSpring } from "framer-motion"; |
|
|
|
import { Radio, Puzzle, Network, Expand, Shield } from "lucide-react"; |
|
|
|
import { Radio, Puzzle, Network, Expand, Shield, ArrowUpRight } from "lucide-react"; |
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
|
|
|
|
|
|
|
const SOLUTION_NAV = [ |
|
|
|
const SOLUTION_NAV = [ |
|
|
|
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, |
|
|
|
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, |
|
|
|
{ label: "IBE", to: "/solution/ibe" }, |
|
|
|
{ label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, |
|
|
|
{ label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, |
|
|
|
{ label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" }, |
|
|
|
{ label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, |
|
|
|
{ label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, |
|
|
|
]; |
|
|
|
]; |
|
|
|
@ -30,87 +30,138 @@ const FUNCTIONS = [ |
|
|
|
|
|
|
|
|
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function RevealText({ children, delay = 0, className }) { |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<div style={{ overflow: "hidden" }}> |
|
|
|
|
|
|
|
<motion.div className={className} initial={{ y: "105%", opacity: 0 }} animate={{ y: "0%", opacity: 1 }} transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1], delay }}> |
|
|
|
|
|
|
|
{children} |
|
|
|
|
|
|
|
</motion.div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function StaggerWords({ text, delay = 0, className }) { |
|
|
|
|
|
|
|
const words = text.split(" "); |
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
<span className={className} style={{ display: "flex", flexWrap: "wrap", gap: "0 .3em" }}> |
|
|
|
|
|
|
|
{words.map((word, i) => ( |
|
|
|
|
|
|
|
<span key={i} style={{ overflow: "hidden", display: "inline-block" }}> |
|
|
|
|
|
|
|
<motion.span style={{ display: "inline-block" }} initial={{ y: "110%", opacity: 0 }} animate={{ y: "0%", opacity: 1 }} transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1], delay: delay + i * 0.055 }}> |
|
|
|
|
|
|
|
{word} |
|
|
|
|
|
|
|
</motion.span> |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</span> |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function FlightControlPage() { |
|
|
|
function FlightControlPage() { |
|
|
|
const ref = useFadeIn(); |
|
|
|
const ref = useFadeIn(); |
|
|
|
|
|
|
|
const [activeIdx, setActiveIdx] = useState(0); |
|
|
|
|
|
|
|
|
|
|
|
const overviewRef = useRef(null); |
|
|
|
const overviewRef = useRef(null); |
|
|
|
const funcRef = useRef(null); |
|
|
|
const funcRef = useRef(null); |
|
|
|
|
|
|
|
|
|
|
|
const overviewInView = useInView(overviewRef, { once: true, margin: "-80px" }); |
|
|
|
const overviewInView = useInView(overviewRef, { once: true, margin: "-60px" }); |
|
|
|
const funcInView = useInView(funcRef, { once: true, margin: "-80px" }); |
|
|
|
const funcInView = useInView(funcRef, { once: true, margin: "-80px" }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 패럴랙스 */ |
|
|
|
|
|
|
|
const mouseX = useMotionValue(0); |
|
|
|
|
|
|
|
const mouseY = useMotionValue(0); |
|
|
|
|
|
|
|
const springX = useSpring(mouseX, { stiffness: 60, damping: 20 }); |
|
|
|
|
|
|
|
const springY = useSpring(mouseY, { stiffness: 60, damping: 20 }); |
|
|
|
|
|
|
|
const bgX = useTransform(springX, [-1, 1], ["-2%", "2%"]); |
|
|
|
|
|
|
|
const bgY = useTransform(springY, [-1, 1], ["-2%", "2%"]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleMouseMove(e) { |
|
|
|
|
|
|
|
const rect = e.currentTarget.getBoundingClientRect(); |
|
|
|
|
|
|
|
mouseX.set(((e.clientX - rect.left) / rect.width) * 2 - 1); |
|
|
|
|
|
|
|
mouseY.set(((e.clientY - rect.top) / rect.height) * 2 - 1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function handleMouseLeave() { |
|
|
|
|
|
|
|
mouseX.set(0); |
|
|
|
|
|
|
|
mouseY.set(0); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<article ref={ref}> |
|
|
|
<article ref={ref}> |
|
|
|
<SubHero label="SOLUTION" title={<em>Flight Management</em>} navItems={SOLUTION_NAV} /> |
|
|
|
<SubHero label="SOLUTION" title={<em>Flight Management</em>} navItems={SOLUTION_NAV} /> |
|
|
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
<div className="sub-content"> |
|
|
|
<div className="inner-wrap"> |
|
|
|
<div className="inner-wrap"> |
|
|
|
{/* ════════════════════════════ |
|
|
|
{/* 1. 개요 */} |
|
|
|
1. 개요 + 특징 배지 |
|
|
|
<section className="fc-overview" ref={overviewRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}> |
|
|
|
════════════════════════════ */} |
|
|
|
<motion.img src="./images/test111.png" alt="" className="fc-overview__bg" style={{ x: bgX, y: bgY, scale: 1.06 }} /> |
|
|
|
<section className="fc-overview" ref={overviewRef}> |
|
|
|
<div className="fc-overview__overlay" /> |
|
|
|
{/* 텍스트 + 배지 */} |
|
|
|
|
|
|
|
<motion.div className="fc-overview__text" initial={{ opacity: 0, x: -36 }} animate={overviewInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.75, ease }}> |
|
|
|
<div className="fc-overview__content"> |
|
|
|
<span className="fc-eyebrow">비행상황 관리 시스템</span> |
|
|
|
{/* eyebrow + 보더라인 */} |
|
|
|
<p className="fc-overview__desc">항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템</p> |
|
|
|
<div className="fc-overview__eyebrow-wrap"> |
|
|
|
<p className="fc-overview__desc fc-overview__desc--sub">각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한 환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.</p> |
|
|
|
{overviewInView && <motion.div className="fc-overview__eyebrow-line" initial={{ scaleY: 0 }} animate={{ scaleY: 1 }} transition={{ duration: 0.5, ease, delay: 0.05 }} />} |
|
|
|
|
|
|
|
{overviewInView && ( |
|
|
|
{/* 특징 배지 */} |
|
|
|
<RevealText delay={0.1} className="fc-eyebrow fc-eyebrow--light"> |
|
|
|
|
|
|
|
비행상황 관리 시스템 |
|
|
|
|
|
|
|
</RevealText> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* 타이틀 */} |
|
|
|
|
|
|
|
{overviewInView && ( |
|
|
|
|
|
|
|
<div className="fc-overview__title"> |
|
|
|
|
|
|
|
<StaggerWords text="항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템" delay={0.15} 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.8 }}> |
|
|
|
|
|
|
|
<p className="fc-overview__sub">각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한 환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.</p> |
|
|
|
<div className="fc-badges"> |
|
|
|
<div className="fc-badges"> |
|
|
|
{FEATURES.map(({ icon: Icon, label }, i) => ( |
|
|
|
{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 }}> |
|
|
|
<motion.span key={label} className="fc-badge fc-badge--light" initial={{ opacity: 0, y: 8 }} animate={overviewInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.4, ease, delay: 0.9 + i * 0.07 }}> |
|
|
|
<Icon size={13} strokeWidth={2} /> |
|
|
|
<Icon size={12} strokeWidth={2} /> |
|
|
|
{label} |
|
|
|
{label} |
|
|
|
</motion.span> |
|
|
|
</motion.span> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</motion.div> |
|
|
|
</motion.div> |
|
|
|
|
|
|
|
|
|
|
|
{/* 이미지 패널 */} |
|
|
|
|
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</motion.div> |
|
|
|
|
|
|
|
</section> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
{/* ════════════════════════════ |
|
|
|
{/* 2. 주요기능 */} |
|
|
|
2. 주요기능 카드 |
|
|
|
|
|
|
|
════════════════════════════ */} |
|
|
|
|
|
|
|
<section className="fc-functions" ref={funcRef}> |
|
|
|
<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 className="fc-eyebrow" initial={{ opacity: 0, y: 20 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> |
|
|
|
비행상황관리 시스템 주요기능 |
|
|
|
주요기능 |
|
|
|
</motion.span> |
|
|
|
</motion.span> |
|
|
|
|
|
|
|
|
|
|
|
<div className="fc-functions__grid"> |
|
|
|
<div className="fc-functions__body"> |
|
|
|
{FUNCTIONS.map(({ num, img, label }, i) => ( |
|
|
|
<ul className="fc-func-list"> |
|
|
|
<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"> |
|
|
|
{FUNCTIONS.map(({ num, label }, i) => ( |
|
|
|
<div className="fc-func-card__img-wrap"> |
|
|
|
<motion.li key={num} className={`fc-func-item${activeIdx === i ? " is-active" : ""}`} onMouseEnter={() => setActiveIdx(i)} initial={{ opacity: 0, y: 16 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.5, ease, delay: 0.05 * i }}> |
|
|
|
<motion.img |
|
|
|
<span className="fc-func-item__num">{num}</span> |
|
|
|
src={img} |
|
|
|
<span className="fc-func-item__label">{label}</span> |
|
|
|
alt={label} |
|
|
|
<motion.span className="fc-func-item__arrow" initial={{ opacity: 0, x: -6 }} animate={activeIdx === i ? { opacity: 1, x: 0 } : { opacity: 0, x: -6 }} transition={{ duration: 0.2 }}> |
|
|
|
className="fc-func-card__img" |
|
|
|
<ArrowUpRight size={16} strokeWidth={1.5} /> |
|
|
|
variants={{ |
|
|
|
</motion.span> |
|
|
|
hover: { scale: 1.05, transition: { duration: 0.4, ease } }, |
|
|
|
<motion.div className="fc-func-item__line" animate={{ scaleX: activeIdx === i ? 1 : 0 }} transition={{ duration: 0.35, ease }} /> |
|
|
|
}} |
|
|
|
</motion.li> |
|
|
|
/> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</ul> |
|
|
|
<div className="fc-func-card__body"> |
|
|
|
|
|
|
|
<span className="fc-func-card__num">{num}</span> |
|
|
|
<div className="fc-func-display"> |
|
|
|
<span className="fc-func-card__label">{label}</span> |
|
|
|
<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" }}> |
|
|
|
|
|
|
|
<img src={FUNCTIONS[activeIdx].img} alt={FUNCTIONS[activeIdx].label} className="fc-func-display__img" /> |
|
|
|
|
|
|
|
<div className="fc-func-display__caption"> |
|
|
|
|
|
|
|
<motion.span key={`num-${activeIdx}`} className="fc-func-display__num" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25 }}> |
|
|
|
|
|
|
|
{FUNCTIONS[activeIdx].num} |
|
|
|
|
|
|
|
</motion.span> |
|
|
|
|
|
|
|
<motion.span key={`label-${activeIdx}`} className="fc-func-display__label" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.05 }}> |
|
|
|
|
|
|
|
{FUNCTIONS[activeIdx].label} |
|
|
|
|
|
|
|
</motion.span> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
</motion.div> |
|
|
|
</AnimatePresence> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
