From f0aed0ca4dd0c7d02224286cbe43c9896f3df6ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?siyeon00=28=EC=9D=B4=EC=8B=9C=EC=97=B0=29?=
 <siyeon00@palnet.co.kr>
Date: Tue, 1 Sep 2026 14:56:06 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EB=B9=84=ED=96=89=EC=83=81=ED=99=A9?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EB=88=84=EB=9D=BD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/solution/FlightControlPage.jsx | 242 +++++++++++++++++++----
 1 file changed, 208 insertions(+), 34 deletions(-)

diff --git a/src/pages/solution/FlightControlPage.jsx b/src/pages/solution/FlightControlPage.jsx
index 9815dc4..0c5389b 100644
--- a/src/pages/solution/FlightControlPage.jsx
+++ b/src/pages/solution/FlightControlPage.jsx
@@ -1,6 +1,13 @@
 import { useRef, useState } from "react";
 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 useFadeIn from "../../hooks/useFadeIn";
 import { useLanguage } from "../../context/LanguageContext";
@@ -111,13 +118,21 @@ const FUNCTIONS_EN = [
     img: "./images/s1-01.jpg",
     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",
     img: "./images/s1-03.jpg",
     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: "06",
@@ -181,7 +196,8 @@ const PAGE_TEXT = {
     ),
     introDesc: (
       <>
-        항공기, 무인기, 선박, 지상 이동체의 실시간 정보를 통합 모니터링하고 <br />
+        항공기, 무인기, 선박, 지상 이동체의 실시간 정보를 통합 모니터링하고{" "}
+        <br />
         상황을 인식하여 신속하고 안전한 운영 의사결정을 지원합니다.
       </>
     ),
@@ -218,7 +234,8 @@ const PAGE_TEXT = {
     ),
     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.
       </>
     ),
@@ -252,7 +269,12 @@ 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 }}>
+      <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>
@@ -262,7 +284,10 @@ function RevealText({ children, delay = 0, className }) {
 function StaggerWords({ text, delay = 0, className }) {
   const words = text.split(" ");
   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) => (
         <span key={i} style={{ overflow: "hidden", display: "inline-block" }}>
           <motion.span
@@ -319,7 +344,15 @@ function FlightControlPage() {
 
   return (
     <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="inner-wrap">
@@ -392,27 +425,59 @@ function FlightControlPage() {
           {/* 개요 인트로 */}
           <section className="fc-intro" ref={introRef}>
             <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
               </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}
               </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}
               </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) => (
                   <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>
                   </div>
                 ))}
               </motion.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 }}>
-              <img src={`${basePath}images/fc_computer.png`} alt={t.monitorAlt} className="fc-intro__monitor" />
+            <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 }}
+            >
+              <img
+                src={`${basePath}images/fc_computer.png`}
+                alt={t.monitorAlt}
+                className="fc-intro__monitor"
+              />
             </motion.div>
           </section>
 
@@ -461,7 +526,13 @@ function FlightControlPage() {
                 icons: null,
               },
             ].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">
                   <span className="fc-eyebrow">{item.tag}</span>
                   <h3 className="fc-highlight__title">
@@ -476,7 +547,11 @@ function FlightControlPage() {
                 </div>
                 <div className="fc-highlight__img-wrap">
                   <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.map((icon, j) => (
                         <motion.img
@@ -486,7 +561,11 @@ function FlightControlPage() {
                           className="fc-highlight__float-icon"
                           style={{ left: icon.x, top: icon.y }}
                           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={{
                             duration: 2.5,
                             repeat: 0,
@@ -498,9 +577,30 @@ function FlightControlPage() {
 
                     {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 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 }} />
+                        <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
+                          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>
@@ -526,13 +626,28 @@ function FlightControlPage() {
 
           {/* 3. 적용 분야 */}
           <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}
             </motion.span>
             <div className="fc-domains__grid">
               {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 }}>
-                  <img className="fc-domain-card__img" src={`${basePath}images/${img}`} alt={label} />
+                <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 }}
+                >
+                  <img
+                    className="fc-domain-card__img"
+                    src={`${basePath}images/${img}`}
+                    alt={label}
+                  />
                   <div className="fc-domain-card__overlay">
                     <span className="fc-domain-card__label">{label}</span>
                     <p className="fc-domain-card__desc">{desc}</p>
@@ -544,31 +659,79 @@ function FlightControlPage() {
 
           {/* 4. 주요기능 */}
           <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}
             </motion.span>
             <div className="fc-functions__body">
               <ul className="fc-func-list">
                 {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__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} />
                     </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>
                 ))}
               </ul>
               <div className="fc-func-display">
                 <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" />
+                  <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 }}>
+                      <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 }}>
+                      <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>
@@ -580,12 +743,23 @@ function FlightControlPage() {
 
           {/* 5. 시스템 구성 흐름 */}
           <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}
             </motion.span>
             <div className="fc-flow__row">
               {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__label">{label}</span>
                   <p className="fc-flow__desc">{desc}</p>