내용 넣기

src/css/common.css

@@ -82,9 +82,12 @@ body{overflow-x:hidden;}
 }
 @media (max-width:768px){
    .sh4{padding:calc(var(--header-height) + 48px) 20px 20px;}
-   .sh4-nav{padding-left:20px;padding-right:20px;}
+   .sh4-nav{padding-left:0;padding-right:0;flex-wrap: wrap;}
-   .sh4-nav-tab{padding:0 14px;font-size:13px;}
+   .sh4-nav-tab{padding:0 20px;font-size:13px;flex:0 0 50%;}
-   .sh4-title em{font-size:4rem}
+   .sh4-title-line-inner{margin-top:2rem}
+   .sh4-title em{font-size:3rem;}
+   .sh4-nav-tab--active::after{left:0;right:0;}
+   
 }
 
 @media (max-width:1280px){.ab3-stats{padding-left:48px;padding-right:48px;}}
@@ -518,3 +521,70 @@ body{overflow-x:hidden;}
   .cs-bg-num {font-size:120px;}
   .cs-item-title {font-size:22px;}
 }
+
+
+/* ════════════════════════════════
+   FlightControlPage — common.css 추가분
+════════════════════════════════ */
+
+.fc-eyebrow {display:block;font-size:2rem;font-weight:800;letter-spacing:-1px;text-transform:uppercase;margin-bottom:1.75rem;}
+
+/* ════════════════
+   1. 개요
+════════════════ */
+.fc-overview {display:flex;align-items:center;gap:4rem;padding:6rem 0 7rem;}
+.fc-overview__text {flex:1;min-width:0;}
+.fc-overview__desc {font-size:1rem;line-height:1.9;color:#3a3f5c;margin-top:1.2rem;}
+.fc-overview__desc--sub {color:#777;font-size:.92rem;margin-top:.8rem;}
+
+/* 특징 배지 */
+.fc-badges {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
+.fc-badge {display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--color-primary-border);background:var(--color-primary-soft);color:var(--color-primary);font-size:.78rem;font-weight:600;transition:background .2s,border-color .2s;}
+.fc-badge:hover {background:var(--color-primary);color:#fff;border-color:var(--color-primary);cursor:default;}
+
+/* 이미지 패널 */
+.fc-overview__panel {flex:0 0 460px;position:relative;}
+.fc-overview__panel-inner {border-radius:1.25rem;padding:2rem;}
+.fc-overview__img {width:100%;border-radius:.75rem;display:block;}
+
+/* ════════════════
+   2. 주요기능
+════════════════ */
+.fc-functions {padding-bottom:8rem;}
+.fc-functions__grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
+
+.fc-func-card {position:relative;border-radius:1rem;overflow:hidden;border:1px solid var(--color-primary-soft-border);background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.05);cursor:pointer;}
+.fc-func-card__img-wrap {overflow:hidden;aspect-ratio:2/1;}
+.fc-func-card__img {width:100%;height:100%;object-fit:cover;display:block;}
+.fc-func-card__body {display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;}
+.fc-func-card__num {font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--color-primary-border-strong);}
+.fc-func-card__label {font-size:.85rem;font-weight:600;color:#2a2e52;line-height:1.4;}
+
+/* 호버 오버레이 — 네이비 반전 */
+.fc-func-card__overlay {position:absolute;inset:0;background:var(--color-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.5rem;}
+.fc-func-card__overlay-num {font-size:2.5rem;font-weight:800;color:rgba(255,255,255,.2);line-height:1;}
+.fc-func-card__overlay-label {font-size:.9rem;font-weight:600;color:#fff;text-align:center;line-height:1.45;}
+
+/* ════════════════
+   반응형
+════════════════ */
+@media (max-width: 1024px) {
+  .fc-overview {
+    flex-direction: column;
+    gap: 3rem;
+    padding: 4rem 0 5rem;
+  }
+  .fc-overview__panel {
+    flex: none;
+    width: 100%;
+  }
+  .fc-functions__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .fc-functions__grid {
+    grid-template-columns: 1fr;
+  }
+}

src/pages/company/HistoryPage.jsx

@@ -157,7 +157,7 @@ export default function HistoryPage() {
               </em>
             </p>
             <em className="ht-header-sub">
-              항공 IT 소프트웨어 개발부터 드론·UTM·UTM 미래 모빌리티까지,
+              항공 IT 소프트웨어 개발부터 드론·UTM·UATM 미래 모빌리티까지,
               <br />
               하늘길을 개척해온 팔네트웍스의 10년 발자취를 담았습니다.
             </em>

src/pages/solution/FlightControlPage.jsx

@@ -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 SOLUTION_NAV = [
-  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
+      <SubHero label="SOLUTION" title={<em>Flight Management</em>} navItems={SOLUTION_NAV} />
-        label="SOLUTION"
-        title={
-          <>
-            {/* <span style={{ color: "#111" }}>실시간 운항 관제</span>
-            <br /> */}
-            <em>Flight Management</em>
-          </>
-        }
-        // desc="항공기 운항 정보를 실시간으로 수집·분석하여 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다."
-        navItems={SOLUTION_NAV}
-      />
 
       <div className="sub-content">
-        <section className="sub-section">
+        <div className="inner-wrap">
-          <span className="sub-section-eyebrow sub-fade-in">비행상황관리 시스템</span>
+          {/* ════════════════════════════
-          {/* <main className="sub-page">
+              1. 개요 + 특징 배지
-            <section className="sub-visual">
+          ════════════════════════════ */}
-              <div className="inner">
+          <section className="fc-overview" ref={overviewRef}>
-                <h2>비행상황관리 시스템</h2>
+            {/* 텍스트 + 배지 */}
-                <p>Flight Situation Management System</p>
+            <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">
+            <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 }}>
-                <h3>실시간 비행 상황 통합 관제</h3>
+              <div className="fc-overview__panel-inner">
-                <p>
+                <img src="./images/solution01.png" alt="비행상황관리 시스템 화면" className="fc-overview__img" />
-                  항공기 운항 정보를 실시간으로 수집·분석하여
-                  <br />
-                  안전한 비행 운영을 지원하는 통합 관제 솔루션입니다.
-                </p>
               </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>
   );
 }

src/pages/solution/IbePage.jsx

@@ -5,7 +5,7 @@ function IbePage() {
   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" },
   ];

src/pages/solution/KtGcloudPage.jsx

@@ -5,7 +5,7 @@ function KtGcloudPage() {
   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" },
   ];

src/pages/solution/SmartTourPage.jsx

@@ -5,7 +5,7 @@ function SmartTourPage() {
   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" },
   ];