feat : si 불법드론, kacutm 추가 및 utm 이미지 변경

src/pages/business/SiPage.jsx

@@ -2,12 +2,78 @@ 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";
+import {
+  Plane,
+  Globe,
+  UtensilsCrossed,
+  Thermometer,
+  MapPin,
+  Link,
+  QrCode,
+  Users,
+  Siren,
+  Wrench,
+  PlusCircle,
+  Settings,
+  ShieldCheck,
+  Monitor,
+  Building2,
+  ClipboardList,
+  Radio,
+  Database,
+  Navigation,
+} from "lucide-react";
 const ease = [0.25, 0.1, 0.25, 1];
 
 const PROJECTS = [
   {
     id: "01",
+    title: "KAC UTM 시스템 구축",
+    tags: ["항공/관제", "UTM"],
+    image: "/images/si_kac_utm.png",
+    desc: [
+      {
+        icon: <Radio size={14} />,
+        title: "실시간 관제",
+        text: "무인기 실시간 공역 감시 및 관제 시스템",
+      },
+      {
+        icon: <Navigation size={14} />,
+        title: "비행 경로 관리",
+        text: "비행 계획 승인 및 충돌 위험 사전 분석",
+      },
+      {
+        icon: <Database size={14} />,
+        title: "데이터 통합",
+        text: "비행 데이터 수집·분석 통합 플랫폼 구축",
+      },
+    ],
+  },
+  {
+    id: "02",
+    title: "불법드론 탐지 시스템 구축",
+    tags: ["항공/보안", "드론"],
+    image: "/images/si_injustice_drone.png",
+    desc: [
+      {
+        icon: <ShieldCheck size={14} />,
+        title: "불법드론 탐지",
+        text: "비인가 드론 실시간 탐지 및 식별 시스템",
+      },
+      {
+        icon: <Siren size={14} />,
+        title: "위협 대응",
+        text: "불법 비행체 침입 시 신속 경보 및 대응",
+      },
+      {
+        icon: <Radio size={14} />,
+        title: "관제 연동",
+        text: "UTM 관제 시스템과 실시간 연계 운영",
+      },
+    ],
+  },
+  {
+    id: "03",
     title: "제주패스 OTA 항공 서비스 구축",
     tags: ["항공/여행", "OTA"],
     image: "/images/si_img1.png",
@@ -30,7 +96,7 @@ const PROJECTS = [
     ],
   },
   {
-    id: "02",
+    id: "04",
     title: "안전관광 방역 시스템 구축",
     tags: ["공공/방역", "방역/보안"],
     image: "/images/si_img2.png",
@@ -53,7 +119,7 @@ const PROJECTS = [
     ],
   },
   {
-    id: "03",
+    id: "05",
     title: "클린인천 출입인증 시스템 구축",
     tags: ["공공/출입", "인증/보안"],
     image: "/images/si_img3.png",
@@ -76,7 +142,7 @@ const PROJECTS = [
     ],
   },
   {
-    id: "04",
+    id: "06",
     title: "SSG.COM 항공서비스 운영 및 유지보수",
     tags: ["항공/이커머스", "운영 · 유지보수"],
     image: "/images/si_img4.png",
@@ -99,7 +165,7 @@ const PROJECTS = [
     ],
   },
   {
-    id: "05",
+    id: "07",
     title: "현대자동차 출입인증 시스템 구축",
     tags: ["기업/보안", "인증/보안"],
     image: "/images/si_img5.png",
@@ -122,7 +188,7 @@ const PROJECTS = [
     ],
   },
   {
-    id: "06",
+    id: "08",
     title: "하이에어 항공운항 시스템 구축",
     tags: ["항공", "인증/스케줄"],
     image: "/images/si_img6.png",
@@ -145,7 +211,6 @@ const PROJECTS = [
     ],
   },
 ];
-
 const AUTO_DELAY = 5000;
 
 function SiPage() {
@@ -205,13 +270,15 @@ function SiPage() {
   };
 
   const handleDragStart = (e) => {
-    dragStartX.current = e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
+    dragStartX.current =
+      e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
     dragStartCurrent.current = current;
   };
 
   const handleDragEnd = (e) => {
     if (dragStartX.current === null) return;
-    const endX = e.type === "touchend" ? e.changedTouches[0].clientX : e.clientX;
+    const endX =
+      e.type === "touchend" ? e.changedTouches[0].clientX : e.clientX;
     const diff = dragStartX.current - endX;
     if (diff > 50) next();
     else if (diff < -50) prev();
@@ -258,10 +325,20 @@ function SiPage() {
             <div className="si_archive__main">
               {/* 헤더 */}
               <div className="si_archive__header">
-                <motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 16 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}>
+                <motion.span
+                  className="fc-eyebrow"
+                  initial={{ opacity: 0, y: 16 }}
+                  animate={inView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.6, ease }}
+                >
                   PROJECT ARCHIVE
                 </motion.span>
-                <motion.h2 className="si_archive__title" initial={{ opacity: 0, y: 20 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, delay: 0.1, ease }}>
+                <motion.h2
+                  className="si_archive__title"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={inView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.6, delay: 0.1, ease }}
+                >
                   {window.innerWidth <= 768 ? (
                     "수행사업 아카이브"
                   ) : (
@@ -272,7 +349,12 @@ function SiPage() {
                     </>
                   )}
                 </motion.h2>
-                <motion.p className="si_archive__desc" initial={{ opacity: 0, y: 16 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, delay: 0.2, ease }}>
+                <motion.p
+                  className="si_archive__desc"
+                  initial={{ opacity: 0, y: 16 }}
+                  animate={inView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.6, delay: 0.2, ease }}
+                >
                   {window.innerWidth <= 768 ? (
                     "PAL Networks가 구축한 주요 프로젝트를 소개합니다."
                   ) : (
@@ -286,17 +368,40 @@ function SiPage() {
 
                 {/* 네비게이션 */}
                 <div className="si_archive__nav">
-                  <motion.button className="si_archive__nav-btn" onClick={prev} aria-label="이전" initial={{ opacity: 0, y: 16 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, delay: 0.4, ease }}>
+                  <motion.button
+                    className="si_archive__nav-btn"
+                    onClick={prev}
+                    aria-label="이전"
+                    initial={{ opacity: 0, y: 16 }}
+                    animate={inView ? { opacity: 1, y: 0 } : {}}
+                    transition={{ duration: 0.6, delay: 0.4, ease }}
+                  >
                     ←
                   </motion.button>
 
-                  <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>
+                  <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>
                     <span className="si_archive__progress-divider">/</span>
-                    <span className="si_archive__progress-total">{String(total).padStart(2, "0")}</span>
+                    <span className="si_archive__progress-total">
+                      {String(total).padStart(2, "0")}
+                    </span>
                   </motion.div>
 
-                  <motion.button className="si_archive__nav-btn" onClick={next} aria-label="다음" initial={{ opacity: 0, y: 16 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, delay: 0.4, ease }}>
+                  <motion.button
+                    className="si_archive__nav-btn"
+                    onClick={next}
+                    aria-label="다음"
+                    initial={{ opacity: 0, y: 16 }}
+                    animate={inView ? { opacity: 1, y: 0 } : {}}
+                    transition={{ duration: 0.6, delay: 0.4, ease }}
+                  >
                     →
                   </motion.button>
                 </div>
@@ -304,27 +409,56 @@ function SiPage() {
 
               {/* 슬라이더 */}
               <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" }} onMouseDown={handleDragStart} onMouseUp={handleDragEnd} onTouchStart={handleDragStart} onTouchEnd={handleDragEnd} ref={sliderRef}>
+                <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" }}
+                    onMouseDown={handleDragStart}
+                    onMouseUp={handleDragEnd}
+                    onTouchStart={handleDragStart}
+                    onTouchEnd={handleDragEnd}
+                    ref={sliderRef}
+                  >
                     <motion.div
                       className="si_archive__track"
                       animate={{
-                        x: window.innerWidth <= 768 ? 0 : cardWidth ? -(current * (cardWidth + 18)) : 0,
+                        x:
+                          window.innerWidth <= 768
+                            ? 0
+                            : cardWidth
+                              ? -(current * (cardWidth + 18))
+                              : 0,
                       }}
                       transition={{ duration: 0.55, ease }}
                       style={{ alignItems: "stretch" }}
                     >
                       {PROJECTS.map((project, idx) => (
-                        <div key={project.id} className="si_archive__card" ref={idx === 0 ? cardRef : null}>
+                        <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`} alt={project.title} draggable="false" />
+                            <img
+                              src={`${basePath}images/${project.image.split("/").pop()}`}
+                              alt={project.title}
+                              draggable="false"
+                            />
                             <div className="si_archive__card-img-placeholder" />
                           </div>
 
                           <div className="si_archive__card-body">
                             <div className="si_archive__card-header">
-                              <div className="si_archive__card-num">{project.id}</div>
-                              <h3 className="si_archive__card-title">{project.title}</h3>
+                              <div className="si_archive__card-num">
+                                {project.id}
+                              </div>
+                              <h3 className="si_archive__card-title">
+                                {project.title}
+                              </h3>
                             </div>
 
                             <div className="si_archive__card-tags">
@@ -338,9 +472,15 @@ function SiPage() {
                             <ul className="si_archive__card-desc">
                               {project.desc.map((item, i) => (
                                 <li key={i}>
-                                  <div className="si_archive__card-desc-icon">{item.icon}</div>
-                                  <div className="si_archive__card-desc-title">{item.title}</div>
-                                  <div className="si_archive__card-desc-text">{item.text}</div>
+                                  <div className="si_archive__card-desc-icon">
+                                    {item.icon}
+                                  </div>
+                                  <div className="si_archive__card-desc-title">
+                                    {item.title}
+                                  </div>
+                                  <div className="si_archive__card-desc-text">
+                                    {item.text}
+                                  </div>
                                 </li>
                               ))}
                             </ul>