You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
314 lines
12 KiB
314 lines
12 KiB
import { useRef, useState, useEffect } from "react"; |
|
import { motion, useScroll, useTransform } from "framer-motion"; |
|
import SubHero from "../../components/SubHero"; |
|
|
|
const COMPANY_NAV = [ |
|
{ label: "회사소개", to: "/company/about" }, |
|
{ label: "인증 및 특허현황", to: "/company/cert" }, |
|
{ label: "연혁", to: "/company/history" }, |
|
{ label: "고객 및 협력사", to: "/company/partners" }, |
|
{ label: "찾아오시는 길", to: "/company/location" }, |
|
]; |
|
|
|
const TABS = ["2020's", "2010's"]; |
|
|
|
const HISTORY = { |
|
"2020's": [ |
|
{ |
|
year: "2026", |
|
items: [ |
|
"KAC 드론교통관리 시스템 구축 (한국공항공사)", |
|
"공공용 UTM 시작품 정보공유체계 개발 (한국공항공사)", |
|
"DA42NG VR 시뮬레이터 구축 (청주대학교)", |
|
"국방벤처 혁신기술 지원사업 기업 선정 (인천국방벤처센터)", |
|
"인천 파브(PAV) 시제기 비행시험 지원사업 (인천테크노파크)", |
|
"인천광역시 지역혁신중심 대학지원체계(i-RISE) 산학공동 기술개발사업 (인하공업전문대학)\n- 저고도 드론 비행정보 기반 UTM 비정상상황 탐지·알림 시제품 개발", |
|
"인천지역 드론기업 바우처 지원사업 (인천테크노파크)", |
|
"감항인증 전문교육과정 위탁사업 (방위산업청)", |
|
"교육현안 해결형 에듀테크 프로젝트 선정 (한국교육학술정보원)\n- 경계선 지능 학생을 위한 맞춤형 AI 에듀테크 플랫폼 구축", |
|
"인천 파브(PAV) 시제기 개발 지원사업 (인천테크노파크)\n- K-인증기반 인천PAV 실증 및 핵심 부품 국산화", |
|
], |
|
}, |
|
{ |
|
year: "2025", |
|
items: [ |
|
"KAC 드론교통관리(UTM) 시스템 구축사업 (한국공항공사)", |
|
"항공우주 부트캠프사업단 홈페이지 구축 (청주대학교)", |
|
"DIAMOND DA40NG Simulator 구축 (청주대학교)", |
|
"UTM 시뮬레이터를 활용한 비행관제 시스템 전시 (부산 벡스코 드론쇼코리아)", |
|
"인천 파브(PAV) 기업대상 기업홍보 지원사업 선정 (인천테크노파크)", |
|
"파브(PAV) 부품기술개발 지원사업 (인천테크노파크)", |
|
"감항인증 전문교육과정 위탁사업 홈페이지 운영 (방위산업청)", |
|
"공공용 UTM 시작품 정보공유체계 개발 (한국공항공사)", |
|
"IBE 개발 및 안정화 (섬에어)", |
|
"기술혁신형 중소기업 이노비즈 취득", |
|
], |
|
}, |
|
{ |
|
year: "2024", |
|
items: [ |
|
"강화도 화개정원 유지보수 (강화군)", |
|
"타이드스퀘어 PRIVIA 항공 개발 업무 (타이드스퀘어)", |
|
"항공교통데이터시스템 (아이비리더스)", |
|
"24년 군 감항인증 전문교육과정 홈페이지 유지보수 (방위사업청)", |
|
"HILS 기반 PAV 부품 성능시험 시스템 (인하공업전문대학)", |
|
"PAV 원격 모니터링 시스템 (인천테크노파크)", |
|
"드론 지형추적비행 매뉴얼 개발 용역 (소방청 국립소방연구소)", |
|
"UTM 팀코리아(UTK) 워킹그룹 참여 (국토교통부)", |
|
"KAC 드론교통관리(UTM) 시스템 구축사업 (한국공항공사)", |
|
"도심항공교통(UTM, AAM등) 관련 사업 분석 위탁용역 (인천테크노파크)", |
|
], |
|
}, |
|
{ |
|
year: "2023", |
|
items: [ |
|
"섬에어(주) 항공운항 예약시스템 구축", |
|
"남원시 드론 실증도시 구축사업 협약 체결 (국토교통부)", |
|
"팔네트웍스와 베셀 MOU 체결", |
|
"UTM 운항 공역 비행체 감시 기술개발 사전기획 (인천테크노파크)", |
|
"블록체인 기반 드론교통관리(UTM) 시스템 정보공유체계 개발 (한국공항공사)", |
|
"UTM 컨설팅 (SKT)", |
|
"항공모빌리티(PAV) 부품 기술개발 지원사업 (인천테크노파크)", |
|
"LAANC/드론/PAV/UTM 비행상황관리 시스템 전시 (서울 ADEX 2023)", |
|
"UTM 비행상황관리 시스템 전시 (2023 K-UTM CONFEX)", |
|
"PAV GNSS 시뮬레이터 1세트 등 3종 제작 구매 (인하공업전문대)", |
|
], |
|
}, |
|
{ |
|
year: "2022", |
|
items: [ |
|
"현대자동차 QR 코드 출입시스템 운영 및 유지보수 (현대자동차)", |
|
"군감항인증전문교육과정위탁사업 (방위산업청)", |
|
"항공모빌리티(PAV) 부품 기술개발 (인천테크노파크)", |
|
"XR 메타버스 인천이음 프로젝트 활용확산 콘텐츠 개발 (인천테크노파크)", |
|
"드론교통관리(UTM) 시스템 설계", |
|
"남원시 항공산업(드론·UTM) 클러스터 조성 연구용역", |
|
"K-UTM CONFEX 전시회 참가 (무인비행장치 관제시스템)", |
|
"남원시 항공산업 업무협약", |
|
], |
|
}, |
|
{ |
|
year: "2021", |
|
items: [ |
|
"현대자동차 QR코드 출입시스템 운영 및 유지보수 (현대자동차)", |
|
"파브 기술 및 기업/산업 현황 분석 (인천테크노파크)", |
|
"KT 클라우드 인천총판 등록 (KT)", |
|
"드론 규제 샌드박스 사업 - 비행 관제시스템 구축 (항공안전기술원)", |
|
"KB 국민은행 소프트웨어 경진대회 메타버스 구축 (사피엔스 4.0)", |
|
"드론 실증 비즈니스 사업화(공공서비스 기술 고도화) 선정", |
|
"캐플릭스 OTA 항공서비스 구축 (제주패스)", |
|
"ADEX 2021 전시회 참가", |
|
"인천 PAV 컨소시엄 선정", |
|
"KMF(Korea Metaverse Festival) 전시회 참가", |
|
], |
|
}, |
|
{ |
|
year: "2020", |
|
items: [ |
|
"하이에어 통합시스템 유지보수 (하이에어)", |
|
"VR·AR 융합콘텐츠 실증 및 개발지원 과제 선정 (인천테크노파크)", |
|
"QR코드 활용 방문자 방역관리 모바일웹 개발 (인천관광공사)", |
|
"QR 출입명부 및 자동도어제어 시스템 개발 (현대자동차)", |
|
"하이에어 웹투어 연동 (하이에어)", |
|
"IATA Online Agency Accreditation 인증", |
|
], |
|
}, |
|
], |
|
"2010's": [ |
|
{ |
|
year: "2019", |
|
items: [ |
|
"IBS(PSS, 승무원 스케쥴, MRO) MOU 체결", |
|
"하이에어 IBS PSS 개발 및 납품", |
|
"하이에어 안전보안시스템(E-SMS) 개발", |
|
"하이에어 Weight & Balance System 개발", |
|
], |
|
}, |
|
{ |
|
year: "2018", |
|
items: [ |
|
"항공사 홈페이지 예약시스템 구축 (에어필립)", |
|
"드론을 활용한 항공등화시설 정밀점검 (항공안전기술원)", |
|
"PAL&TOUR 국외여행업 등록", |
|
"벤처기업 인증", |
|
"시험용 UTM 시스템 DB 구축 용역 개발 (KT)", |
|
"인천광역시 인천 항공 유망기업 지정", |
|
], |
|
}, |
|
{ |
|
year: "2017", |
|
items: [ |
|
"경량항공기 내비게이션 및 비행상황관리시스템 개발 (국토교통부)", |
|
"A CDM 설계 및 RMS 개선용역 (한국공항공사)", |
|
"IBTP MOU 체결", |
|
"항공사 정비시스템 구축 (에어필립)", |
|
"본사 로봇타워 이전", |
|
], |
|
}, |
|
{ |
|
year: "2016", |
|
items: ["항공인력양성사업 정보화시스템 개선 및 유지보수 (항공협회)"], |
|
}, |
|
{ |
|
year: "2015", |
|
items: [ |
|
"주민자치센터 홈페이지 운영시스템 (인천시)", |
|
"기업부설연구소 인정", |
|
"아우리포탈 ActiveX 제거사업 (인천공항공사)", |
|
"㈜팔네트웍스 법인 전환", |
|
"중소기업청 창업성장과제 채택 (완료: 성공판정)", |
|
], |
|
}, |
|
{ |
|
year: "2014", |
|
items: [ |
|
"개인기업 '팔네트웍스' 개업", |
|
"항공인력양성사업 정보화시스템 보완 용역 (항공협회)", |
|
"미얀마국제항공 웹사이트 구축 (크리스탈에비에이션)", |
|
"직접생산등록", |
|
"세계 책의 수도 홈페이지 구축용역 (인천시)", |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
function YearGroup({ group }) { |
|
const ref = useRef(null); |
|
const [active, setActive] = useState(false); |
|
|
|
useEffect(() => { |
|
const el = ref.current; |
|
if (!el) return; |
|
const observer = new IntersectionObserver( |
|
([entry]) => setActive(entry.isIntersecting), |
|
{ rootMargin: "-30% 0px -60% 0px" }, |
|
); |
|
observer.observe(el); |
|
return () => observer.disconnect(); |
|
}, []); |
|
|
|
return ( |
|
<div ref={ref} className="ht-group"> |
|
<div className={`ht-dot${active ? " is-active" : ""}`} /> |
|
<motion.h3 |
|
className="ht-year" |
|
animate={{ color: active ? "var(--color-primary)" : "#ccc" }} |
|
transition={{ duration: 0.4 }} |
|
> |
|
{group.year} |
|
</motion.h3> |
|
<ul className="ht-list"> |
|
{group.items.map((text, i) => ( |
|
<motion.li |
|
key={i} |
|
className="ht-item" |
|
initial={{ opacity: 0, y: 8 }} |
|
whileInView={{ opacity: 1, y: 0 }} |
|
viewport={{ once: true, margin: "-40px" }} |
|
transition={{ delay: i * 0.04, duration: 0.3 }} |
|
> |
|
<span className="ht-bullet" /> |
|
<span className="ht-text">{text}</span> |
|
</motion.li> |
|
))} |
|
</ul> |
|
</div> |
|
); |
|
} |
|
|
|
function TimelinePanel({ tab }) { |
|
const groups = HISTORY[tab]; |
|
const containerRef = useRef(null); |
|
|
|
const { scrollYProgress } = useScroll({ |
|
target: containerRef, |
|
offset: ["start 15%", "end 85%"], |
|
}); |
|
const lineScaleY = useTransform(scrollYProgress, [0, 1], [0, 1]); |
|
|
|
return ( |
|
<div className="ht-panel" ref={containerRef}> |
|
{/* 왼쪽 연대 */} |
|
<div className="ht-sidebar"> |
|
<div className="ht-decade">{tab}</div> |
|
<div className="ht-since">Since 2014</div> |
|
</div> |
|
|
|
{/* 중앙 라인 — 1px 얇은 선 */} |
|
<div className="ht-line-col"> |
|
<div className="ht-line-bg" /> |
|
<motion.div |
|
className="ht-line-fill" |
|
style={{ scaleY: lineScaleY, transformOrigin: "top" }} |
|
/> |
|
</div> |
|
|
|
{/* 오른쪽 콘텐츠 */} |
|
<div className="ht-content"> |
|
{groups.map((group) => ( |
|
<YearGroup key={group.year} group={group} /> |
|
))} |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default function HistoryPage() { |
|
const [activeTab, setActiveTab] = useState("2020's"); |
|
|
|
return ( |
|
<article> |
|
<SubHero |
|
label="Company" |
|
title={ |
|
<> |
|
<em>HISTORY</em> |
|
</> |
|
} |
|
navItems={COMPANY_NAV} |
|
/> |
|
|
|
<div className="sub-content"> |
|
<div className="inner-wrap"> |
|
{/* 상단 타이틀 */} |
|
<motion.div |
|
className="ht-header" |
|
initial={{ opacity: 0, y: 32 }} |
|
whileInView={{ opacity: 1, y: 0 }} |
|
viewport={{ once: true, margin: "-80px" }} |
|
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }} |
|
> |
|
<p className="ht-header-title"> |
|
Leading the Future |
|
<br /> |
|
<em> |
|
<span>of</span> <b>Aviation Technology</b> |
|
</em> |
|
</p> |
|
<em className="ht-header-sub"> |
|
항공 IT 소프트웨어 개발부터 드론·UTM·UATM 미래 모빌리티까지, |
|
<br /> |
|
하늘길을 개척해온 팔네트웍스의 10년 발자취를 담았습니다. |
|
</em> |
|
</motion.div> |
|
|
|
{/* 연혁 카드 박스 */} |
|
<div className="ht-card"> |
|
<div className="ht-tabs"> |
|
{TABS.map((tab) => ( |
|
<button |
|
key={tab} |
|
className={`ht-tab${activeTab === tab ? " is-active" : ""}`} |
|
onClick={() => setActiveTab(tab)} |
|
> |
|
{tab} |
|
</button> |
|
))} |
|
</div> |
|
<TimelinePanel key={activeTab} tab={activeTab} /> |
|
</div> |
|
</div> |
|
</div> |
|
</article> |
|
); |
|
}
|
|
|