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

비행상황관리 시스템 임시

remotes/origin/main
김지은 4 weeks ago
parent
c46c680420
commit
0204d1837a
2 changed files with 111 additions and 136 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. 197
      src/css/common.css
  2. 50
      src/pages/solution/FlightControlPage.jsx

197
src/css/common.css
Unescape View File

@ -449,105 +449,6 @@ body{overflow-x:hidden;}
} }
/* ════════════════════════════════
FlightControlPage — common.css 추가분
════════════════════════════════ */
.fc-eyebrow {display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);margin-bottom:1.5rem;}
.fc-eyebrow--light {color:rgba(255,255,255,.45);}
/* ════════════════
1. 개요
════════════════ */
.fc-overview {position:relative;border-radius:1.25rem;overflow:hidden;margin:3rem 0 5rem;min-height:520px;display:flex;align-items:flex-end;}
.fc-overview__bg {position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;display:block;filter:brightness(.38) saturate(.6);will-change:transform;}
.fc-overview__overlay {position:absolute;inset:0;background:linear-gradient(170deg, rgba(26,31,94,.6) 0%, rgba(26,31,94,.92) 60%);pointer-events:none;}
.fc-overview__content {position:relative;z-index:1;padding:3.5rem 3.5rem 4rem;width:100%;}
.fc-overview__eyebrow-wrap {display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem;}
.fc-overview__eyebrow-line {width:2px;height:1rem;background:rgba(255,255,255,.35);transform-origin:top;flex-shrink:0;}
.fc-overview__title {margin:.5rem 0 2.75rem;}
.fc-overview__title-inner {font-size:1.85rem;font-weight:700;line-height:1.4;color:#fff;letter-spacing:-.01em;}
.fc-overview__bottom {display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.fc-overview__sub {font-size:.88rem;line-height:1.9;color:rgba(255,255,255,.5);margin:0;}
.fc-badges {display:flex;flex-wrap:wrap;gap:.45rem;align-content:flex-start;}
.fc-badge {display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-primary);font-size:.76rem;font-weight:600;transition:background .2s,color .2s,border-color .2s;cursor:default;}
.fc-badge:hover {background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.fc-badge--light {border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);}
.fc-badge--light:hover {background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff;}
/* ════════════════
2. 주요기능
════════════════ */
.fc-functions {padding:0 0 8rem;}
.fc-functions__body {display:flex;gap:5rem;align-items:flex-start;}
.fc-func-list {flex:1;list-style:none;margin:0;padding:0;}
.fc-func-item {position:relative;display:flex;align-items:center;gap:2rem;padding:1.75rem 0;border-top:1px solid var(--color-primary-soft-border);overflow:hidden;cursor:default;}
.fc-func-list li:last-child {border-bottom:1px solid var(--color-primary-soft-border);}
.fc-func-item__num {font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--color-primary-border-strong);flex-shrink:0;width:2rem;transition:color .3s;}
.fc-func-item.is-active .fc-func-item__num {color:var(--color-primary);}
.fc-func-item__label {flex:1;font-size:1.1rem;font-weight:600;color:#bbb;line-height:1.4;transition:color .3s;}
.fc-func-item.is-active .fc-func-item__label {color:#1a1f3a;}
.fc-func-item__arrow {flex-shrink:0;color:var(--color-primary);display:flex;align-items:center;}
.fc-func-item__line {position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--color-primary);transform-origin:left;will-change:transform;}
.fc-func-display {flex:0 0 340px;}
.fc-func-display__inner {position:relative;border-radius:.875rem;overflow:hidden;background:#0a0e2e;aspect-ratio:2/1;}
.fc-func-display__img {width:100%;height:100%;object-fit:cover;display:block;}
.fc-func-display__caption {position:absolute;bottom:0;left:0;right:0;padding:.85rem 1rem;background:linear-gradient(to top, rgba(10,14,46,.88) 0%, transparent 100%);display:flex;align-items:center;gap:.55rem;}
.fc-func-display__num {font-size:1rem;font-weight:800;color:var(--pink);line-height:1;}
.fc-func-display__label {font-size:.78rem;font-weight:600;color:#fff;}
/* ════════════════
반응형
════════════════ */
@media (max-width: 1024px) {
.fc-overview {
min-height: 420px;
margin: 2rem 0 4rem;
}
.fc-overview__content {
padding: 3rem 2.5rem 3.5rem;
}
.fc-overview__title-inner {
font-size: 1.5rem;
}
.fc-overview__bottom {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.fc-functions__body {
flex-direction: column;
gap: 2rem;
}
.fc-func-display {
flex: none;
width: 100%;
max-width: 500px;
}
}
@media (max-width: 640px) {
.fc-overview {
border-radius: .875rem;
min-height: 360px;
}
.fc-overview__content {
padding: 2.5rem 1.75rem 3rem;
}
.fc-overview__title-inner {
font-size: 1.25rem;
}
.fc-func-item__label {
font-size: 1rem;
}
}
/*ab about page*/ /*ab about page*/
.ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;} .ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
.ab-eyebrow--light{color:rgba(255,255,255,.3);} .ab-eyebrow--light{color:rgba(255,255,255,.3);}
@ -714,4 +615,102 @@ body{overflow-x:hidden;}
  0% { transform: translate(0%, 0%); }   0% { transform: translate(0%, 0%); }
  50% { transform: translate(-10%, 8%); }   50% { transform: translate(-10%, 8%); }
  100% { transform: translate(10%, -8%); }   100% { transform: translate(10%, -8%); }
}
/* ════════════════════════════════
FlightControlPage — common.css 추가분
════════════════════════════════ */
.fc-eyebrow {display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);margin-bottom:1.5rem;}
.fc-eyebrow--light {color:rgba(255,255,255,.45);}
/* ════════════════
1. 개요
════════════════ */
.fc-overview {position:relative;border-radius:1.25rem;overflow:hidden;margin:3rem 0 5rem;min-height:520px;display:flex;align-items:flex-end;}
.fc-overview__bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.38) saturate(.6);}
.fc-overview__overlay {position:absolute;inset:0;background:linear-gradient(170deg, rgba(26,31,94,.6) 0%, rgba(26,31,94,.92) 60%);pointer-events:none;}
.fc-overview__content {position:relative;z-index:1;padding:3.5rem 3.5rem 4rem;width:100%;}
.fc-overview__title {margin:.6rem 0 2.5rem;}
.fc-overview__title-inner {font-size:2rem;font-weight:700;line-height:1.45;color:#fff;letter-spacing:-.01em;}
.fc-overview__bottom {display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.fc-overview__sub {font-size:.88rem;line-height:1.9;color:rgba(255,255,255,.5);margin:0;}
.fc-badges {display:flex;flex-wrap:wrap;gap:.45rem;align-content:flex-start;}
.fc-badge {display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-primary);font-size:.76rem;font-weight:600;transition:background .2s,color .2s,border-color .2s;cursor:default;}
.fc-badge:hover {background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.fc-badge--light {border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);}
.fc-badge--light:hover {background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff;}
/* ════════════════
2. 주요기능
════════════════ */
.fc-functions {padding:0 0 8rem;}
.fc-func-section-title {display:block;font-size:1.5rem;font-weight:700;color:var(--color-primary);margin-bottom:2rem;letter-spacing:-.01em;}
.fc-functions__body {display:flex;gap:5rem;align-items:flex-start;}
.fc-func-list {flex:1;list-style:none;margin:0;padding:0;}
.fc-func-item {position:relative;display:flex;align-items:center;gap:2rem;padding:1.1rem 0;border-top:1px solid var(--color-primary-soft-border);overflow:hidden;cursor:default;}
.fc-func-list li:last-child {border-bottom:1px solid var(--color-primary-soft-border);}
.fc-func-item__num {font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--color-primary-border-strong);flex-shrink:0;width:2rem;transition:color .3s;}
.fc-func-item.is-active .fc-func-item__num {color:var(--color-primary);}
.fc-func-item__label {flex:1;font-size:1rem;font-weight:600;color:#bbb;line-height:1.4;transition:color .3s;}
.fc-func-item.is-active .fc-func-item__label {color:#1a1f3a;}
.fc-func-item__arrow {flex-shrink:0;color:var(--color-primary);display:flex;align-items:center;}
.fc-func-item__line {position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--color-primary);transform-origin:left;will-change:transform;}
.fc-func-display {flex:0 0 340px;}
.fc-func-display__inner {position:relative;border-radius:.875rem;overflow:hidden;background:#0a0e2e;aspect-ratio:2/1;}
.fc-func-display__img {width:100%;height:100%;object-fit:cover;display:block;}
.fc-func-display__caption {position:absolute;bottom:0;left:0;right:0;padding:.85rem 1rem;background:linear-gradient(to top, rgba(10,14,46,.88) 0%, transparent 100%);display:flex;align-items:center;gap:.55rem;}
.fc-func-display__num {font-size:1rem;font-weight:800;color:var(--pink);line-height:1;}
.fc-func-display__label {font-size:.78rem;font-weight:600;color:#fff;}
/* ════════════════
반응형
════════════════ */
@media (max-width: 1024px) {
.fc-overview {
min-height: 420px;
margin: 2rem 0 4rem;
}
.fc-overview__content {
padding: 3rem 2.5rem 3.5rem;
}
.fc-overview__title-inner {
font-size: 1.5rem;
}
.fc-overview__bottom {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.fc-functions__body {
flex-direction: column;
gap: 2rem;
}
.fc-func-display {
flex: none;
width: 100%;
max-width: 500px;
}
}
@media (max-width: 640px) {
.fc-overview {
border-radius: .875rem;
min-height: 360px;
}
.fc-overview__content {
padding: 2.5rem 1.75rem 3rem;
}
.fc-overview__title-inner {
font-size: 1.2rem;
}
.fc-func-item__label {
font-size: .9rem;
}
} }

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

@ -1,12 +1,12 @@
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { motion, useInView, AnimatePresence, useMotionValue, useTransform, useSpring } 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";
const SOLUTION_NAV = [ const SOLUTION_NAV = [
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, { label: "비행상황관리 시스템", to: "/solution/flight-control" },
{ label: "IBE (Internet Booking Engine)", to: "/solution/ibe" }, { label: "IBE", 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" },
]; ];
@ -65,24 +65,6 @@ function FlightControlPage() {
const overviewInView = useInView(overviewRef, { once: true, margin: "-60px" }); 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} />
@ -90,34 +72,28 @@ function FlightControlPage() {
<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}> <section className="fc-overview" ref={overviewRef}>
<motion.img src="./images/test111.png" alt="" className="fc-overview__bg" style={{ x: bgX, y: bgY, scale: 1.06 }} /> <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__overlay" />
<div className="fc-overview__content"> <div className="fc-overview__content">
{/* eyebrow + 보더라인 */} {overviewInView && (
<div className="fc-overview__eyebrow-wrap"> <RevealText delay={0.1} className="fc-eyebrow fc-eyebrow--light">
{overviewInView && <motion.div className="fc-overview__eyebrow-line" initial={{ scaleY: 0 }} animate={{ scaleY: 1 }} transition={{ duration: 0.5, ease, delay: 0.05 }} />} 비행상황 관리 시스템
{overviewInView && ( </RevealText>
<RevealText delay={0.1} className="fc-eyebrow fc-eyebrow--light"> )}
비행상황 관리 시스템
</RevealText>
)}
</div>
{/* 타이틀 */}
{overviewInView && ( {overviewInView && (
<div className="fc-overview__title"> <div className="fc-overview__title">
<StaggerWords text="항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템" delay={0.15} className="fc-overview__title-inner" /> <StaggerWords text="항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템" delay={0.18} className="fc-overview__title-inner" />
</div> </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 }}>
<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> <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 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 }}> <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.95 + i * 0.07 }}>
<Icon size={12} strokeWidth={2} /> <Icon size={12} strokeWidth={2} />
{label} {label}
</motion.span> </motion.span>
@ -129,7 +105,7 @@ function FlightControlPage() {
{/* 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-func-section-title" initial={{ opacity: 0, y: 20 }} animate={funcInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}>
주요기능 주요기능
</motion.span> </motion.span>

Write Preview
Loading…
Cancel
Save