도입사례

src/pages/utm/CasePage.jsx

@@ -1,4 +1,5 @@
-import { motion as Motion } from "framer-motion";
+import { motion as Motion, useInView } from "framer-motion";
+import { useRef } from "react";
 import SubHero from "../../components/SubHero";
 
 const UTM_NAV = [
@@ -11,58 +12,36 @@ const CASES = [
     id: 1,
     eyebrow: "한국공항공사",
     title: "KAC 드론교통관리\nUTM 시스템 구축",
-    desc: "공공용 UTM 시스템 정보공유체계 개발 및 드론교통관리 시스템 구축 사업을 수행했습니다. 실시간 비행 승인, 충돌 회피, 관제 데이터 통합 관리 기능을 제공합니다.",
+    desc: "한국공항공사의 공공용 UTM 시스템 정보공유체계 개발 및 드론교통관리 시스템 구축 사업을 수행했습니다. 실시간 비행 승인, 충돌 회피, 관제 데이터 통합 관리 기능을 제공하며 안전한 드론 운항 환경을 구현했습니다.",
-    tags: ["UTM", "드론관제", "공공기관"],
+    tags: ["UTM", "드론관제", "한국공항공사"],
     img: "/images/case/case01.jpg",
   },
   {
     id: 2,
-    eyebrow: "섬에어",
+    eyebrow: "국토교통부",
-    title: "항공운항 예약시스템\nIBE 개발 및 안정화",
+    title: "UAM 팀코리아\n워킹그룹 참여",
-    desc: "섬에어 항공사를 위한 인터넷 부킹 엔진(IBE) 개발 및 안정화 작업을 수행했습니다. 실시간 좌석 조회, 예약, 결제 연동을 포함한 통합 예약 플랫폼을 구축했습니다.",
+    desc: "국토교통부 주관 UAM 팀코리아(UTK) 워킹그룹에 참여하여 도심항공교통 운항 공역 비행체 감시 기술 개발 및 UAM 비행상황관리 시스템 구축에 기여했습니다.",
-    tags: ["IBE", "항공예약", "플랫폼"],
+    tags: ["UAM", "UATM", "국토교통부"],
     img: "/images/case/case02.jpg",
   },
   {
     id: 3,
-    eyebrow: "인천테크노파크",
+    eyebrow: "남원시 · 항공안전기술원",
-    title: "PAV 원격 모니터링\n시스템 개발",
+    title: "드론 실증도시\n구축 및 관제시스템",
-    desc: "개인용 항공기(PAV) 부품 성능시험 및 원격 모니터링 시스템을 개발했습니다. HILS 기반 실시간 데이터 수집과 분석 기능으로 PAV 안전성 검증을 지원합니다.",
+    desc: "남원시 드론 실증도시 구축사업 협약 체결 및 드론 규제 샌드박스 사업을 통해 드론 관리 체계에 따른 식별장치 및 비행 관제시스템을 구축했습니다.",
-    tags: ["PAV", "모니터링", "UAM"],
+    tags: ["드론", "실증도시", "관제시스템"],
     img: "/images/case/case03.jpg",
   },
 ];
 
-export default function CasePage() {
+function CaseItem({ item }) {
-  return (
+  const ref = useRef(null);
-    <article>
+  const inView = useInView(ref, { once: true, margin: "-15%" });
-      <SubHero
-        title={
-          <>
-            <em>Case Studies</em>
-          </>
-        }
-        navItems={UTM_NAV}
-      />
-
-      <div className="sub-content">
-        <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>
 
-        {/* 풀 와이드 케이스 */}
+  return (
-        <div className="cs-list">
+    <div ref={ref} className="cs-item">
-          {CASES.map((item, i) => (
+      {/* 이미지 — clipPath로 왼쪽에서 펼쳐짐 */}
-            <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] }}>
+      <Motion.div className="cs-img-wrap" initial={{ clipPath: "inset(0 100% 0 0)" }} animate={inView ? { clipPath: "inset(0 0% 0 0)" } : {}} transition={{ duration: 0.9, ease: [0.76, 0, 0.24, 1] }}>
-              {/* 풀 와이드 이미지 */}
-              <div className="cs-img-wrap">
         <img
           src={item.img}
           alt={item.title}
@@ -72,11 +51,10 @@ export default function CasePage() {
           }}
         />
         <div className="cs-img-fallback" />
-                <div className="cs-img-overlay" />
+      </Motion.div>
-              </div>
 
-              {/* 텍스트 — 이미지 위에 왼쪽 고정 */}
+      {/* 텍스트 — 페이드인 */}
-              <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] }}>
+      <Motion.div className="cs-body" initial={{ opacity: 0, y: 24 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.7, delay: 0.4, 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">
@@ -96,10 +74,40 @@ export default function CasePage() {
           ))}
         </div>
       </Motion.div>
+    </div>
+  );
+}
+
+export default function CasePage() {
+  return (
+    <article>
+      <SubHero
+        title={
+          <>
+            <em>Case Studies</em>
+          </>
+        }
+        navItems={UTM_NAV}
+      />
+
+      <div className="sub-content">
+        <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 className="cs-list">
+            {CASES.map((item) => (
+              <CaseItem key={item.id} item={item} />
             ))}
           </div>
         </div>
+      </div>
     </article>
   );
 }