도입사례

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,28 +12,72 @@ 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",
   },
 ];
 
+function CaseItem({ item }) {
+  const ref = useRef(null);
+  const inView = useInView(ref, { once: true, margin: "-15%" });
+
+  return (
+    <div ref={ref} className="cs-item">
+      {/* 이미지 — clipPath로 왼쪽에서 펼쳐짐 */}
+      <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] }}>
+        <img
+          src={item.img}
+          alt={item.title}
+          className="cs-img"
+          onError={(e) => {
+            e.target.style.display = "none";
+          }}
+        />
+        <div className="cs-img-fallback" />
+      </Motion.div>
+
+      {/* 텍스트 — 페이드인 */}
+      <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">
+          {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>
+    </div>
+  );
+}
+
 export default function CasePage() {
   return (
     <article>
@@ -55,49 +100,12 @@ export default function CasePage() {
             </h2>
             <p className="cs-desc">항공 IT부터 UAM·드론·UTM까지, 다양한 기관과 함께한 구축 사례를 소개합니다.</p>
           </Motion.div>
-        </div>
-
-        {/* 풀 와이드 케이스 */}
-        <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>
 
-              {/* 텍스트 — 이미지 위에 왼쪽 고정 */}
+          <div className="cs-list">
-              <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] }}>
+            {CASES.map((item) => (
-                <span className="cs-num">0{item.id}</span>
+              <CaseItem key={item.id} item={item} />
-                <span className="cs-eyebrow">{item.eyebrow}</span>
+            ))}
-                <h3 className="cs-item-title">
+          </div>
-                  {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>