|
|
|
|
@ -2,7 +2,24 @@ import { useRef, useState, useEffect } from "react";
|
|
|
|
|
import { motion, AnimatePresence, useInView } from "framer-motion"; |
|
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
Plane, |
|
|
|
|
Globe, |
|
|
|
|
UtensilsCrossed, |
|
|
|
|
Thermometer, |
|
|
|
|
MapPin, |
|
|
|
|
Link, |
|
|
|
|
QrCode, |
|
|
|
|
Users, |
|
|
|
|
Siren, |
|
|
|
|
Wrench, |
|
|
|
|
PlusCircle, |
|
|
|
|
Settings, |
|
|
|
|
ShieldCheck, |
|
|
|
|
Monitor, |
|
|
|
|
Building2, |
|
|
|
|
ClipboardList, |
|
|
|
|
} from "lucide-react"; |
|
|
|
|
const ease = [0.25, 0.1, 0.25, 1]; |
|
|
|
|
|
|
|
|
|
const PROJECTS = [ |
|
|
|
|
@ -13,17 +30,17 @@ const PROJECTS = [
|
|
|
|
|
image: "/images/si_img1.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "✈️", |
|
|
|
|
icon: <Plane size={14} />, |
|
|
|
|
title: "통합 여행 포털", |
|
|
|
|
text: "렌터카·숙박·항공 통합 서비스 구축", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "🌏", |
|
|
|
|
icon: <Globe size={14} />, |
|
|
|
|
title: "해외시장 진출", |
|
|
|
|
text: "국제선 항공으로 해외시장 초석 마련", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "🍽️", |
|
|
|
|
icon: <UtensilsCrossed size={14} />, |
|
|
|
|
title: "종합 서비스", |
|
|
|
|
text: "맛집·카페로 이어지는 제주패스 구현", |
|
|
|
|
}, |
|
|
|
|
@ -36,17 +53,17 @@ const PROJECTS = [
|
|
|
|
|
image: "/images/si_img2.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "🌡️", |
|
|
|
|
icon: <Thermometer size={14} />, |
|
|
|
|
title: "건강 상태 관리", |
|
|
|
|
text: "체류 기간 중 건강 상태 체크 및 관리", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "📍", |
|
|
|
|
icon: <MapPin size={14} />, |
|
|
|
|
title: "동선 파악", |
|
|
|
|
text: "이동 동선 파악 및 정보 관리 시스템", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "🔗", |
|
|
|
|
icon: <Link size={14} />, |
|
|
|
|
title: "시스템 연계", |
|
|
|
|
text: "중국전담여행사 전자관리시스템 연계", |
|
|
|
|
}, |
|
|
|
|
@ -59,17 +76,17 @@ const PROJECTS = [
|
|
|
|
|
image: "/images/si_img3.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "📱", |
|
|
|
|
icon: <QrCode size={14} />, |
|
|
|
|
title: "QR 방역 관리", |
|
|
|
|
text: "QR코드 활용 방문자 방역 관리 구축", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "👥", |
|
|
|
|
icon: <Users size={14} />, |
|
|
|
|
title: "방문자 관리", |
|
|
|
|
text: "체계적 방문자 관리 및 출입 정보 제공", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "🚨", |
|
|
|
|
icon: <Siren size={14} />, |
|
|
|
|
title: "신속 대응", |
|
|
|
|
text: "확진자 발생 시 신속한 방역 대응 지원", |
|
|
|
|
}, |
|
|
|
|
@ -82,17 +99,17 @@ const PROJECTS = [
|
|
|
|
|
image: "/images/si_img4.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "🔧", |
|
|
|
|
icon: <Wrench size={14} />, |
|
|
|
|
title: "오류 수정", |
|
|
|
|
text: "시스템 오류 수정 및 불편 요소 개선", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "➕", |
|
|
|
|
icon: <PlusCircle size={14} />, |
|
|
|
|
title: "기능 추가", |
|
|
|
|
text: "필요 기능 추가 개발 및 데이터 추출", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "⚙️", |
|
|
|
|
icon: <Settings size={14} />, |
|
|
|
|
title: "운영 안정화", |
|
|
|
|
text: "시스템 최적화를 통한 운영 안정화", |
|
|
|
|
}, |
|
|
|
|
@ -105,17 +122,17 @@ const PROJECTS = [
|
|
|
|
|
image: "/images/si_img5.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "📱", |
|
|
|
|
icon: <QrCode size={14} />, |
|
|
|
|
title: "QR 방문자 관리", |
|
|
|
|
text: "QR코드 활용 방문자 방역 관리 시스템", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "🚨", |
|
|
|
|
icon: <Siren size={14} />, |
|
|
|
|
title: "출입 정보 제공", |
|
|
|
|
text: "확진자 발생 시 정확한 출입 정보 제공", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "🖥️", |
|
|
|
|
icon: <Monitor size={14} />, |
|
|
|
|
title: "미디어 월 연동", |
|
|
|
|
text: "미디어 월 연동을 통한 고객 응대", |
|
|
|
|
}, |
|
|
|
|
@ -128,52 +145,32 @@ const PROJECTS = [
|
|
|
|
|
image: "/images/si_img6.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "🏗️", |
|
|
|
|
icon: <Building2 size={14} />, |
|
|
|
|
title: "인프라 구축", |
|
|
|
|
text: "항공 운송사업자 필수 서비스 및 인프라", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "✈️", |
|
|
|
|
icon: <Plane size={14} />, |
|
|
|
|
title: "국제선 대응", |
|
|
|
|
text: "국제선 취항 대응 및 부가서비스 매출 증대", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "📋", |
|
|
|
|
icon: <ClipboardList size={14} />, |
|
|
|
|
title: "고도화 체계", |
|
|
|
|
text: "국토부 필수 시스템 및 서비스 고도화", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: "07", |
|
|
|
|
title: "하이에어 항공 시스템 운영", |
|
|
|
|
tags: ["항공", "운영/유지보수"], |
|
|
|
|
image: "/images/si_img7.png", |
|
|
|
|
desc: [ |
|
|
|
|
{ |
|
|
|
|
icon: "🔧", |
|
|
|
|
title: "오류 수정", |
|
|
|
|
text: "시스템 오류 수정 및 불편 요소 개선", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "➕", |
|
|
|
|
title: "기능 추가", |
|
|
|
|
text: "필요 기능 추가 개발 및 데이터 추출", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
icon: "⚙️", |
|
|
|
|
title: "운영 안정화", |
|
|
|
|
text: "시스템 최적화를 통한 운영 안정화", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
const AUTO_DELAY = 4000; |
|
|
|
|
|
|
|
|
|
const AUTO_DELAY = 3000; |
|
|
|
|
|
|
|
|
|
function SiPage() { |
|
|
|
|
const basePath = import.meta.env.BASE_URL; |
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
const sectionRef = useRef(null); |
|
|
|
|
const sliderRef = useRef(null); |
|
|
|
|
const cardRef = useRef(null); |
|
|
|
|
const dragStartX = useRef(null); |
|
|
|
|
const dragStartCurrent = useRef(null); |
|
|
|
|
const inView = useInView(sectionRef, { once: true, margin: "-100px" }); |
|
|
|
|
@ -181,25 +178,55 @@ function SiPage() {
|
|
|
|
|
const [paused, setPaused] = useState(false); |
|
|
|
|
const total = PROJECTS.length; |
|
|
|
|
|
|
|
|
|
const canPrev = current > 0; |
|
|
|
|
const canNext = current < total - 1; |
|
|
|
|
const [cardWidth, setCardWidth] = useState(0); |
|
|
|
|
|
|
|
|
|
const prev = () => { |
|
|
|
|
if (!canPrev) return; |
|
|
|
|
setCurrent((c) => c - 1); |
|
|
|
|
useEffect(() => { |
|
|
|
|
const update = () => { |
|
|
|
|
if (cardRef.current) { |
|
|
|
|
setCardWidth(cardRef.current.offsetWidth); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
update(); |
|
|
|
|
window.addEventListener("resize", update); |
|
|
|
|
return () => window.removeEventListener("resize", update); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
const scrollToCard = (index) => { |
|
|
|
|
if (window.innerWidth <= 768 && sliderRef.current && cardRef.current) { |
|
|
|
|
const cardW = cardRef.current.offsetWidth; |
|
|
|
|
const gap = window.innerWidth <= 480 ? 14 : 14; |
|
|
|
|
sliderRef.current.scrollTo({ |
|
|
|
|
left: index * (cardW + gap), |
|
|
|
|
behavior: "smooth", |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const prev = () => { |
|
|
|
|
setCurrent((c) => { |
|
|
|
|
const nextIdx = c <= 0 ? total - 1 : c - 1; |
|
|
|
|
scrollToCard(nextIdx); |
|
|
|
|
return nextIdx; |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
const next = () => { |
|
|
|
|
if (!canNext) return; |
|
|
|
|
setCurrent((c) => c + 1); |
|
|
|
|
setCurrent((c) => { |
|
|
|
|
const nextIdx = c >= total - 1 ? 0 : c + 1; |
|
|
|
|
scrollToCard(nextIdx); |
|
|
|
|
return nextIdx; |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
useEffect(() => { |
|
|
|
|
if (paused) return; |
|
|
|
|
const timer = setInterval(() => { |
|
|
|
|
setCurrent((c) => (c + 1) % total); |
|
|
|
|
setCurrent((c) => { |
|
|
|
|
const nextIdx = (c + 1) % total; |
|
|
|
|
scrollToCard(nextIdx); |
|
|
|
|
return nextIdx; |
|
|
|
|
}); |
|
|
|
|
}, AUTO_DELAY); |
|
|
|
|
return () => clearInterval(timer); |
|
|
|
|
}, [paused, total]); |
|
|
|
|
|
|
|
|
|
const handleDragStart = (e) => { |
|
|
|
|
dragStartX.current = |
|
|
|
|
e.type === "touchstart" ? e.touches[0].clientX : e.clientX; |
|
|
|
|
@ -233,7 +260,8 @@ function SiPage() {
|
|
|
|
|
navItems={BUSINESS_NAV} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
|
<div className="sub-content si-archive-wrap"> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
<section |
|
|
|
|
className="si_archive" |
|
|
|
|
ref={sectionRef} |
|
|
|
|
@ -257,9 +285,15 @@ function SiPage() {
|
|
|
|
|
animate={inView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, delay: 0.1, ease }} |
|
|
|
|
> |
|
|
|
|
{window.innerWidth <= 768 ? ( |
|
|
|
|
"수행사업 아카이브" |
|
|
|
|
) : ( |
|
|
|
|
<> |
|
|
|
|
수행사업 |
|
|
|
|
<br /> |
|
|
|
|
아카이브 |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
</motion.h2> |
|
|
|
|
<motion.p |
|
|
|
|
className="si_archive__desc" |
|
|
|
|
@ -267,23 +301,36 @@ function SiPage() {
|
|
|
|
|
animate={inView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, delay: 0.2, ease }} |
|
|
|
|
> |
|
|
|
|
{window.innerWidth <= 768 ? ( |
|
|
|
|
"PAL Networks가 구축한 주요 프로젝트를 소개합니다." |
|
|
|
|
) : ( |
|
|
|
|
<> |
|
|
|
|
PAL Networks가 구축한 |
|
|
|
|
<br /> |
|
|
|
|
주요 프로젝트를 소개합니다. |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
</motion.p> |
|
|
|
|
|
|
|
|
|
{/* 네비게이션 */} |
|
|
|
|
<div className="si_archive__nav"> |
|
|
|
|
<button |
|
|
|
|
<motion.button |
|
|
|
|
className="si_archive__nav-btn" |
|
|
|
|
onClick={prev} |
|
|
|
|
disabled={!canPrev} |
|
|
|
|
aria-label="이전" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={inView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, delay: 0.4, ease }} |
|
|
|
|
> |
|
|
|
|
← |
|
|
|
|
</button> |
|
|
|
|
</motion.button> |
|
|
|
|
|
|
|
|
|
<div className="si_archive__progress"> |
|
|
|
|
<motion.div |
|
|
|
|
className="si_archive__progress" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={inView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, delay: 0.4, ease }} |
|
|
|
|
> |
|
|
|
|
<span className="si_archive__progress-cur"> |
|
|
|
|
{String(current + 1).padStart(2, "0")} |
|
|
|
|
</span> |
|
|
|
|
@ -291,21 +338,28 @@ function SiPage() {
|
|
|
|
|
<span className="si_archive__progress-total"> |
|
|
|
|
{String(total).padStart(2, "0")} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</motion.div> |
|
|
|
|
|
|
|
|
|
<button |
|
|
|
|
<motion.button |
|
|
|
|
className="si_archive__nav-btn" |
|
|
|
|
onClick={next} |
|
|
|
|
disabled={!canNext} |
|
|
|
|
aria-label="다음" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={inView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, delay: 0.4, ease }} |
|
|
|
|
> |
|
|
|
|
→ |
|
|
|
|
</button> |
|
|
|
|
</motion.button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* 슬라이더 */} |
|
|
|
|
<div className="si_archive__right"> |
|
|
|
|
<motion.div |
|
|
|
|
initial={{ opacity: 0, y: 30 }} |
|
|
|
|
animate={inView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, delay: 0.3, ease }} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className="si_archive__slider" |
|
|
|
|
style={{ display: "flex" }} |
|
|
|
|
@ -313,15 +367,27 @@ function SiPage() {
|
|
|
|
|
onMouseUp={handleDragEnd} |
|
|
|
|
onTouchStart={handleDragStart} |
|
|
|
|
onTouchEnd={handleDragEnd} |
|
|
|
|
ref={sliderRef} |
|
|
|
|
> |
|
|
|
|
<motion.div |
|
|
|
|
className="si_archive__track" |
|
|
|
|
animate={{ x: `calc(-${current} * (65% + 18px))` }} |
|
|
|
|
animate={{ |
|
|
|
|
x: |
|
|
|
|
window.innerWidth <= 768 |
|
|
|
|
? 0 |
|
|
|
|
: cardWidth |
|
|
|
|
? -(current * (cardWidth + 18)) |
|
|
|
|
: 0, |
|
|
|
|
}} |
|
|
|
|
transition={{ duration: 0.55, ease }} |
|
|
|
|
style={{ alignItems: "stretch" }} |
|
|
|
|
> |
|
|
|
|
{PROJECTS.map((project) => ( |
|
|
|
|
<div key={project.id} className="si_archive__card"> |
|
|
|
|
{PROJECTS.map((project, idx) => ( |
|
|
|
|
<div |
|
|
|
|
key={project.id} |
|
|
|
|
className="si_archive__card" |
|
|
|
|
ref={idx === 0 ? cardRef : null} |
|
|
|
|
> |
|
|
|
|
<div className="si_archive__card-img"> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/si_img${parseInt(project.id)}.png`} |
|
|
|
|
@ -368,10 +434,12 @@ function SiPage() {
|
|
|
|
|
))} |
|
|
|
|
</motion.div> |
|
|
|
|
</div> |
|
|
|
|
</motion.div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
