palnetworks
/
pal-hom-2026
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix : 비행상황관리 시스템 태그 누락 수정

main
이시연 2 weeks ago
parent
d56c0f974c
commit
f0aed0ca4d
1 changed files with 208 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 242
      src/pages/solution/FlightControlPage.jsx

242
src/pages/solution/FlightControlPage.jsx
Unescape View File

@ -1,6 +1,13 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { motion, useInView, AnimatePresence } from "framer-motion"; import { motion, useInView, AnimatePresence } from "framer-motion";
import { Radio, Puzzle, Network, Expand, Shield, ArrowUpRight } 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";
import { useLanguage } from "../../context/LanguageContext"; import { useLanguage } from "../../context/LanguageContext";
@ -111,13 +118,21 @@ const FUNCTIONS_EN = [
img: "./images/s1-01.jpg", img: "./images/s1-01.jpg",
label: "Display of flyable areas and airspace", label: "Display of flyable areas and airspace",
}, },
{ num: "02", img: "./images/s1-02.jpg", label: "Display of vehicle location" }, {
num: "02",
img: "./images/s1-02.jpg",
label: "Display of vehicle location",
},
{ {
num: "03", num: "03",
img: "./images/s1-03.jpg", img: "./images/s1-03.jpg",
label: "Display of flight paths and history", label: "Display of flight paths and history",
}, },
{ num: "04", img: "./images/s1-04.jpg", label: "Display of flight information" }, {
num: "04",
img: "./images/s1-04.jpg",
label: "Display of flight information",
},
{ num: "05", img: "./images/s1-05.jpg", label: "Flight plan lookup" }, { num: "05", img: "./images/s1-05.jpg", label: "Flight plan lookup" },
{ {
num: "06", num: "06",
@ -181,7 +196,8 @@ const PAGE_TEXT = {
), ),
introDesc: ( introDesc: (
<> <>
항공기, 무인기, 선박, 지상 이동체의 실시간 정보를 통합 모니터링하고 <br /> 항공기, 무인기, 선박, 지상 이동체의 실시간 정보를 통합 모니터링하고{" "}
<br />
상황을 인식하여 신속하고 안전한 운영 의사결정을 지원합니다. 상황을 인식하여 신속하고 안전한 운영 의사결정을 지원합니다.
</> </>
), ),
@ -218,7 +234,8 @@ const PAGE_TEXT = {
), ),
introDesc: ( introDesc: (
<> <>
Integrated real-time monitoring of aircraft, drones, vessels, and ground vehicles <br /> Integrated real-time monitoring of aircraft, drones, vessels, and ground
vehicles <br />
supports situational awareness for fast, safe operational decisions. supports situational awareness for fast, safe operational decisions.
</> </>
), ),
@ -252,7 +269,12 @@ const ease = [0.22, 1, 0.36, 1];
function RevealText({ children, delay = 0, className }) { function RevealText({ children, delay = 0, className }) {
return ( return (
<div style={{ overflow: "hidden" }}> <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 }}> <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} {children}
</motion.div> </motion.div>
</div> </div>
@ -262,7 +284,10 @@ function RevealText({ children, delay = 0, className }) {
function StaggerWords({ text, delay = 0, className }) { function StaggerWords({ text, delay = 0, className }) {
const words = text.split(" "); const words = text.split(" ");
return ( return (
<span className={className} style={{ display: "flex", flexWrap: "wrap", gap: "0 .3em" }}> <span
className={className}
style={{ display: "flex", flexWrap: "wrap", gap: "0 .3em" }}
>
{words.map((word, i) => ( {words.map((word, i) => (
<span key={i} style={{ overflow: "hidden", display: "inline-block" }}> <span key={i} style={{ overflow: "hidden", display: "inline-block" }}>
<motion.span <motion.span
@ -319,7 +344,15 @@ function FlightControlPage() {
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">
@ -392,27 +425,59 @@ function FlightControlPage() {
{/* 개요 인트로 */} {/* 개요 인트로 */}
<section className="fc-intro" ref={introRef}> <section className="fc-intro" ref={introRef}>
<div className="fc-intro__left"> <div className="fc-intro__left">
<motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}> <motion.span
className="fc-eyebrow"
initial={{ opacity: 0, y: 16 }}
animate={introInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease }}
>
Overview Overview
</motion.span> </motion.span>
<motion.h2 className="fc-intro__title" initial={{ opacity: 0, y: 24 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.7, ease, delay: 0.1 }}> <motion.h2
className="fc-intro__title"
initial={{ opacity: 0, y: 24 }}
animate={introInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.7, ease, delay: 0.1 }}
>
{t.introTitle} {t.introTitle}
</motion.h2> </motion.h2>
<motion.p className="fc-intro__desc" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease, delay: 0.2 }}> <motion.p
className="fc-intro__desc"
initial={{ opacity: 0, y: 16 }}
animate={introInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease, delay: 0.2 }}
>
{t.introDesc} {t.introDesc}
</motion.p> </motion.p>
<motion.div className="fc-intro__icons" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease, delay: 0.3 }}> <motion.div
className="fc-intro__icons"
initial={{ opacity: 0, y: 16 }}
animate={introInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease, delay: 0.3 }}
>
{t.introIcons.map((item, i) => ( {t.introIcons.map((item, i) => (
<div key={i} className="fc-intro__icon-item"> <div key={i} className="fc-intro__icon-item">
<img src={`${basePath}images/${item.img}`} alt={item.label} /> <img
src={`${basePath}images/${item.img}`}
alt={item.label}
/>
<span>{item.label}</span> <span>{item.label}</span>
</div> </div>
))} ))}
</motion.div> </motion.div>
</div> </div>
<motion.div className="fc-intro__right" initial={{ opacity: 0, x: 40 }} animate={introInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.9, ease, delay: 0.15 }}> <motion.div
<img src={`${basePath}images/fc_computer.png`} alt={t.monitorAlt} className="fc-intro__monitor" /> className="fc-intro__right"
initial={{ opacity: 0, x: 40 }}
animate={introInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.9, ease, delay: 0.15 }}
>
<img
src={`${basePath}images/fc_computer.png`}
alt={t.monitorAlt}
className="fc-intro__monitor"
/>
</motion.div> </motion.div>
</section> </section>
@ -461,7 +526,13 @@ function FlightControlPage() {
icons: null, icons: null,
}, },
].map((item, i) => ( ].map((item, i) => (
<motion.div key={i} className="fc-highlight__item" initial={{ opacity: 0, y: 40 }} animate={highlightInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.7, ease, delay: i * 0.15 }}> <motion.div
key={i}
className="fc-highlight__item"
initial={{ opacity: 0, y: 40 }}
animate={highlightInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.7, ease, delay: i * 0.15 }}
>
<div className="fc-highlight__text"> <div className="fc-highlight__text">
<span className="fc-eyebrow">{item.tag}</span> <span className="fc-eyebrow">{item.tag}</span>
<h3 className="fc-highlight__title"> <h3 className="fc-highlight__title">
@ -476,7 +547,11 @@ function FlightControlPage() {
</div> </div>
<div className="fc-highlight__img-wrap"> <div className="fc-highlight__img-wrap">
<div className="fc-highlight__img-scene"> <div className="fc-highlight__img-scene">
<img src={`${basePath}images/${item.img}`} alt={item.tag} className="fc-highlight__tablet" /> <img
src={`${basePath}images/${item.img}`}
alt={item.tag}
className="fc-highlight__tablet"
/>
{item.icons && {item.icons &&
item.icons.map((icon, j) => ( item.icons.map((icon, j) => (
<motion.img <motion.img
@ -486,7 +561,11 @@ function FlightControlPage() {
className="fc-highlight__float-icon" className="fc-highlight__float-icon"
style={{ left: icon.x, top: icon.y }} style={{ left: icon.x, top: icon.y }}
initial={{ x: 0, y: 0 }} initial={{ x: 0, y: 0 }}
animate={highlightInView ? { x: icon.move.x[1], y: icon.move.y[1] } : { x: 0, y: 0 }} animate={
highlightInView
? { x: icon.move.x[1], y: icon.move.y[1] }
: { x: 0, y: 0 }
}
transition={{ transition={{
duration: 2.5, duration: 2.5,
repeat: 0, repeat: 0,
@ -498,9 +577,30 @@ function FlightControlPage() {
{i === 1 && ( {i === 1 && (
<> <>
<motion.img src={`${basePath}images/fc_left_tab.png`} alt="" className="fc-situation__left" initial={{ opacity: 0, x: -30 }} animate={highlightInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.8, ease, delay: 0.3 }} /> <motion.img
<motion.img src={`${basePath}images/fc_right_tab.png`} alt="" className="fc-situation__right" initial={{ opacity: 0, x: 30 }} animate={highlightInView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.8, ease, delay: 0.5 }} /> src={`${basePath}images/fc_left_tab.png`}
<motion.img src={`${basePath}images/fc_bottom_tab.png`} alt="" className="fc-situation__bottom" initial={{ opacity: 0, y: 30 }} animate={highlightInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.8, ease, delay: 0.7 }} /> alt=""
className="fc-situation__left"
initial={{ opacity: 0, x: -30 }}
animate={highlightInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8, ease, delay: 0.3 }}
/>
<motion.img
src={`${basePath}images/fc_right_tab.png`}
alt=""
className="fc-situation__right"
initial={{ opacity: 0, x: 30 }}
animate={highlightInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8, ease, delay: 0.5 }}
/>
<motion.img
src={`${basePath}images/fc_bottom_tab.png`}
alt=""
className="fc-situation__bottom"
initial={{ opacity: 0, y: 30 }}
animate={highlightInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, ease, delay: 0.7 }}
/>
</> </>
)} )}
</div> </div>
@ -526,13 +626,28 @@ function FlightControlPage() {
{/* 3. 적용 분야 */} {/* 3. 적용 분야 */}
<section className="fc-domains" ref={domainsRef}> <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
className="fc-section-title"
initial={{ opacity: 0, y: 20 }}
animate={domainsInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease }}
>
{t.domainsTitle} {t.domainsTitle}
</motion.span> </motion.span>
<div className="fc-domains__grid"> <div className="fc-domains__grid">
{DOMAINS.map(({ img, label, desc }, i) => ( {DOMAINS.map(({ img, 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 }}> <motion.div
<img className="fc-domain-card__img" src={`${basePath}images/${img}`} alt={label} /> 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 }}
>
<img
className="fc-domain-card__img"
src={`${basePath}images/${img}`}
alt={label}
/>
<div className="fc-domain-card__overlay"> <div className="fc-domain-card__overlay">
<span className="fc-domain-card__label">{label}</span> <span className="fc-domain-card__label">{label}</span>
<p className="fc-domain-card__desc">{desc}</p> <p className="fc-domain-card__desc">{desc}</p>
@ -544,31 +659,79 @@ function FlightControlPage() {
{/* 4. 주요기능 */} {/* 4. 주요기능 */}
<section className="fc-functions" ref={funcRef}> <section className="fc-functions" ref={funcRef}>
<motion.span className="fc-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 }}
>
{t.functionsTitle} {t.functionsTitle}
</motion.span> </motion.span>
<div className="fc-functions__body"> <div className="fc-functions__body">
<ul className="fc-func-list"> <ul className="fc-func-list">
{FUNCTIONS.map(({ num, label }, i) => ( {FUNCTIONS.map(({ num, label }, i) => (
<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.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 }}
>
<span className="fc-func-item__num">{num}</span> <span className="fc-func-item__num">{num}</span>
<span className="fc-func-item__label">{label}</span> <span className="fc-func-item__label">{label}</span>
<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 }}> <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 }}
>
<ArrowUpRight size={16} strokeWidth={1.5} /> <ArrowUpRight size={16} strokeWidth={1.5} />
</motion.span> </motion.span>
<motion.div className="fc-func-item__line" animate={{ scaleX: activeIdx === i ? 1 : 0 }} transition={{ duration: 0.35, ease }} /> <motion.div
className="fc-func-item__line"
animate={{ scaleX: activeIdx === i ? 1 : 0 }}
transition={{ duration: 0.35, ease }}
/>
</motion.li> </motion.li>
))} ))}
</ul> </ul>
<div className="fc-func-display"> <div className="fc-func-display">
<AnimatePresence mode="wait"> <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" }}> <motion.div
<img src={FUNCTIONS[activeIdx].img} alt={FUNCTIONS[activeIdx].label} className="fc-func-display__img" /> 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"> <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 }}> <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} {FUNCTIONS[activeIdx].num}
</motion.span> </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 }}> <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} {FUNCTIONS[activeIdx].label}
</motion.span> </motion.span>
</div> </div>
@ -580,12 +743,23 @@ function FlightControlPage() {
{/* 5. 시스템 구성 흐름 */} {/* 5. 시스템 구성 흐름 */}
<section className="fc-flow" ref={flowRef}> <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
className="fc-section-title"
initial={{ opacity: 0, y: 20 }}
animate={flowInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease }}
>
{t.flowTitle} {t.flowTitle}
</motion.span> </motion.span>
<div className="fc-flow__row"> <div className="fc-flow__row">
{FLOW.map(({ step, label, desc }, i) => ( {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 }}> <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__step">{step}</span>
<span className="fc-flow__label">{label}</span> <span className="fc-flow__label">{label}</span>
<p className="fc-flow__desc">{desc}</p> <p className="fc-flow__desc">{desc}</p>

Write Preview
Loading…
Cancel
Save