공통작업

src/css/common.css

@@ -37,8 +37,8 @@ body{overflow-x:hidden;}
 .sh4-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
 .sh4-right{position:relative;height:100%;min-height:320px;}
 .sh4-label{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(26,31,94,.38);margin-bottom:20px;opacity:0;transform:translateY(10px);animation:sh4Up .55s cubic-bezier(.16,1,.3,1) forwards;}
-.sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-.055em;color:var(--navy);}
-.sh4-title em{font-size:7rem;font-style:normal;background:var(--grad-brand-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
+.sh4-title{margin:0 0 20px;font-size:clamp(40px,6vw,80px);font-weight:900;line-height:1.25;letter-spacing:-.055em;color:var(--navy);}
+.sh4-title em{padding-right:1rem;font-size:7rem;font-style:normal;background:var(--grad-brand-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
 
 .sh4-title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
 .sh4-title-line-inner{display:block;}

src/pages/business/MaintenancePage.jsx

@@ -3,27 +3,29 @@ import useFadeIn from "../../hooks/useFadeIn";
 
 function MaintenancePage() {
   const ref = useFadeIn();
-
+  const BUSINESS_NAV = [
+    { label: "System Integration", to: "/business/si" },
+    { label: "R&D", to: "/business/rnd" },
+    { label: "운영 · 유지보수", to: "/business/maintenance" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="BUSINESS"
         title={
           <>
-            <span style={{ color: "#111" }}>안정적인 시스템 관리</span>
-            <br />
-            <em>운영 · 유지보수</em>
+            {/* <span style={{ color: "#111" }}>안정적인 시스템 관리</span>
+            <br /> */}
+            <em>Maintenance</em>
           </>
         }
-        desc="구축 이후에도 끊김 없는 서비스 운영을 위해 장기 파트너십 기반의 유지보수를 제공합니다."
-        // navItems={}
+        // desc="구축 이후에도 끊김 없는 서비스 운영을 위해 장기 파트너십 기반의 유지보수를 제공합니다."
+        navItems={BUSINESS_NAV}
       />
 
       <div className="sub-content">
         <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">
-            운영 · 유지보수
-          </span>
+          <span className="sub-section-eyebrow sub-fade-in">운영 · 유지보수</span>
           {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">

src/pages/business/RndPage.jsx

@@ -3,20 +3,24 @@ import useFadeIn from "../../hooks/useFadeIn";
 
 function RndPage() {
   const ref = useFadeIn();
-
+  const BUSINESS_NAV = [
+    { label: "System Integration", to: "/business/si" },
+    { label: "R&D", to: "/business/rnd" },
+    { label: "운영 · 유지보수", to: "/business/maintenance" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="BUSINESS"
         title={
           <>
-            <span style={{ color: "#111" }}>관제 기술 혁신</span>
-            <br />
+            {/* <span style={{ color: "#111" }}>관제 기술 혁신</span>
+            <br /> */}
             <em>R&D</em>
           </>
         }
-        desc="항공·관제 도메인 특화 기술 연구로 차세대 솔루션을 만들어갑니다."
-        // navItems={}
+        // desc="항공·관제 도메인 특화 기술 연구로 차세대 솔루션을 만들어갑니다."
+        navItems={BUSINESS_NAV}
       />
 
       <div className="sub-content">

src/pages/business/SiPage.jsx

@@ -3,27 +3,29 @@ import useFadeIn from "../../hooks/useFadeIn";
 
 function SiPage() {
   const ref = useFadeIn();
-
+  const BUSINESS_NAV = [
+    { label: "System Integration", to: "/business/si" },
+    { label: "R&D", to: "/business/rnd" },
+    { label: "운영 · 유지보수", to: "/business/maintenance" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="BUSINESS"
         title={
           <>
-            <span style={{ color: "#111" }}>시스템 통합 구축</span>
-            <br />
-            <em>System Integration</em>
+            {/* <span style={{ color: "#111" }}>시스템 통합 구축</span>
+            <br /> */}
+            <em>SI Solutions</em>
           </>
         }
-        desc="공공·민간 분야의 정보시스템 구축부터 운영까지 전 과정을 책임지는 SI 서비스를 제공합니다."
-        // navItems={}
+        // desc="공공·민간 분야의 정보시스템 구축부터 운영까지 전 과정을 책임지는 SI 서비스를 제공합니다."
+        navItems={BUSINESS_NAV}
       />
 
       <div className="sub-content">
         <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">
-            시스템 통합 구축
-          </span>
+          <span className="sub-section-eyebrow sub-fade-in">시스템 통합 구축</span>
           {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">

src/pages/solution/FlightControlPage.jsx

@@ -3,27 +3,30 @@ import useFadeIn from "../../hooks/useFadeIn";
 
 function FlightControlPage() {
   const ref = useFadeIn();
-
+  const SOLUTION_NAV = [
+    { label: "비행상황관리 시스템", to: "/solution/flight-control" },
+    { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" },
+    { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
+    { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="SOLUTION"
         title={
           <>
-            <span style={{ color: "#111" }}>실시간 운항 관제</span>
-            <br />
-            <em>비행상황관리 시스템</em>
+            {/* <span style={{ color: "#111" }}>실시간 운항 관제</span>
+            <br /> */}
+            <em>Flight Management</em>
           </>
         }
-        desc="항공기 운항 정보를 실시간으로 수집·분석하여 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다."
-        // navItems={}
+        // desc="항공기 운항 정보를 실시간으로 수집·분석하여 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다."
+        navItems={SOLUTION_NAV}
       />
 
       <div className="sub-content">
         <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">
-            비행상황관리 시스템
-          </span>
+          <span className="sub-section-eyebrow sub-fade-in">비행상황관리 시스템</span>
           {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">

src/pages/solution/IbePage.jsx

@@ -3,21 +3,26 @@ import SubHero from "../../components/SubHero";
 
 function IbePage() {
   const ref = useFadeIn();
-
+  const SOLUTION_NAV = [
+    { label: "비행상황관리 시스템", to: "/solution/flight-control" },
+    { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" },
+    { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
+    { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="SOLUTION"
         title={
           <>
-            <span style={{ color: "#111" }}>통합 항공 예약 시스템</span>
-            <br />
-            <em>Internet Booking Engine</em>
+            {/* <span style={{ color: "#111" }}>통합 항공 예약 시스템</span>
+            <br /> */}
+            <em>IBE</em>
           </>
         }
-        desc="온라인 항공 예약과 발권을 위한 통합 엔진으로
-        안정적이고 확장 가능한 예약 플랫폼을 제공합니다."
-        // navItems={}
+        // desc="온라인 항공 예약과 발권을 위한 통합 엔진으로
+        // 안정적이고 확장 가능한 예약 플랫폼을 제공합니다."
+        navItems={SOLUTION_NAV}
       />
 
       <div className="sub-content">

src/pages/solution/SmartTourPage.jsx

@@ -3,28 +3,31 @@ import SubHero from "../../components/SubHero";
 
 function SmartTourPage() {
   const ref = useFadeIn();
-
+  const SOLUTION_NAV = [
+    { label: "비행상황관리 시스템", to: "/solution/flight-control" },
+    { label: "IBE (Internet Booking Engine)", to: "/solution/ibe" },
+    { label: "스마트 관광 예약 플랫폼", to: "/solution/smart-tour" },
+    { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" },
+  ];
   return (
     <article ref={ref}>
       <SubHero
         label="SOLUTION"
         title={
           <>
-            <span style={{ color: "#111" }}>여행의 새로운 기준</span>
-            <br />
-            <em>스마트 관광 예약 플랫폼</em>
+            {/* <span style={{ color: "#111" }}>여행의 새로운 기준</span>
+            <br /> */}
+            <em>Smart Tourism</em>
           </>
         }
-        desc="관광 상품 검색부터 예약, 결제, 운영 관리까지
-        하나의 플랫폼에서 통합 제공하는 솔루션입니다."
-        // navItems={}
+        // desc="관광 상품 검색부터 예약, 결제, 운영 관리까지
+        // 하나의 플랫폼에서 통합 제공하는 솔루션입니다."
+        navItems={SOLUTION_NAV}
       />
 
       <div className="sub-content">
         <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">
-            스마트 관광 예약 플랫폼
-          </span>
+          <span className="sub-section-eyebrow sub-fade-in">스마트 관광 예약 플랫폼</span>
           {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">

src/pages/utm/CasePage.jsx

@@ -4,8 +4,8 @@ import useFadeIn from "../../hooks/useFadeIn";
 function CasePage() {
   const ref = useFadeIn();
   const UTM_NAV = [
-    { label: "UTM/UATM 소개", to: "/UTM/intro" },
-    { label: "도입사례", to: "/UTM/case" },
+    { label: "UTM/UATM 소개", to: "/utm/intro" },
+    { label: "도입사례", to: "/utm/case" },
   ];
   return (
     <article ref={ref}>
@@ -13,12 +13,12 @@ function CasePage() {
         label="UTM/UATM"
         title={
           <>
-            <span style={{ color: "#111" }}>구축 및 운영</span>
-            <br />
-            <em>도입사례</em>
+            {/* <span style={{ color: "#111" }}>구축 및 운영</span>
+            <br /> */}
+            <em>Case Studies</em>
           </>
         }
-        desc="PAL Networks의 UTM/UATM 기술이 적용된 실제 사례를 소개합니다."
+        // desc="PAL Networks의 UTM/UATM 기술이 적용된 실제 사례를 소개합니다."
         navItems={UTM_NAV}
       />
 

src/pages/utm/IntroPage.jsx

@@ -4,8 +4,8 @@ import useFadeIn from "../../hooks/useFadeIn";
 function IntroPage() {
   const ref = useFadeIn();
   const UTM_NAV = [
-    { label: "UTM/UATM 소개", to: "/UTM/intro" },
-    { label: "도입사례", to: "/UTM/case" },
+    { label: "UTM/UATM 소개", to: "/utm/intro" },
+    { label: "도입사례", to: "/utm/case" },
   ];
   return (
     <article ref={ref}>