feat(icons): 홈페이지 전체 라인 SVG 아이콘 적용 [auto-sync]

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "react": "^18.3.1",
         "react-countup": "^6.5.3",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.6.0",
         "react-intersection-observer": "^9.10.3",
         "react-router-dom": "^6.23.1",
         "react-scroll": "^1.9.0",
@@ -1901,6 +1902,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-intersection-observer": {
       "version": "9.16.0",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",

frontend/package.json

@@ -8,14 +8,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react":            "^18.3.1",
-    "react-dom":        "^18.3.1",
-    "react-router-dom": "^6.23.1",
     "axios": "^1.7.2",
-    "swiper":           "^11.1.4",
+    "react": "^18.3.1",
-    "react-intersection-observer": "^9.10.3",
     "react-countup": "^6.5.3",
-    "react-scroll":     "^1.9.0"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.6.0",
+    "react-intersection-observer": "^9.10.3",
+    "react-router-dom": "^6.23.1",
+    "react-scroll": "^1.9.0",
+    "swiper": "^11.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

frontend/src/components/Icons.jsx

@@ -0,0 +1,121 @@
+/**
+ * ZioInfo 라인 아이콘 라이브러리 — 모두 직접 그린 SVG
+ * stroke 기반, strokeLinecap/Join=round, fill=none
+ */
+
+const D = { size: 22, sw: 1.8 };
+
+const Ico = ({ size = D.size, color = 'currentColor', sw = D.sw, children, ...p }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
+       stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...p}>
+    {children}
+  </svg>
+);
+
+/* ── 회사/조직 ── */
+export const IconBuilding = p => <Ico {...p}><path d="M3 21h18M3 7l9-4 9 4M4 7v14M20 7v14M9 21v-4h6v4M9 11h1M14 11h1M9 15h1M14 15h1"/></Ico>;
+export const IconUser     = p => <Ico {...p}><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></Ico>;
+export const IconUsers    = p => <Ico {...p}><circle cx="9" cy="8" r="3"/><path d="M2 20c0-3.3 2.9-6 7-6s7 2.7 7 6"/><circle cx="18" cy="9" r="2.5" opacity=".6"/><path d="M22 20c0-2.5-2-4.5-4-4.5" opacity=".6"/></Ico>;
+export const IconCEO      = p => <Ico {...p}><circle cx="12" cy="7" r="4"/><path d="M4 21v-1a8 8 0 0116 0v1"/><path d="M9 7l1.5 2L12 7l1.5 2L15 7" strokeWidth="1.2"/></Ico>;
+export const IconTeam     = p => <Ico {...p}><circle cx="12" cy="6" r="3"/><circle cx="5" cy="17" r="2.5"/><circle cx="19" cy="17" r="2.5"/><path d="M12 9v4M8.5 16L12 13l3.5 3"/></Ico>;
+
+/* ── 연락처 ── */
+export const IconPhone    = p => <Ico {...p}><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7 12.8 12.8 0 00.7 2.8 2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4 12.8 12.8 0 002.8.7 2 2 0 011.7 2z"/></Ico>;
+export const IconEmail    = p => <Ico {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></Ico>;
+export const IconMapPin   = p => <Ico {...p}><path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 14 6 14s6-9 6-14c0-3.3-2.7-6-6-6z"/><circle cx="12" cy="8" r="2.5"/></Ico>;
+export const IconClock    = p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></Ico>;
+export const IconFax      = p => <Ico {...p}><rect x="2" y="7" width="14" height="14" rx="1.5"/><path d="M16 7V5a2 2 0 00-2-2H8a2 2 0 00-2 2v2"/><rect x="16" y="9" width="6" height="8" rx="1"/><path d="M6 12h6M6 15h4"/></Ico>;
+
+/* ── 핵심 가치 ── */
+export const IconTarget   = p => <Ico {...p}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></Ico>;
+export const IconRocket   = p => <Ico {...p}><path d="M4.5 16.5c-1.5 1.5-1.5 3.5 0 3.5s3.5-1.5 3.5-3.5c0 0-1.5-.5-3.5 0z"/><path d="M12 2C8 2 5 8 5 13l2 2 4-2 4 2 2-2c0-5-3-11-5-11z"/><path d="M5 13c-1 2-1.5 4-1.5 4"/><path d="M19 13c1 2 1.5 4 1.5 4"/><circle cx="12" cy="10" r="2"/></Ico>;
+export const IconHandshake= p => <Ico {...p}><path d="M9 11l-3 3 5 5 8-8-5-5-3 3"/><path d="M6 14l-4 4M14 6l4-4M9 11L7 9"/></Ico>;
+export const IconLeaf     = p => <Ico {...p}><path d="M2 22c4-4 6-8 6-12A8 8 0 0122 2c0 4-2 8-4 10s-6 4-10 4H2z"/><path d="M2 22l8-8"/></Ico>;
+export const IconTrophy   = p => <Ico {...p}><path d="M8 21h8M12 17v4M17 3H7l1 8a4 4 0 008 0l1-8z"/><path d="M7 3H4a2 2 0 000 4h3M17 3h3a2 2 0 010 4h-3"/></Ico>;
+export const IconStar     = p => <Ico {...p}><polygon points="12 2 15.1 8.3 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 8.9 8.3 12 2"/></Ico>;
+export const IconAward    = p => <Ico {...p}><circle cx="12" cy="9" r="7"/><path d="M8.2 14.4L6 22l6-3 6 3-2.2-7.6"/></Ico>;
+
+/* ── AI / 기술 ── */
+export const IconAI       = p => <Ico {...p}><rect x="3" y="6" width="18" height="12" rx="2"/><circle cx="8" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="16" cy="12" r="1.5"/><path d="M8 6V4M12 6V4M16 6V4M8 18v2M12 18v2M16 18v2"/></Ico>;
+export const IconBrain    = p => <Ico {...p}><path d="M12 5a3 3 0 10-3 3H12"/><path d="M12 5a3 3 0 113 3H12"/><path d="M6 8a4 4 0 000 8h.5"/><path d="M18 8a4 4 0 010 8h-.5"/><path d="M8 16a4 4 0 008 0v-4H8v4z"/><path d="M9 12v-1M15 12v-1"/></Ico>;
+export const IconNetwork  = p => <Ico {...p}><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v5M12 12l-5.5 5M12 12l5.5 5"/></Ico>;
+export const IconCode     = p => <Ico {...p}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="19" y1="12" x2="5" y2="12" strokeOpacity=".4"/></Ico>;
+export const IconZap      = p => <Ico {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></Ico>;
+export const IconCpu      = p => <Ico {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></Ico>;
+
+/* ── 인프라/서버 ── */
+export const IconServer   = p => <Ico {...p}><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="18" r="1" fill="currentColor"/><path d="M10 6h8M10 18h8"/></Ico>;
+export const IconCloud    = p => <Ico {...p}><path d="M18 10h-1.3A7 7 0 106 19h12a4 4 0 000-8v-1z"/></Ico>;
+export const IconDatabase = p => <Ico {...p}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.7-4 3-9 3s-9-1.3-9-3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/></Ico>;
+export const IconHardDrive= p => <Ico {...p}><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M17 13h.01"/><path d="M6 13h8"/></Ico>;
+export const IconGlobe    = p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></Ico>;
+
+/* ── 보안 ── */
+export const IconShield   = p => <Ico {...p}><path d="M12 2l9 4v5c0 5.2-3.9 10-9 11C6.9 21 3 16.2 3 11V6l9-4z"/></Ico>;
+export const IconLock     = p => <Ico {...p}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1" fill="currentColor"/></Ico>;
+export const IconKey      = p => <Ico {...p}><circle cx="8" cy="15" r="4"/><path d="M12 11l8-8M17 6l3 3"/></Ico>;
+export const IconEye      = p => <Ico {...p}><path d="M1 12S5 4 12 4s11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></Ico>;
+
+/* ── 문서/콘텐츠 ── */
+export const IconFileText = p => <Ico {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h8M8 17h5"/></Ico>;
+export const IconClipboard= p => <Ico {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 3a3 3 0 006 0"/><path d="M8 10h8M8 14h6M8 18h4"/></Ico>;
+export const IconBook     = p => <Ico {...p}><path d="M4 19.5A2.5 2.5 0 016.5 17H20V3H6.5A2.5 2.5 0 004 5.5v14z"/><path d="M6.5 17v4"/><path d="M8 7h8M8 11h6"/></Ico>;
+export const IconNewspaper= p => <Ico {...p}><rect x="3" y="3" width="18" height="18" rx="1.5"/><path d="M7 7h10M7 11h7M7 15h5"/><rect x="14" y="11" width="3" height="4" rx=".5"/></Ico>;
+export const IconDownload = p => <Ico {...p}><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></Ico>;
+
+/* ── 분석/차트 ── */
+export const IconBarChart = p => <Ico {...p}><rect x="18" y="3" width="4" height="18"/><rect x="10" y="8" width="4" height="13"/><rect x="2" y="13" width="4" height="8"/></Ico>;
+export const IconTrendUp  = p => <Ico {...p}><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></Ico>;
+export const IconPieChart = p => <Ico {...p}><path d="M21.2 15A9 9 0 118.8 2.8"/><path d="M12 2v10l7 4"/></Ico>;
+export const IconActivity = p => <Ico {...p}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></Ico>;
+
+/* ── 비즈니스 ── */
+export const IconBriefcase= p => <Ico {...p}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/><line x1="12" y1="12" x2="12" y2="12" strokeWidth="3"/><path d="M2 13h20"/></Ico>;
+export const IconMoney    = p => <Ico {...p}><rect x="1" y="4" width="22" height="16" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M1 9h4M19 9h4M1 15h4M19 15h4"/></Ico>;
+export const IconShake    = p => <Ico {...p}><path d="M7 12l2-2a2 2 0 012.8 0l.2.2L14 8l1.4 1.4L13 12M15 8l2 2"/><path d="M3 15l4 4 2-2-4-4L3 15zM21 9l-4-4-2 2 4 4 2-2z"/><path d="M9 12l3 3"/></Ico>;
+export const IconGift     = p => <Ico {...p}><rect x="3" y="8" width="18" height="13" rx="1.5"/><path d="M3 12h18M12 8v13"/><path d="M8 8C8 5.8 9.8 4 12 4s4 1.8 4 4"/><path d="M8 8c0-2 1-4 4-4s4 2 4 4"/></Ico>;
+
+/* ── UI/인터페이스 ── */
+export const IconSearch   = p => <Ico {...p}><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.4-4.4"/></Ico>;
+export const IconMenu     = p => <Ico {...p}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></Ico>;
+export const IconX        = p => <Ico {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Ico>;
+export const IconCheck    = p => <Ico {...p}><polyline points="20 6 9 17 4 12"/></Ico>;
+export const IconCheckCircle = p => <Ico {...p}><path d="M22 11.1V12a10 10 0 11-5.9-9.1"/><polyline points="22 4 12 14.1 9 11.1"/></Ico>;
+export const IconArrowRight  = p => <Ico {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></Ico>;
+export const IconArrowDown   = p => <Ico {...p}><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></Ico>;
+export const IconChevronDown = p => <Ico {...p}><polyline points="6 9 12 15 18 9"/></Ico>;
+export const IconExternal    = p => <Ico {...p}><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></Ico>;
+export const IconPlus     = p => <Ico {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></Ico>;
+export const IconSettings = p => <Ico {...p}><circle cx="12" cy="12" r="3"/><path d="M20 12a8 8 0 01-.5 2.8l1.8 1a10 10 0 010-7.6l-1.8 1A8 8 0 0120 12zM4 12a8 8 0 01.5-2.8l-1.8-1a10 10 0 000 7.6l1.8-1A8 8 0 014 12z"/><path d="M12 4a8 8 0 012.8.5l1-1.8a10 10 0 00-7.6 0l1 1.8A8 8 0 0112 4zM12 20a8 8 0 01-2.8-.5l-1 1.8a10 10 0 007.6 0l-1-1.8A8 8 0 0112 20z"/></Ico>;
+
+/* ── 채용/복리후생 ── */
+export const IconHome     = p => <Ico {...p}><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"/><path d="M9 21V12h6v9"/></Ico>;
+export const IconGradCap  = p => <Ico {...p}><path d="M22 10L12 5 2 10l10 5 10-5v5"/><path d="M6 12v5c0 2 2.7 3 6 3s6-1 6-3v-5"/></Ico>;
+export const IconHospital = p => <Ico {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 8v8M8 12h8"/></Ico>;
+export const IconUtensils = p => <Ico {...p}><path d="M3 11l4-9M7 11V22"/><path d="M3 11h8M11 11V2"/><path d="M17 3v19M14 7c0-2.2 1.3-4 3-4s3 1.8 3 4v4h-6V7z"/></Ico>;
+export const IconParty    = p => <Ico {...p}><path d="M5.8 11.3L2 22l10.7-3.8"/><path d="M4 3h.01M22 8h.01M15 2h.01M22 20h.01M2 14h.01"/><path d="M11 3c3 2.5 5 6 5 10M16 7c2 1.5 3.5 3.5 3.5 7"/><path d="M10 14c-2 3.5-3 7-3 8"/></Ico>;
+export const IconCelebrate= p => <Ico {...p}><path d="M3 21l7-7M17.5 3.5a3 3 0 014.2 4.2L7.5 21.7a4 4 0 01-2.5 1.3l-2.8.2.2-2.8a4 4 0 011.3-2.5L17.5 3.5z"/></Ico>;
+export const IconLaptop   = p => <Ico {...p}><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M2 20h20"/><path d="M9 16h6"/></Ico>;
+
+/* ── 솔루션/제품 ── */
+export const IconPuzzle   = p => <Ico {...p}><path d="M20.5 11V9a2 2 0 00-2-2h-2.5V5a2 2 0 00-2-2H5a2 2 0 00-2 2v9a2 2 0 002 2h2v2.5a2 2 0 002 2H19a2 2 0 002-2v-4.5a2 2 0 00-2-2h-1V11h2.5z"/></Ico>;
+export const IconLayers   = p => <Ico {...p}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></Ico>;
+export const IconGovt     = p => <Ico {...p}><path d="M3 21h18M3 10h18M5 10V21M19 10V21M12 3L3 10h18L12 3z"/><rect x="8" y="13" width="3" height="5"/><rect x="13" y="13" width="3" height="5"/></Ico>;
+export const IconMobile   = p => <Ico {...p}><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18" strokeWidth="3"/></Ico>;
+export const IconPalette  = p => <Ico {...p}><circle cx="12" cy="12" r="10"/><circle cx="8" cy="10" r="1.5" fill="currentColor" stroke="none"/><circle cx="13" cy="8" r="1.5" fill="currentColor" stroke="none"/><circle cx="16" cy="12" r="1.5" fill="currentColor" stroke="none"/><path d="M12 22c0-2.5-2-4-4-4h-2a2 2 0 010-4"/></Ico>;
+export const IconWrench   = p => <Ico {...p}><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94L5.37 18.6a2.12 2.12 0 01-3-3L7.5 12a6 6 0 017.2-5.7z"/></Ico>;
+export const IconLink     = p => <Ico {...p}><path d="M10 13a5 5 0 007.5.5l3-3a5 5 0 00-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 00-7.5-.5l-3 3a5 5 0 007 7l1.5-1.5"/></Ico>;
+export const IconShuffle  = p => <Ico {...p}><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></Ico>;
+
+/* ── 채팅/메시지 ── */
+export const IconMessage  = p => <Ico {...p}><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></Ico>;
+export const IconMic      = p => <Ico {...p}><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M19 10a7 7 0 01-14 0"/><line x1="12" y1="17" x2="12" y2="22"/><line x1="8" y1="22" x2="16" y2="22"/></Ico>;
+export const IconSend     = p => <Ico {...p}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></Ico>;
+
+/* ── 기타 ── */
+export const IconBulb     = p => <Ico {...p}><path d="M9 18h6M10 22h4M12 2a7 7 0 017 7c0 2.4-1.1 4.5-2.8 6H7.8A7 7 0 0112 2z"/></Ico>;
+export const IconFlag     = p => <Ico {...p}><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></Ico>;
+export const IconBolt     = p => <Ico {...p}><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></Ico>;
+export const IconFire     = p => <Ico {...p}><path d="M12 22C6.5 22 2 17.5 2 12c0-2 .8-4 2.3-5.6C5.6 5 6 4.3 6 3c2 0 3 1.5 4 3 .7-1.2 2-2.5 4-3 0 1.5.7 2.5 1.7 3.5C17.2 8 18 9.8 18 12c0 5.5-4.5 10-6 10z"/></Ico>;
+export const IconGithub   = p => <Ico {...p}><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.9a3.4 3.4 0 00-.9-2.3c3.1-.3 6.4-1.5 6.4-7A5.4 5.4 0 0020 4.8 4.8 4.8 0 0019.9 1S18.7.7 16 2.5a13.4 13.4 0 00-7 0C6.3.7 5.1 1 5.1 1A4.8 4.8 0 005 4.8a5.4 5.4 0 00-1.5 3.8c0 5.4 3.3 6.6 6.4 7a3.4 3.4 0 00-.9 2.3V22"/></Ico>;
+export const IconCopyright= p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M14.8 9.5A4.5 4.5 0 1014.8 14.5"/></Ico>;

frontend/src/components/layout/Footer.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import './Footer.css';
+import { IconPhone, IconEmail, IconMapPin, IconFax, IconGlobe, IconShield, IconCheckCircle } from '../Icons';
 
 const FOOTER_MENUS = [
   {
@@ -60,17 +61,38 @@ export default function Footer() {
             </p>
             <div className="footer-contact-list">
               <div className="footer-contact-item">
+                <IconPhone size={15} color="#00A0C8" />
                 <span className="contact-label">대표전화</span>
                 <a href="tel:031-483-1766">031-483-1766</a>
               </div>
               <div className="footer-contact-item">
+                <IconFax size={15} color="#00A0C8" />
+                <span className="contact-label">팩스</span>
+                <span>031-483-1767</span>
+              </div>
+              <div className="footer-contact-item">
+                <IconEmail size={15} color="#00A0C8" />
                 <span className="contact-label">이메일</span>
                 <a href="mailto:info@zioinfo.co.kr">info@zioinfo.co.kr</a>
               </div>
               <div className="footer-contact-item">
+                <IconMapPin size={15} color="#00A0C8" />
                 <span className="contact-label">주소</span>
                 <span>경기도 안산시 단원구 광덕4로 220 오피스브이 578호</span>
               </div>
+              <div className="footer-contact-item">
+                <IconGlobe size={15} color="#00A0C8" />
+                <span className="contact-label">웹사이트</span>
+                <a href="https://zioinfo.co.kr">zioinfo.co.kr</a>
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: '12px', marginTop: '16px', flexWrap: 'wrap' }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '12px', color: '#7ba7c4' }}>
+                <IconShield size={13} color="#00A0C8" /> GS인증 1등급 신청완료
+              </span>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '12px', color: '#7ba7c4' }}>
+                <IconCheckCircle size={13} color="#00A0C8" /> ISO 9001 인증
+              </span>
             </div>
           </div>
 

frontend/src/pages/Company.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { IconTarget, IconBolt, IconHandshake, IconLeaf, IconPhone, IconEmail, IconMapPin, IconClock, IconBuilding, IconUser, IconAI, IconCheckCircle } from '../components/Icons';
 import { Routes, Route, NavLink, useNavigate } from 'react-router-dom';
 import './Common.css';
 import './Company.css';
@@ -82,13 +83,13 @@ function Greeting() {
             </div>
             <div className="grid-4">
               {[
-                { icon: '🎯', title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' },
+                { icon: <IconTarget size={40} color="#00A0C8" />, title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' },
-                { icon: '🚀', title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' },
+                { icon: <IconBolt size={40} color="#00A0C8" />, title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' },
-                { icon: '🤝', title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' },
+                { icon: <IconHandshake size={40} color="#00A0C8" />, title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' },
-                { icon: '🌱', title: '지속 성장', desc: '구성원과 고객이 함께 성장하는 지속 가능한 파트너십을 추구합니다' },
+                { icon: <IconLeaf size={40} color="#00A0C8" />, title: '지속 성장', desc: '구성원과 고객이 함께 성장하는 지속 가능한 파트너십을 추구합니다' },
               ].map((v, i) => (
                 <div key={i} className="card" style={{ padding: '32px 24px', textAlign: 'center' }}>
-                  <div style={{ fontSize: '40px', marginBottom: '16px' }}>{v.icon}</div>
+                  <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'center' }}>{v.icon}</div>
                   <h3 style={{ fontSize: '18px', fontWeight: '700', marginBottom: '12px' }}>{v.title}</h3>
                   <p style={{ fontSize: '14px', color: 'var(--gray-600)', lineHeight: '1.7' }}>{v.desc}</p>
                 </div>
@@ -521,7 +522,7 @@ function Location() {
           <div className="location-grid">
             {/* 본사 */}
             <div className="card" style={{ padding: '36px' }}>
-              <h3 className="loc-office-title">📍 본사</h3>
+              <h3 className="loc-office-title" style={{display:'flex',alignItems:'center',gap:'8px'}}><IconMapPin size={20} color="#00A0C8"/>본사</h3>
               <table className="loc-table">
                 <tbody>
                   <tr><th>회사명</th><td>(주)지오정보기술</td></tr>
@@ -536,12 +537,12 @@ function Location() {
 
             {/* 교통 안내 */}
             <div className="card" style={{ padding: '36px' }}>
-              <h3 className="loc-office-title">🚇 교통 안내</h3>
+              <h3 className="loc-office-title" style={{display:'flex',alignItems:'center',gap:'8px'}}><IconBuilding size={20} color="#00A0C8"/>교통 안내</h3>
               <div className="transport-list">
                 {[
-                  { type: '지하철', icon: '🚇', lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] },
+                  { type: '지하철', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="18" rx="3"/><path d="M9 22v-2M15 22v-2M5 10h14M9 6h6"/><circle cx="9" cy="14" r="1.2" fill="#00A0C8" stroke="none"/><circle cx="15" cy="14" r="1.2" fill="#00A0C8" stroke="none"/></svg>, lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] },
-                  { type: '버스',   icon: '🚌', lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] },
+                  { type: '버스',   icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="3"/><path d="M3 10h18M7 18v2M17 18v2"/><circle cx="8" cy="14" r="1.2" fill="#00A0C8" stroke="none"/><circle cx="16" cy="14" r="1.2" fill="#00A0C8" stroke="none"/></svg>, lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] },
-                  { type: '자가용', icon: '🚗', lines: ['서해안고속도로 비봉IC → 안산방면 → 광덕4로', '주차 가능 (방문 전 사전 연락 권장)'] },
+                  { type: '자가용', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 11l1.5-5h11L19 11"/><rect x="3" y="11" width="18" height="8" rx="2"/><circle cx="7.5" cy="19" r="2"/><circle cx="16.5" cy="19" r="2"/><path d="M3 15h18"/></svg>, lines: ['서해안고속도로 비봉IC → 안산방면 → 광덕4로', '주차 가능 (방문 전 사전 연락 권장)'] },
                 ].map((t, i) => (
                   <div key={i} className="transport-item">
                     <div className="transport-header">
@@ -553,7 +554,7 @@ function Location() {
                 ))}
               </div>
               <div style={{ marginTop: '20px', padding: '12px 16px', background: 'var(--gray-50)', borderRadius: '8px', fontSize: '13px', color: 'var(--gray-500)' }}>
-                📌 네이버 지도에서 <strong>"오피스브이 안산"</strong> 검색
+                <span style={{display:'flex',alignItems:'center',gap:'6px'}}><IconMapPin size={13} color="#00A0C8"/>네이버 지도에서 <strong>"오피스브이 안산"</strong> 검색</span>
               </div>
             </div>
           </div>

frontend/src/pages/Contact.jsx

@@ -3,6 +3,7 @@ import axios from 'axios';
 import './Contact.css';
 import './MemberAuth.css';
 import { MemberOnly } from '../hooks/useMemberAuth.jsx';
+import { IconPhone, IconEmail, IconClock, IconMapPin, IconSend, IconCheckCircle } from '../components/Icons';
 
 export default function Contact() {
   const [form, setForm] = useState({
@@ -49,10 +50,10 @@ export default function Contact() {
           <div className="contact-info">
             <h2>연락처 정보</h2>
             {[
-              { icon: '📞', label: '대표전화', value: '031-483-1766' },
+              { icon: <IconPhone size={22} color="#00A0C8"/>,  label: '대표전화', value: '031-483-1766' },
-              { icon: '✉️', label: '이메일',   value: 'info@zioinfo.co.kr' },
+              { icon: <IconEmail size={22} color="#00A0C8"/>,  label: '이메일',   value: 'info@zioinfo.co.kr' },
-              { icon: '🕐', label: '운영시간', value: '평일 09:00 ~ 18:00' },
+              { icon: <IconClock size={22} color="#00A0C8"/>,  label: '운영시간', value: '평일 09:00 ~ 18:00' },
-              { icon: '📍', label: '주소',     value: '경기도 안산시 단원구 광덕4로 220 오피스브이 578호' },
+              { icon: <IconMapPin size={22} color="#00A0C8"/>, label: '주소',     value: '경기도 안산시 단원구 광덕4로 220 오피스브이 578호' },
             ].map((c,i) => (
               <div key={i} className="info-item">
                 <span className="info-icon">{c.icon}</span>

frontend/src/pages/GuardiaDetail.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { IconAI, IconClipboard, IconCloud, IconShield, IconLink, IconGovt, IconBriefcase, IconCode, IconLeaf } from '../components/Icons';
 import { Link } from 'react-router-dom';
 import './GuardiaDetail.css';
 import { useSeoMeta } from '../hooks/useSeoMeta';
@@ -8,7 +9,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'ai',
     label: 'AI · 지능 자동화',
-    icon: '🤖',
+    icon: <IconAI size={22} color="#6366F1"/>,
     color: '#6366F1',
     items: [
       { title: 'AI 에이전트 자동화',          desc: 'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
@@ -30,7 +31,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'itsm',
     label: 'ITSM 핵심',
-    icon: '📋',
+    icon: <IconClipboard size={22} color="#0EA5E9"/>,
     color: '#0EA5E9',
     items: [
       { title: 'SR 서비스 요청 관리',      desc: '접수→배정→처리→완료. AI 자동 분류·우선순위 산정. 자율 워크플로우 자동화.' },
@@ -48,7 +49,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'infra',
     label: '인프라 · 클라우드',
-    icon: '☁️',
+    icon: <IconCloud size={22} color="#10B981"/>,
     color: '#10B981',
     items: [
       { title: '에이전트리스 SSH 배포',     desc: 'Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
@@ -68,7 +69,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'security',
     label: '보안 · 컴플라이언스',
-    icon: '🔒',
+    icon: <IconShield size={22} color="#F59E0B"/>,
     color: '#F59E0B',
     items: [
       { title: 'RBAC + MFA/OTP',           desc: '역할별 세밀 권한 분리. TOTP 2단계 인증. JWT + 이상 감지 강제 재인증.' },
@@ -86,7 +87,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'integration',
     label: '외부 연동 · OCR',
-    icon: '🔗',
+    icon: <IconLink size={22} color="#EC4899"/>,
     color: '#EC4899',
     items: [
       { title: 'Upstage OCR (Document AI)', desc: 'PDF·이미지 문서 파싱·정보 추출·QA. 계약서·납품서·청구서·회의록 자동 처리.' },
@@ -105,7 +106,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'public',
     label: '공공기관 특화',
-    icon: '🏛️',
+    icon: <IconGovt size={22} color="#0369A1"/>,
     color: '#0369A1',
     items: [
       { title: '나라장터 연동',             desc: '조달청 OpenAPI. 입찰공고·계약 현황 조회. 계약 → ITSM SR 자동 연계.' },
@@ -121,7 +122,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'saas',
     label: 'SaaS · 멀티테넌트',
-    icon: '💼',
+    icon: <IconBriefcase size={22} color="#8B5CF6"/>,
     color: '#8B5CF6',
     items: [
       { title: '멀티테넌트 완전 격리',      desc: '기관별 데이터 Row-Level Security. 테넌트간 정보 유출 원천 차단.' },
@@ -138,7 +139,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'devops',
     label: 'DevOps · CI/CD',
-    icon: '🚀',
+    icon: <IconCode size={22} color="#0891B2"/>,
     color: '#0891B2',
     items: [
       { title: 'Jenkins + Gitea 파이프라인', desc: '5개 시스템 자동 빌드·테스트·배포. webhook → git pull → 재기동. 알림 연동.' },
@@ -155,7 +156,7 @@ const FEATURE_CATEGORIES = [
   {
     id: 'autonomy',
     label: '자율화 · 성장 (NEW)',
-    icon: '🌱',
+    icon: <IconLeaf size={22} color="#059669"/>,
     color: '#059669',
     items: [
       { title: '건강검진 — 자동 테스트',      desc: '매일 03:00 전체 API 자동 실행(69개). 실패 시 SR 자동 생성 + 메신저 즉시 알림. 결과 이력 저장.' },
@@ -414,7 +415,7 @@ export default function GuardiaDetail() {
               {FEATURE_CATEGORIES.map(cat => (
                 <div key={cat.id} style={{marginBottom:'40px'}}>
                   <div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'16px'}}>
-                    <span style={{fontSize:'24px'}}>{cat.icon}</span>
+                    <span style={{display:'flex',alignItems:'center'}}>{cat.icon}</span>
                     <h3 style={{
                       fontSize:'20px',fontWeight:'700',color:'var(--gray-900)',margin:0,
                       borderLeft:`4px solid ${cat.color}`,paddingLeft:'12px'

frontend/src/pages/Recruit.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Routes, Route, NavLink } from 'react-router-dom';
 import './Common.css';
 import './Recruit.css';
+import { IconClock, IconHome, IconLaptop, IconTarget, IconBook, IconTrophy, IconGradCap, IconHospital, IconGift, IconUtensils, IconParty, IconBriefcase, IconAward, IconFlag, IconCheckCircle, IconBolt } from '../components/Icons';
 
 const SUB_NAV = [
   { path: '/recruit/jobs',    label: '채용공고' },
@@ -154,26 +155,26 @@ function Jobs() {
 const WELFARE = [
   {
     cat: '💼 근무환경', items: [
-      { icon: '🕘', name: '유연근무제', desc: '코어타임(10시~16시) 외 자유로운 출퇴근 시간 선택' },
+      { icon: <IconClock size={32} color="#00A0C8"/>, name: '유연근무제', desc: '코어타임(10시~16시) 외 자유로운 출퇴근 시간 선택' },
-      { icon: '🏠', name: '재택근무', desc: '직무에 따라 주 1~2회 재택근무 지원' },
+      { icon: <IconHome size={32} color="#00A0C8"/>, name: '재택근무', desc: '직무에 따라 주 1~2회 재택근무 지원' },
-      { icon: '💻', name: '장비 지원', desc: '맥북 또는 고성능 윈도우 노트북 선택 지급' },
+      { icon: <IconLaptop size={32} color="#00A0C8"/>, name: '장비 지원', desc: '맥북 또는 고성능 윈도우 노트북 선택 지급' },
-      { icon: '🎯', name: '목표 관리(OKR)', desc: '분기별 OKR로 명확한 목표·성과 관리' },
+      { icon: <IconTarget size={32} color="#00A0C8"/>, name: '목표 관리(OKR)', desc: '분기별 OKR로 명확한 목표·성과 관리' },
     ]
   },
   {
     cat: '📚 성장 지원', items: [
-      { icon: '📖', name: '교육비 지원', desc: '연 200만원 교육비 지원 (도서, 강의, 세미나)' },
+      { icon: <IconBook size={32} color="#00A0C8"/>, name: '교육비 지원', desc: '연 200만원 교육비 지원 (도서, 강의, 세미나)' },
-      { icon: '🏆', name: '자격증 지원', desc: '정보처리기사, PMP, AWS, Oracle 자격증 취득 지원' },
+      { icon: <IconTrophy size={32} color="#00A0C8"/>, name: '자격증 지원', desc: '정보처리기사, PMP, AWS, Oracle 자격증 취득 지원' },
-      { icon: '🎓', name: '사내 강의', desc: 'AI·클라우드·보안 월 1회 사내 기술 세미나' },
+      { icon: <IconGradCap size={32} color="#00A0C8"/>, name: '사내 강의', desc: 'AI·클라우드·보안 월 1회 사내 기술 세미나' },
-      { icon: '✈️', name: '컨퍼런스', desc: 'AWS re:Invent, Google I/O 등 국내외 컨퍼런스 참가 지원' },
+      { icon: <IconFlag size={32} color="#00A0C8"/>, name: '컨퍼런스', desc: 'AWS re:Invent, Google I/O 등 국내외 컨퍼런스 참가 지원' },
     ]
   },
   {
     cat: '🎁 복지 혜택', items: [
-      { icon: '🏥', name: '건강검진', desc: '연 1회 종합건강검진 (배우자 포함)' },
+      { icon: <IconHospital size={32} color="#00A0C8"/>, name: '건강검진', desc: '연 1회 종합건강검진 (배우자 포함)' },
-      { icon: '🎂', name: '경조사 지원', desc: '경조금·경조휴가 제공 (결혼, 출산, 상조)' },
+      { icon: <IconGift size={32} color="#00A0C8"/>, name: '경조사 지원', desc: '경조금·경조휴가 제공 (결혼, 출산, 상조)' },
-      { icon: '🍽️', name: '식대 지원', desc: '점심 식대 월 15만원 지원 (식권 또는 카드)' },
+      { icon: <IconUtensils size={32} color="#00A0C8"/>, name: '식대 지원', desc: '점심 식대 월 15만원 지원 (식권 또는 카드)' },
-      { icon: '🎉', name: '명절 선물', desc: '설·추석 명절 선물 및 상여금 지급' },
+      { icon: <IconParty size={32} color="#00A0C8"/>, name: '명절 선물', desc: '설·추석 명절 선물 및 상여금 지급' },
     ]
   },
 ];