|
After Width: | Height: | Size: 7.2 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 6.7 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 940 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
@ -0,0 +1,208 @@
|
||||
import { useRef } from "react"; |
||||
import SubHero from "../../components/SubHero"; |
||||
import { motion, useInView } from "framer-motion"; |
||||
|
||||
const ease = [0.22, 1, 0.36, 1]; |
||||
|
||||
const COMPANY_NAV = [ |
||||
{ label: "회사소개", to: "/company/about" }, |
||||
{ label: "인증 및 특허현황", to: "/company/cert" }, |
||||
{ label: "연혁", to: "/company/history" }, |
||||
{ label: "고객 및 협력사", to: "/company/partners" }, |
||||
{ label: "찾아오시는 길", to: "/company/location" }, |
||||
]; |
||||
|
||||
const CERTS = [ |
||||
{ imgs: ["관광벤처인증.png"], label: "관광벤처인증" }, |
||||
{ imgs: ["관광사업자등록증.png"], label: "관광사업자등록증" }, |
||||
{ imgs: ["국방벤처기업1.png"], label: "국방벤처기업" }, |
||||
{ imgs: ["국방벤처기업2.png"], label: "국방벤처기업" }, |
||||
{ imgs: ["기업부설연구소.png"], label: "기업부설연구소" }, |
||||
{ imgs: ["방송통신기자재_KC_인증.png"], label: "방송통신기자재 KC 인증" }, |
||||
{ imgs: ["벤처기업확인서.png"], label: "벤처기업확인서" }, |
||||
{ imgs: ["이노비즈확인서_팔네트웍스.png"], label: "이노비즈확인서" }, |
||||
{ imgs: ["정보통신공사업등록증.png"], label: "정보통신공사업등록증" }, |
||||
{ imgs: ["항공선도기업.png"], label: "항공선도기업" }, |
||||
]; |
||||
|
||||
const PATENTS = [ |
||||
{ imgs: ["대기질측정장치시스템.png"], label: "대기질측정장치 시스템" }, |
||||
{ |
||||
imgs: ["도심환경교통.png"], |
||||
label: "도심환경교통의 비행체 성능 시뮬레이션 시스템", |
||||
}, |
||||
{ |
||||
imgs: ["특허증.png"], |
||||
label: "이기종 프로토콜 지원 무인 비행체 데이터 중계장치", |
||||
}, |
||||
]; |
||||
|
||||
const PATENT_APPLICATIONS = [ |
||||
{ title: "인터넷 기반의 항공권 예약 방법 및 시스템", date: "2022-02-17" }, |
||||
{ |
||||
title: "드론 식별장치 및 이를 이용한 비행 관제 시스템", |
||||
date: "2022-02-17", |
||||
}, |
||||
{ title: "메타버스를 활용한 교육 방법 및 시스템", date: "2022-02-17" }, |
||||
{ |
||||
title: "메타버스를 활용한 모의비행 훈련 방법 및 시스템", |
||||
date: "2022-02-17", |
||||
}, |
||||
{ title: "대기질 측정장치 및 시스템", date: "2023-02-27" }, |
||||
{ title: "무인 비행체의 비행 관리 및 모니터링 장치", date: "2023-06-26" }, |
||||
{ |
||||
title: "식별자 분석을 통한 무인 비행체 비행 관리 및 모니터링 장치", |
||||
date: "2024-01-08", |
||||
}, |
||||
]; |
||||
|
||||
function ImgGrid({ items, inView, folder = "cert" }) { |
||||
const basePath = import.meta.env.BASE_URL; |
||||
return ( |
||||
<ul className="cert-grid"> |
||||
{items.map((item, i) => ( |
||||
<motion.li |
||||
key={item.label} |
||||
className={`cert-grid__item${item.imgs.length > 1 ? " cert-grid__item--wide" : ""}`} |
||||
initial={{ opacity: 0, y: 32 }} |
||||
animate={inView ? { opacity: 1, y: 0 } : {}} |
||||
transition={{ duration: 0.6, delay: i * 0.08, ease }} |
||||
> |
||||
<div className="cert-grid__card"> |
||||
<div className="cert-grid__imgs"> |
||||
{item.imgs.map((img, j) => ( |
||||
<div key={j} className="cert-grid__img-wrap"> |
||||
<img |
||||
src={`${basePath}images/${folder}/${img}`} |
||||
alt={item.label} |
||||
className="cert-grid__img" |
||||
/> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
<p className="cert-grid__label">{item.label}</p> |
||||
</motion.li> |
||||
))} |
||||
</ul> |
||||
); |
||||
} |
||||
export default function CertPage() { |
||||
const ref = useRef(null); |
||||
const certRef = useRef(null); |
||||
const certInView = useInView(certRef, { once: true, margin: "-80px" }); |
||||
const patentRef = useRef(null); |
||||
const patentInView = useInView(patentRef, { once: true, margin: "-80px" }); |
||||
const applicationRef = useRef(null); |
||||
const applicationInView = useInView(applicationRef, { |
||||
once: true, |
||||
margin: "-80px", |
||||
}); |
||||
return ( |
||||
<article ref={ref}> |
||||
<SubHero |
||||
label="Company" |
||||
title={ |
||||
<> |
||||
<em>Certifications</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"> |
||||
Certified <span>Expertise</span>, |
||||
<br /> |
||||
Protected <b>Innovation</b> |
||||
</p> |
||||
<em className="ht-header-sub"> |
||||
인증된 전문성과 특허로 보호된 혁신 기술 |
||||
</em> |
||||
</motion.div> |
||||
|
||||
{/* 인증 */} |
||||
<section className="cert-section" ref={certRef}> |
||||
<motion.div |
||||
className="cert-section__header" |
||||
initial={{ opacity: 0, y: 20 }} |
||||
animate={certInView ? { opacity: 1, y: 0 } : {}} |
||||
transition={{ duration: 0.6, ease }} |
||||
> |
||||
<span className="about-section-label">Certification</span> |
||||
<h2 className="cert-section__title">인증 현황</h2> |
||||
<p className="cert-section__desc"> |
||||
팔네트웍스가 보유한 주요 인증 목록입니다. |
||||
</p> |
||||
</motion.div> |
||||
<ImgGrid items={CERTS} inView={certInView} /> |
||||
</section> |
||||
|
||||
{/* 특허 */} |
||||
<section className="cert-section" ref={patentRef}> |
||||
<motion.div |
||||
className="cert-section__header" |
||||
initial={{ opacity: 0, y: 20 }} |
||||
animate={patentInView ? { opacity: 1, y: 0 } : {}} |
||||
transition={{ duration: 0.6, ease }} |
||||
> |
||||
<span className="about-section-label">Patent</span> |
||||
<h2 className="cert-section__title">특허 현황</h2> |
||||
<p className="cert-section__desc"> |
||||
팔네트웍스가 보유한 주요 특허 목록입니다. |
||||
</p> |
||||
</motion.div> |
||||
<ImgGrid |
||||
items={PATENTS} |
||||
inView={patentInView} |
||||
folder="cert/patents" |
||||
/> |
||||
</section> |
||||
|
||||
<section className="patent-section" ref={applicationRef}> |
||||
<motion.div |
||||
className="cert-section__header" |
||||
initial={{ opacity: 0, y: 20 }} |
||||
whileInView={{ opacity: 1, y: 0 }} |
||||
viewport={{ once: true, margin: "-80px" }} |
||||
transition={{ duration: 0.6, ease }} |
||||
> |
||||
<span className="about-section-label">Patent</span> |
||||
<h2 className="cert-section__title">출원 현황</h2> |
||||
</motion.div> |
||||
<table className="patent-table"> |
||||
<thead> |
||||
<tr> |
||||
<th>발명의 명칭</th> |
||||
<th>출원일자</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{PATENT_APPLICATIONS.map((item, i) => ( |
||||
<motion.tr |
||||
key={i} |
||||
initial={{ opacity: 0, y: 16 }} |
||||
whileInView={{ opacity: 1, y: 0 }} |
||||
viewport={{ once: true, margin: "-40px" }} |
||||
transition={{ duration: 0.5, delay: i * 0.06, ease }} |
||||
> |
||||
<td>{item.title}</td> |
||||
<td>{item.date}</td> |
||||
</motion.tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
</article> |
||||
); |
||||
} |
||||