diff --git a/public/images/si_img1.png b/public/images/si_img1.png index 8997ee7..2bd7597 100644 Binary files a/public/images/si_img1.png and b/public/images/si_img1.png differ diff --git a/src/css/common.css b/src/css/common.css index c9bc359..ff303d3 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -915,9 +915,9 @@ body{overflow-x:hidden;} /* ======================================== SI PAGE - PROJECT ARCHIVE SECTION ======================================== */ - +.si-archive-wrap .inner-wrap { max-width: none; padding: 0; margin: 0; } .si_archive { padding:100px 0 120px; max-width:1660px; margin-left: auto; margin-right: 0;} -.si_archive__main { display:flex; align-items:flex-start; gap:48px; } +.si_archive__main { display:flex; align-items:flex-start; gap:46px; } .si_archive__header { flex: 0 0 320px; padding-top: 24px; } .si_archive__right { flex:1; min-width:0; } .si_archive__eyebrow { display:block; font-size:12px; font-weight:600; letter-spacing:.12em; color:#2563eb; text-transform:uppercase; margin-bottom:16px; } @@ -930,12 +930,10 @@ body{overflow-x:hidden;} .si_archive__slider { overflow: hidden; user-select: none; cursor: grab} .si_archive__slider:active { cursor: grabbing; } -.si_archive__track { display:flex; gap:18px; will-change:transform; } - -.si_archive__card { flex: 0 0 65%; padding: 20px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-sizing: border-box; display: flex; flex-direction: column; } +.si_archive__track { display: flex; gap: 18px; will-change: transform; padding-right: 40px; } +.si_archive__card { flex: 0 0 65%; padding: 20px; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-sizing: border-box; display: flex; flex-direction: column; isolation: isolate; } .si_archive__card-header { display: flex; align-items: center; gap: 12px; } -.si_archive__card-img { width: 100%; aspect-ratio: 16/8; flex-shrink: 0; background: #eef2f7; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; } -.si_archive__card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 8px; } +.si_archive__card-img { width: 100%; aspect-ratio: 16/8; flex-shrink: 0; background: #eef2f7; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }.si_archive__card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 8px; } .si_archive__card-img-placeholder { position:absolute; inset:0; background:linear-gradient(135deg,#cbd5e1 0%,#94a3b8 100%); } .si_archive__card-img img + .si_archive__card-img-placeholder { display:none; } .si_archive__card-body { padding-top: 16px; display: flex; flex-direction: column; gap: 12px; } @@ -947,9 +945,9 @@ body{overflow-x:hidden;} .si_archive__tag { padding: 3px 8px; border: 1px solid #d1d5db; border-radius: 999px; font-size: 10px; color: #555; background: #fff; } .si_archive__card-desc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #f1f1f1; padding-top: 14px; } .si_archive__card-desc li { display: flex; flex-direction: column; gap: 6px; } -.si_archive__card-desc-icon { width: 28px; height: 28px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; } -.si_archive__card-desc-title { font-size: 12px; font-weight: 700; color: #111; } -.si_archive__card-desc-text { font-size: 11px; line-height: 1.5; color: #888; } +.si_archive__card-desc-icon { width: 28px; height: 28px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--color-primary); } +.si_archive__card-desc-title { font-size: 13px; font-weight: 700; color: #111; } +.si_archive__card-desc-text { font-size: 12px; line-height: 1.5; color: #888; } .si_archive__nav { width: 100%; margin-top: 40px; display: flex; align-items: center; gap: 16px; } .si_archive__nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: transparent; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #111; flex-shrink: 0; transition: all .25s; } @@ -961,40 +959,54 @@ body{overflow-x:hidden;} .si_archive__progress-divider { font-size: 14px; color: #ccc; } .si_archive__progress-total { font-size: 14px; font-weight: 500; color: #bbb; min-width: 28px; } -@media (max-width:1200px) { - .si_archive__main { gap:36px; } + +@media (max-width: 1200px) { + .si_archive__main { gap: 36px; } .si_archive__header { flex: 0 0 260px; } .si_archive__card { flex: 0 0 72%; } - .si_archive__nav { width:70%; } } -@media (max-width:1024px) { - .si_archive { padding:72px 0 80px; } - .si_archive__main { flex-direction:column; gap:36px; } - .si_archive__header { flex:none; width:100%; padding-top:0; } - .si_archive__title br, - .si_archive__desc br { display:none; } - .si_archive__right { width:100%; } +@media (max-width: 1024px) { + .si_archive { padding: 72px 0 80px; } + .si_archive__main { flex-direction: column; gap: 36px; } + .si_archive__header { flex: none; width: 100%; padding-top: 0; } + .si_archive__right { width: 100%; } .si_archive__card { flex: 0 0 80%; } - .si_archive__nav { width:100%; margin-top:30px; } + .si_archive__card-desc { grid-template-columns: repeat(2, 1fr); } + .si_archive__nav { margin-top: 20px; } } -@media (max-width:768px) { - .si_archive { padding:56px 0 64px; } - .si_archive__main { gap:28px; } - .si_archive__slider { gap:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } - .si_archive__slider::-webkit-scrollbar { display:none; } +@media (max-width: 768px) { + .si-archive-wrap .inner-wrap { padding: 0 20px; } + .si_archive { padding: 56px 0 64px; } + .si_archive__main { gap: 28px; } + .si_archive__right { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); } + .si_archive__slider { overflow-x: auto; padding: 0 20px 4px; scrollbar-width: none; } + .si_archive__slider::-webkit-scrollbar { display: none; } + .si_archive__track { gap: 14px; } .si_archive__card { flex: 0 0 82%; } - .si_archive__card-img { aspect-ratio:16/10; } - .si_archive__card-body { padding:18px 18px 20px; } - .si_archive__nav { gap:14px; margin-top:26px; } - .si_archive__nav-btn { width:40px; height:40px; font-size:16px; } -} + + .si_archive__card-img { aspect-ratio: 16/6; } + .si_archive__card-body { padding-top: 12px; gap: 10px; } + .si_archive__nav { gap: 14px; margin-top: 20px; } + .si_archive__nav-btn { width: 40px; height: 40px; font-size: 16px; } + .si_archive__card-desc { grid-template-columns: repeat(1, 1fr); gap: 10px; } + .si_archive__card-desc li { flex-direction: row; align-items: flex-start; gap: 10px; align-items: center;} + .si_archive__card-desc-icon { flex-shrink: 0; } + .si_archive__card-desc-title { font-size: 12px; margin-bottom: 2px; } + .si_archive__card-desc-text { font-size: 11px; } + .si_archive__desc br { display: none; } -@media (max-width:480px) { - .si_archive__card { flex:0 0 86%; } - .si_archive__title { font-size:30px; } - .si_archive__desc { font-size:13px; } - .si_archive__progress { gap:8px; } } +@media (max-width: 480px) { + .si-archive-wrap .inner-wrap { padding: 0 16px; } + .si_archive__right { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); } + .si_archive__slider { padding: 0 16px 4px; } + .si_archive__card { flex: 0 0 calc(100vw - 48px); } + .si_archive__card-img { aspect-ratio: 8/6; } + .si_archive__card-desc { grid-template-columns: repeat(1, 1fr); } + .si_archive__title { font-size: 30px; } + .si_archive__desc { font-size: 13px; } + .si_archive__progress { gap: 8px; } +} \ No newline at end of file diff --git a/src/pages/business/SiPage.jsx b/src/pages/business/SiPage.jsx index 6399027..72d1751 100644 --- a/src/pages/business/SiPage.jsx +++ b/src/pages/business/SiPage.jsx @@ -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: , title: "통합 여행 포털", text: "렌터카·숙박·항공 통합 서비스 구축", }, { - icon: "🌏", + icon: , title: "해외시장 진출", text: "국제선 항공으로 해외시장 초석 마련", }, { - icon: "🍽️", + icon: , title: "종합 서비스", text: "맛집·카페로 이어지는 제주패스 구현", }, @@ -36,17 +53,17 @@ const PROJECTS = [ image: "/images/si_img2.png", desc: [ { - icon: "🌡️", + icon: , title: "건강 상태 관리", text: "체류 기간 중 건강 상태 체크 및 관리", }, { - icon: "📍", + icon: , title: "동선 파악", text: "이동 동선 파악 및 정보 관리 시스템", }, { - icon: "🔗", + icon: , title: "시스템 연계", text: "중국전담여행사 전자관리시스템 연계", }, @@ -59,17 +76,17 @@ const PROJECTS = [ image: "/images/si_img3.png", desc: [ { - icon: "📱", + icon: , title: "QR 방역 관리", text: "QR코드 활용 방문자 방역 관리 구축", }, { - icon: "👥", + icon: , title: "방문자 관리", text: "체계적 방문자 관리 및 출입 정보 제공", }, { - icon: "🚨", + icon: , title: "신속 대응", text: "확진자 발생 시 신속한 방역 대응 지원", }, @@ -82,17 +99,17 @@ const PROJECTS = [ image: "/images/si_img4.png", desc: [ { - icon: "🔧", + icon: , title: "오류 수정", text: "시스템 오류 수정 및 불편 요소 개선", }, { - icon: "➕", + icon: , title: "기능 추가", text: "필요 기능 추가 개발 및 데이터 추출", }, { - icon: "⚙️", + icon: , title: "운영 안정화", text: "시스템 최적화를 통한 운영 안정화", }, @@ -105,17 +122,17 @@ const PROJECTS = [ image: "/images/si_img5.png", desc: [ { - icon: "📱", + icon: , title: "QR 방문자 관리", text: "QR코드 활용 방문자 방역 관리 시스템", }, { - icon: "🚨", + icon: , title: "출입 정보 제공", text: "확진자 발생 시 정확한 출입 정보 제공", }, { - icon: "🖥️", + icon: , title: "미디어 월 연동", text: "미디어 월 연동을 통한 고객 응대", }, @@ -128,52 +145,32 @@ const PROJECTS = [ image: "/images/si_img6.png", desc: [ { - icon: "🏗️", + icon: , title: "인프라 구축", text: "항공 운송사업자 필수 서비스 및 인프라", }, { - icon: "✈️", + icon: , title: "국제선 대응", text: "국제선 취항 대응 및 부가서비스 매출 증대", }, { - icon: "📋", + icon: , 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); + 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 = () => { - if (!canPrev) return; - setCurrent((c) => c - 1); + 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,144 +260,185 @@ function SiPage() { navItems={BUSINESS_NAV} /> -
-
setPaused(true)} - onMouseLeave={() => setPaused(false)} - > -
- {/* 헤더 */} -
- - PROJECT ARCHIVE - - - 수행사업 -
- 아카이브 - - - PAL Networks가 구축한 -
- 주요 프로젝트를 소개합니다. - - - {/* 네비게이션 */} -
- + {window.innerWidth <= 768 ? ( + "PAL Networks가 구축한 주요 프로젝트를 소개합니다." + ) : ( + <> + PAL Networks가 구축한 +
+ 주요 프로젝트를 소개합니다. + + )} + -
- - {String(current + 1).padStart(2, "0")} - - / - - {String(total).padStart(2, "0")} - -
+ {/* 네비게이션 */} +
+ + ← + - + + + {String(current + 1).padStart(2, "0")} + + / + + {String(total).padStart(2, "0")} + + + + + → + +
-
- {/* 슬라이더 */} -
-
+ {/* 슬라이더 */} +
- {PROJECTS.map((project) => ( -
-
- {project.title} -
-
- -
-
-
- {project.id} +
+ + {PROJECTS.map((project, idx) => ( +
+
+ {project.title} +
-

- {project.title} -

-
-
- {project.tags.map((tag) => ( - - {tag} - - ))} -
- -
    - {project.desc.map((item, i) => ( -
  • -
    - {item.icon} -
    -
    - {item.title} +
    +
    +
    + {project.id}
    -
    - {item.text} -
    -
    • - ))} -
-
-
- ))} +

+ {project.title} +

+
+ +
+ {project.tags.map((tag) => ( + + {tag} + + ))} +
+ +
    + {project.desc.map((item, i) => ( +
  • +
    + {item.icon} +
    +
    + {item.title} +
    +
    + {item.text} +
    +
    • + ))} +
+
+
+ ))} + +
-
-
+ +
);