|
|
|
|
@ -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 = [ |
|
|
|
|
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 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> |
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
{/* 텍스트 — 이미지 위에 왼쪽 고정 */} |
|
|
|
|
<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> |
|
|
|
|
</section> |
|
|
|
|
</main> */} |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default CasePage; |
|
|
|
|
|
