|
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> |
||||||
|
); |
||||||
|
} |
||||||