From 0204d1837aad709ff5f14e7c409d4958faf0dcb9 Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Thu, 28 May 2026 15:52:15 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EC=83=81=ED=99=A9=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=9E=84=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/common.css | 197 +++++++++++------------ src/pages/solution/FlightControlPage.jsx | 50 ++---- 2 files changed, 111 insertions(+), 136 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index bfa1c6d..c236f1a 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -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-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);} @@ -714,4 +615,102 @@ body{overflow-x:hidden;}   0% { transform: translate(0%, 0%); }   50% { 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; + } } \ No newline at end of file diff --git a/src/pages/solution/FlightControlPage.jsx b/src/pages/solution/FlightControlPage.jsx index 1a6c024..f0c510b 100644 --- a/src/pages/solution/FlightControlPage.jsx +++ b/src/pages/solution/FlightControlPage.jsx @@ -1,12 +1,12 @@ 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 SubHero from "../../components/SubHero"; import useFadeIn from "../../hooks/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" }, ]; @@ -65,24 +65,6 @@ function FlightControlPage() { const overviewInView = useInView(overviewRef, { once: true, margin: "-60px" }); 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 (
Flight Management} navItems={SOLUTION_NAV} /> @@ -90,34 +72,28 @@ function FlightControlPage() {
{/* 1. 개요 */} -
- +
+
- {/* eyebrow + 보더라인 */} -
- {overviewInView && } - {overviewInView && ( - - 비행상황 관리 시스템 - - )} -
+ {overviewInView && ( + + 비행상황 관리 시스템 + + )} - {/* 타이틀 */} {overviewInView && (
- +
)} - {/* 서브 + 배지 */} - +

각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한 환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.

{FEATURES.map(({ icon: Icon, label }, i) => ( - + {label} @@ -129,7 +105,7 @@ function FlightControlPage() { {/* 2. 주요기능 */}
- + 주요기능