From cf1d190b09f561000229f08dcc4017089a620c6b Mon Sep 17 00:00:00 2001
From: geun <1416geun@naver.com>
Date: Wed, 27 May 2026 17:05:39 +0900
Subject: [PATCH] d

---
 src/Router.jsx             |  10 ++--
 src/components/Header.jsx  |   4 +-
 src/css/common.css         |  53 +++++++++++++++++
 src/pages/utm/CasePage.jsx | 118 +++++++++++++++++++++++++++----------
 4 files changed, 146 insertions(+), 39 deletions(-)

diff --git a/src/Router.jsx b/src/Router.jsx
index c981ae9..122ce7b 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -13,8 +13,8 @@ import CompanyPartnersPage from "./pages/company/PartnersPage";
 import CompanyLocationPage from "./pages/company/LocationPage";
 
 // UTM/UATM
-import UTMIntroPage from "./pages/UTM/IntroPage";
-import UTMCasePage from "./pages/UTM/CasePage";
+import UTMIntroPage from "./pages/utm/IntroPage";
+import UTMCasePage from "./pages/utm/CasePage";
 
 // Business
 import BusinessSiPage from "./pages/business/SiPage";
@@ -52,9 +52,9 @@ function Router() {
         <Route path="/company/location" element={<CompanyLocationPage />} />
 
         {/* UTM/UATM */}
-        <Route path="/UTM" element={<Navigate to="/UTM/intro" replace />} />
-        <Route path="/UTM/intro" element={<UTMIntroPage />} />
-        <Route path="/UTM/case" element={<UTMCasePage />} />
+        <Route path="/utm" element={<Navigate to="/utm/intro" replace />} />
+        <Route path="/utm/intro" element={<UTMIntroPage />} />
+        <Route path="/utm/case" element={<UTMCasePage />} />
 
         {/* Business */}
         <Route path="/business" element={<Navigate to="/business/si" replace />} />
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 51a5623..8614bd3 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -41,8 +41,8 @@ const menuData = [
       {
         title: "기술 소개",
         items: [
-          { label: "UTM/UATM 소개", to: "/UTM/intro", desc: "도심 항공 모빌리티 핵심 기술" },
-          { label: "도입사례", to: "/UTM/case", desc: "주요 도입 및 운영 사례" },
+          { label: "UTM/UATM 소개", to: "/utm/intro", desc: "도심 항공 모빌리티 핵심 기술" },
+          { label: "도입사례", to: "/utm/case", desc: "주요 도입 및 운영 사례" },
         ],
       },
     ],
diff --git a/src/css/common.css b/src/css/common.css
index 8ceb674..e2a344d 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -409,4 +409,57 @@ body{overflow-x:hidden;}
   .rc-jobs-grid {
     grid-template-columns: 1fr;
   }
+}
+
+/* ── Case Head ── */
+.cs-head {padding:72px 0 64px;}
+.cs-title {font-size:40px; font-weight:800; color:#111; letter-spacing:-.02em; line-height:1.25; margin-bottom:16px;}
+.cs-title em {font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
+.cs-desc {font-size:15px; color:#666; line-height:1.7;}
+
+/* ── Case List ── */
+.cs-list {display:flex; flex-direction:column;}
+
+/* ── Case Item ── */
+.cs-item {position:relative; width:100%; height:560px; overflow:hidden;}
+
+/* ── Image ── */
+.cs-img-wrap {position:absolute; inset:0;}
+.cs-img {width:100%; height:100%; object-fit:cover; display:block;}
+.cs-img-fallback {position:absolute; inset:0; background:linear-gradient(135deg, #e8eaf6 0%, #d0d4ef 100%);}
+.cs-img-overlay {position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,12,40,.72) 0%, rgba(10,12,40,.3) 50%, rgba(10,12,40,0) 100%);}
+
+/* ── Body ── */
+.cs-body {position:absolute; left:0; top:0; bottom:0; width:480px; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:56px 64px;}
+.cs-num {font-size:13px; font-weight:700; color:rgba(255,255,255,.4); letter-spacing:.2em;}
+.cs-eyebrow {font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6);}
+.cs-item-title {font-size:34px; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.25; margin:0;}
+.cs-item-desc {font-size:14px; color:rgba(255,255,255,.75); line-height:1.75; word-break:keep-all;}
+.cs-tags {display:flex; gap:8px; flex-wrap:wrap;}
+.cs-tag {font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2); padding:5px 12px; border-radius:100px; backdrop-filter:blur(4px);}
+
+/* ── Responsive ── */
+@media (max-width: 900px) {
+  .cs-head {
+    padding: 48px 0 40px;
+  }
+  .cs-title {
+    font-size: 28px;
+  }
+  .cs-item {
+    height: auto;
+    min-height: 400px;
+  }
+  .cs-img-overlay {
+    background: linear-gradient(180deg, rgba(10,12,40,0) 0%, rgba(10,12,40,.8) 60%, rgba(10,12,40,.9) 100%);
+  }
+  .cs-body {
+    position:relative;
+    width:100%;
+    padding: 32px 24px;
+    background: rgba(10,12,40,.85);
+  }
+  .cs-item-title {
+    font-size: 24px;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/utm/CasePage.jsx b/src/pages/utm/CasePage.jsx
index e1e16f4..ad0cfd0 100644
--- a/src/pages/utm/CasePage.jsx
+++ b/src/pages/utm/CasePage.jsx
@@ -1,51 +1,105 @@
+import { motion as Motion } from "framer-motion";
 import SubHero from "../../components/SubHero";
-import useFadeIn from "../../hooks/useFadeIn";
 
-function CasePage() {
-  const ref = useFadeIn();
-  const UTM_NAV = [
-    { label: "UTM/UATM 소개", to: "/utm/intro" },
-    { label: "도입사례", to: "/utm/case" },
-  ];
+const UTM_NAV = [
+  { label: "UTM/UATM 소개", to: "/utm/intro" },
+  { label: "도입사례", to: "/utm/case" },
+];
+
+const CASES = [
+  {
+    id: 1,
+    eyebrow: "한국공항공사",
+    title: "KAC 드론교통관리\nUTM 시스템 구축",
+    desc: "공공용 UTM 시스템 정보공유체계 개발 및 드론교통관리 시스템 구축 사업을 수행했습니다. 실시간 비행 승인, 충돌 회피, 관제 데이터 통합 관리 기능을 제공합니다.",
+    tags: ["UTM", "드론관제", "공공기관"],
+    img: "/images/case/case01.jpg",
+  },
+  {
+    id: 2,
+    eyebrow: "섬에어",
+    title: "항공운항 예약시스템\nIBE 개발 및 안정화",
+    desc: "섬에어 항공사를 위한 인터넷 부킹 엔진(IBE) 개발 및 안정화 작업을 수행했습니다. 실시간 좌석 조회, 예약, 결제 연동을 포함한 통합 예약 플랫폼을 구축했습니다.",
+    tags: ["IBE", "항공예약", "플랫폼"],
+    img: "/images/case/case02.jpg",
+  },
+  {
+    id: 3,
+    eyebrow: "인천테크노파크",
+    title: "PAV 원격 모니터링\n시스템 개발",
+    desc: "개인용 항공기(PAV) 부품 성능시험 및 원격 모니터링 시스템을 개발했습니다. HILS 기반 실시간 데이터 수집과 분석 기능으로 PAV 안전성 검증을 지원합니다.",
+    tags: ["PAV", "모니터링", "UAM"],
+    img: "/images/case/case03.jpg",
+  },
+];
+
+export default function CasePage() {
   return (
-    <article ref={ref}>
+    <article>
       <SubHero
-        label="UTM/UATM"
         title={
           <>
-            {/* <span style={{ color: "#111" }}>구축 및 운영</span>
-            <br /> */}
             <em>Case Studies</em>
           </>
         }
-        // desc="PAL Networks의 UTM/UATM 기술이 적용된 실제 사례를 소개합니다."
         navItems={UTM_NAV}
       />
 
       <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>
-                <p>UTM/UATM Case Studies</p>
-              </div>
-            </section>
+        <div className="inner-wrap">
+          <Motion.div className="cs-head" initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, ease: [0.4, 0, 0.2, 1] }}>
+            <h2 className="cs-title">
+              실제 현장에서 증명된
+              <br />
+              <em>팔네트웍스의 기술력</em>
+            </h2>
+            <p className="cs-desc">항공 IT부터 UAM·드론·UTM까지, 다양한 기관과 함께한 구축 사례를 소개합니다.</p>
+          </Motion.div>
+        </div>
 
-            <section className="sub-content-section">
-              <div className="inner">
-                <h3>주요 도입 및 운영 사례</h3>
-                <p>
-                  PAL Networks의 UTM/UATM 기술이 적용된 실제 사례를 소개합니다.
-                </p>
+        {/* 풀 와이드 케이스 */}
+        <div className="cs-list">
+          {CASES.map((item, i) => (
+            <Motion.div key={item.id} className="cs-item" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.7, ease: [0.4, 0, 0.2, 1] }}>
+              {/* 풀 와이드 이미지 */}
+              <div className="cs-img-wrap">
+                <img
+                  src={item.img}
+                  alt={item.title}
+                  className="cs-img"
+                  onError={(e) => {
+                    e.target.style.display = "none";
+                  }}
+                />
+                <div className="cs-img-fallback" />
+                <div className="cs-img-overlay" />
               </div>
-            </section>
-          </main> */}
-        </section>
+
+              {/* 텍스트 — 이미지 위에 왼쪽 고정 */}
+              <Motion.div className="cs-body" initial={{ opacity: 0, x: -24 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.6, delay: 0.2, ease: [0.4, 0, 0.2, 1] }}>
+                <span className="cs-num">0{item.id}</span>
+                <span className="cs-eyebrow">{item.eyebrow}</span>
+                <h3 className="cs-item-title">
+                  {item.title.split("\n").map((line, j) => (
+                    <span key={j}>
+                      {line}
+                      <br />
+                    </span>
+                  ))}
+                </h3>
+                <p className="cs-item-desc">{item.desc}</p>
+                <div className="cs-tags">
+                  {item.tags.map((tag) => (
+                    <span key={tag} className="cs-tag">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </Motion.div>
+            </Motion.div>
+          ))}
+        </div>
       </div>
     </article>
   );
 }
-
-export default CasePage;