feat : 헤더 공통 컴포넌트 추가

src/pages/business/MaintenancePage.jsx

@@ -1,6 +1,30 @@
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
 function MaintenancePage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="BUSINESS"
+        title={
+          <>
+            <span style={{ color: "#111" }}>안정적인 시스템 관리</span>
+            <br />
+            <em>운영 · 유지보수</em>
+          </>
+        }
+        desc="구축 이후에도 끊김 없는 서비스 운영을 위해 장기 파트너십 기반의 유지보수를 제공합니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">
+            운영 · 유지보수
+          </span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>운영 · 유지보수</h2>
@@ -18,7 +42,10 @@ function MaintenancePage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/business/RndPage.jsx

@@ -1,6 +1,28 @@
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
 function RndPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="BUSINESS"
+        title={
+          <>
+            <span style={{ color: "#111" }}>관제 기술 혁신</span>
+            <br />
+            <em>R&D</em>
+          </>
+        }
+        desc="항공·관제 도메인 특화 기술 연구로 차세대 솔루션을 만들어갑니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">UAM/UATM 소개</span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>R&amp;D</h2>
@@ -18,7 +40,10 @@ function RndPage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/business/SiPage.jsx

@@ -1,6 +1,30 @@
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
 function SiPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="BUSINESS"
+        title={
+          <>
+            <span style={{ color: "#111" }}>시스템 통합 구축</span>
+            <br />
+            <em>System Integration</em>
+          </>
+        }
+        desc="공공·민간 분야의 정보시스템 구축부터 운영까지 전 과정을 책임지는 SI 서비스를 제공합니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">
+            시스템 통합 구축
+          </span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>System Integration</h2>
@@ -13,12 +37,14 @@ function SiPage() {
                 <h3>맞춤형 정보시스템 구축</h3>
                 <p>
                   공공·민간 분야의 정보시스템 구축부터 운영까지
-            <br />
+                  <br />전 과정을 책임지는 SI 서비스를 제공합니다.
-            전 과정을 책임지는 SI 서비스를 제공합니다.
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/company/LocationPage.jsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import SubHero from "../../components/SubHero";
 import useFadeIn from "../../hooks/useFadeIn";
 
@@ -93,7 +92,13 @@ export default function LocationPage() {
     <article ref={ref}>
       <SubHero
         label="Company"
-        title="찾아오시는 길"
+        title={
+          <>
+            <span style={{ color: "#111" }}>방문 안내</span>
+            <br />
+            <em>찾아오시는 길</em>
+          </>
+        }
         desc="인천광역시 서구 로봇랜드에 위치한 팔네트웍스 본사입니다."
         navItems={COMPANY_NAV}
       />

src/pages/contact/InquiryPage.jsx

@@ -1,6 +1,29 @@
+import useFadeIn from "../../hooks/useFadeIn";
+import SubHero from "../../components/SubHero";
+
 function InquiryPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="CONTACT US"
+        title={
+          <>
+            <span style={{ color: "#111" }}>프로젝트 및 협업 문의</span>
+            <br />
+            <em>문의하기</em>
+          </>
+        }
+        desc="PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고 싶으시다면
+        아래 정보를 통해 편하게 연락 주세요."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">문의하기</span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>문의하기</h2>
@@ -12,13 +35,17 @@ function InquiryPage() {
               <div className="inner">
                 <h3>프로젝트 및 협업 문의</h3>
                 <p>
-            PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고 싶으시다면
+                  PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고
+                  싶으시다면
                   <br />
                   아래 정보를 통해 편하게 연락 주세요.
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/contact/RecruitPage.jsx

@@ -1,6 +1,29 @@
+import useFadeIn from "../../hooks/useFadeIn";
+import SubHero from "../../components/SubHero";
+
 function RecruitPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="CONTACT US"
+        title={
+          <>
+            <span style={{ color: "#111" }}>기술과 사람을 연결합니다.</span>
+            <br />
+            <em>채용정보</em>
+          </>
+        }
+        desc="PAL Networks와 함께 성장할
+      새로운 동료를 기다리고 있습니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">채용정보</span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>채용정보</h2>
@@ -18,7 +41,10 @@ function RecruitPage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/solution/FlightControlPage.jsx

@@ -1,6 +1,30 @@
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
 function FlightControlPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="SOLUTION"
+        title={
+          <>
+            <span style={{ color: "#111" }}>실시간 운항 관제</span>
+            <br />
+            <em>비행상황관리 시스템</em>
+          </>
+        }
+        desc="항공기 운항 정보를 실시간으로 수집·분석하여 안전한 비행 운영을 지원하는 통합 관제 솔루션입니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">
+            비행상황관리 시스템
+          </span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>비행상황관리 시스템</h2>
@@ -18,7 +42,10 @@ function FlightControlPage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/solution/IbePage.jsx

@@ -1,6 +1,29 @@
+import useFadeIn from "../../hooks/useFadeIn";
+import SubHero from "../../components/SubHero";
+
 function IbePage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="SOLUTION"
+        title={
+          <>
+            <span style={{ color: "#111" }}>통합 항공 예약 시스템</span>
+            <br />
+            <em>Internet Booking Engine</em>
+          </>
+        }
+        desc="온라인 항공 예약과 발권을 위한 통합 엔진으로
+        안정적이고 확장 가능한 예약 플랫폼을 제공합니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">IBE</span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>IBE</h2>
@@ -18,7 +41,10 @@ function IbePage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/solution/KtGcloudPage.jsx

@@ -1,6 +1,32 @@
+import useFadeIn from "../../hooks/useFadeIn";
+import SubHero from "../../components/SubHero";
+
 function KtGcloudPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="SOLUTION"
+        title={
+          <>
+            <span style={{ color: "#111" }}>클라우드 인프라 공급</span>
+            <br />
+            <em>KT G-cloud 인천총판</em>
+          </>
+        }
+        desc="KT G-cloud 인천 지역 총판 파트너로서
+공공기관 클라우드 인프라 도입과 운영을 지원합니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">
+            KT G-cloud 인천총판
+          </span>
+
+          {/* <main className="sub-page">
               <section className="sub-visual">
                 <div className="inner">
                   <h2>KT G-cloud 인천총판</h2>
@@ -18,7 +44,10 @@ function KtGcloudPage() {
                   </p>
                 </div>
               </section>
-    </main>
+            </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/solution/SmartTourPage.jsx

@@ -1,6 +1,31 @@
+import useFadeIn from "../../hooks/useFadeIn";
+import SubHero from "../../components/SubHero";
+
 function SmartTourPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="SOLUTION"
+        title={
+          <>
+            <span style={{ color: "#111" }}>여행의 새로운 기준</span>
+            <br />
+            <em>스마트 관광 예약 플랫폼</em>
+          </>
+        }
+        desc="관광 상품 검색부터 예약, 결제, 운영 관리까지
+        하나의 플랫폼에서 통합 제공하는 솔루션입니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">
+            스마트 관광 예약 플랫폼
+          </span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>스마트 관광 예약 플랫폼</h2>
@@ -18,7 +43,10 @@ function SmartTourPage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/uam/CasePage.jsx

@@ -1,6 +1,28 @@
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
 function CasePage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="UAM/UATM"
+        title={
+          <>
+            <span style={{ color: "#111" }}>구축 및 운영</span>
+            <br />
+            <em>도입사례</em>
+          </>
+        }
+        desc="PAL Networks의 UAM/UATM 기술이 적용된 실제 사례를 소개합니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">도입사례</span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>도입사례</h2>
@@ -11,10 +33,15 @@ function CasePage() {
             <section className="sub-content-section">
               <div className="inner">
                 <h3>주요 도입 및 운영 사례</h3>
-          <p>PAL Networks의 UAM/UATM 기술이 적용된 실제 사례를 소개합니다.</p>
+                <p>
+                  PAL Networks의 UAM/UATM 기술이 적용된 실제 사례를 소개합니다.
+                </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }
 

src/pages/uam/IntroPage.jsx

@@ -1,6 +1,28 @@
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
 function IntroPage() {
+  const ref = useFadeIn();
+
   return (
-    <main className="sub-page">
+    <article ref={ref}>
+      <SubHero
+        label="BUSINESS"
+        title={
+          <>
+            <span style={{ color: "#111" }}>미래 항공 모빌리티</span>
+            <br />
+            <em>UAM/UATM</em>
+          </>
+        }
+        desc="안전한 도심 상공 운항과 통합 관제를 실현하는 PAL Networks의 UAM/UATM 기술을 소개합니다."
+        // navItems={}
+      />
+
+      <div className="sub-content">
+        <section className="sub-section">
+          <span className="sub-section-eyebrow sub-fade-in">UAM/UATM 소개</span>
+          {/* <main className="sub-page">
             <section className="sub-visual">
               <div className="inner">
                 <h2>UAM/UATM 소개</h2>
@@ -18,7 +40,10 @@ function IntroPage() {
                 </p>
               </div>
             </section>
-    </main>
+          </main> */}
+        </section>
+      </div>
+    </article>
   );
 }