From da10f1795a472c662aab3c2cd9ce6dbde9978a6c Mon Sep 17 00:00:00 2001 From: GUARDiA AutoDeploy Date: Wed, 3 Jun 2026 20:04:20 +0900 Subject: [PATCH] =?UTF-8?q?feat(icons):=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EC=B2=B4=20=EB=9D=BC=EC=9D=B8=20SVG=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A0=81=EC=9A=A9=20[auto-sync]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 10 ++ frontend/package.json | 23 ++-- frontend/src/components/Icons.jsx | 121 ++++++++++++++++++++++ frontend/src/components/layout/Footer.jsx | 22 ++++ frontend/src/pages/Company.jsx | 23 ++-- frontend/src/pages/Contact.jsx | 9 +- frontend/src/pages/GuardiaDetail.jsx | 21 ++-- frontend/src/pages/Recruit.jsx | 25 ++--- 8 files changed, 206 insertions(+), 48 deletions(-) create mode 100644 frontend/src/components/Icons.jsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6641d05..923b577 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 07a25ea..6fdbba3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,24 +3,25 @@ "version": "1.0.0", "private": true, "scripts": { - "dev": "vite", + "dev": "vite", "build": "vite build", "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", + "axios": "^1.7.2", + "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-countup": "^6.5.3", - "react-scroll": "^1.9.0" + "react-router-dom": "^6.23.1", + "react-scroll": "^1.9.0", + "swiper": "^11.1.4" }, "devDependencies": { - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.0", - "vite": "^5.2.11" + "vite": "^5.2.11" } } diff --git a/frontend/src/components/Icons.jsx b/frontend/src/components/Icons.jsx new file mode 100644 index 0000000..6cd6a0b --- /dev/null +++ b/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 }) => ( + + {children} + +); + +/* ── 회사/조직 ── */ +export const IconBuilding = p => ; +export const IconUser = p => ; +export const IconUsers = p => ; +export const IconCEO = p => ; +export const IconTeam = p => ; + +/* ── 연락처 ── */ +export const IconPhone = p => ; +export const IconEmail = p => ; +export const IconMapPin = p => ; +export const IconClock = p => ; +export const IconFax = p => ; + +/* ── 핵심 가치 ── */ +export const IconTarget = p => ; +export const IconRocket = p => ; +export const IconHandshake= p => ; +export const IconLeaf = p => ; +export const IconTrophy = p => ; +export const IconStar = p => ; +export const IconAward = p => ; + +/* ── AI / 기술 ── */ +export const IconAI = p => ; +export const IconBrain = p => ; +export const IconNetwork = p => ; +export const IconCode = p => ; +export const IconZap = p => ; +export const IconCpu = p => ; + +/* ── 인프라/서버 ── */ +export const IconServer = p => ; +export const IconCloud = p => ; +export const IconDatabase = p => ; +export const IconHardDrive= p => ; +export const IconGlobe = p => ; + +/* ── 보안 ── */ +export const IconShield = p => ; +export const IconLock = p => ; +export const IconKey = p => ; +export const IconEye = p => ; + +/* ── 문서/콘텐츠 ── */ +export const IconFileText = p => ; +export const IconClipboard= p => ; +export const IconBook = p => ; +export const IconNewspaper= p => ; +export const IconDownload = p => ; + +/* ── 분석/차트 ── */ +export const IconBarChart = p => ; +export const IconTrendUp = p => ; +export const IconPieChart = p => ; +export const IconActivity = p => ; + +/* ── 비즈니스 ── */ +export const IconBriefcase= p => ; +export const IconMoney = p => ; +export const IconShake = p => ; +export const IconGift = p => ; + +/* ── UI/인터페이스 ── */ +export const IconSearch = p => ; +export const IconMenu = p => ; +export const IconX = p => ; +export const IconCheck = p => ; +export const IconCheckCircle = p => ; +export const IconArrowRight = p => ; +export const IconArrowDown = p => ; +export const IconChevronDown = p => ; +export const IconExternal = p => ; +export const IconPlus = p => ; +export const IconSettings = p => ; + +/* ── 채용/복리후생 ── */ +export const IconHome = p => ; +export const IconGradCap = p => ; +export const IconHospital = p => ; +export const IconUtensils = p => ; +export const IconParty = p => ; +export const IconCelebrate= p => ; +export const IconLaptop = p => ; + +/* ── 솔루션/제품 ── */ +export const IconPuzzle = p => ; +export const IconLayers = p => ; +export const IconGovt = p => ; +export const IconMobile = p => ; +export const IconPalette = p => ; +export const IconWrench = p => ; +export const IconLink = p => ; +export const IconShuffle = p => ; + +/* ── 채팅/메시지 ── */ +export const IconMessage = p => ; +export const IconMic = p => ; +export const IconSend = p => ; + +/* ── 기타 ── */ +export const IconBulb = p => ; +export const IconFlag = p => ; +export const IconBolt = p => ; +export const IconFire = p => ; +export const IconGithub = p => ; +export const IconCopyright= p => ; diff --git a/frontend/src/components/layout/Footer.jsx b/frontend/src/components/layout/Footer.jsx index 940a4a6..17ccfd1 100644 --- a/frontend/src/components/layout/Footer.jsx +++ b/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() {

+ 대표전화 031-483-1766
+ + 팩스 + 031-483-1767 +
+
+ 이메일 info@zioinfo.co.kr
+ 주소 경기도 안산시 단원구 광덕4로 220 오피스브이 578호
+
+ + 웹사이트 + zioinfo.co.kr +
+
+
+ + GS인증 1등급 신청완료 + + + ISO 9001 인증 +
diff --git a/frontend/src/pages/Company.jsx b/frontend/src/pages/Company.jsx index c1575ae..ea8d33e 100644 --- a/frontend/src/pages/Company.jsx +++ b/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() {
{[ - { icon: '🎯', title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' }, - { icon: '🚀', title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' }, - { icon: '🤝', title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' }, - { icon: '🌱', title: '지속 성장', desc: '구성원과 고객이 함께 성장하는 지속 가능한 파트너십을 추구합니다' }, + { icon: , title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' }, + { icon: , title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' }, + { icon: , title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' }, + { icon: , title: '지속 성장', desc: '구성원과 고객이 함께 성장하는 지속 가능한 파트너십을 추구합니다' }, ].map((v, i) => (
-
{v.icon}
+
{v.icon}

{v.title}

{v.desc}

@@ -521,7 +522,7 @@ function Location() {
{/* 본사 */}
-

📍 본사

+

본사

@@ -536,12 +537,12 @@ function Location() { {/* 교통 안내 */}
-

🚇 교통 안내

+

교통 안내

{[ - { type: '지하철', icon: '🚇', lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] }, - { type: '버스', icon: '🚌', lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] }, - { type: '자가용', icon: '🚗', lines: ['서해안고속도로 비봉IC → 안산방면 → 광덕4로', '주차 가능 (방문 전 사전 연락 권장)'] }, + { type: '지하철', icon: , lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] }, + { type: '버스', icon: , lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] }, + { type: '자가용', icon: , lines: ['서해안고속도로 비봉IC → 안산방면 → 광덕4로', '주차 가능 (방문 전 사전 연락 권장)'] }, ].map((t, i) => (
@@ -553,7 +554,7 @@ function Location() { ))}
- 📌 네이버 지도에서 "오피스브이 안산" 검색 + 네이버 지도에서 "오피스브이 안산" 검색
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx index 12d8156..0c0f999 100644 --- a/frontend/src/pages/Contact.jsx +++ b/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() {

연락처 정보

{[ - { icon: '📞', label: '대표전화', value: '031-483-1766' }, - { icon: '✉️', label: '이메일', value: 'info@zioinfo.co.kr' }, - { icon: '🕐', label: '운영시간', value: '평일 09:00 ~ 18:00' }, - { icon: '📍', label: '주소', value: '경기도 안산시 단원구 광덕4로 220 오피스브이 578호' }, + { icon: , label: '대표전화', value: '031-483-1766' }, + { icon: , label: '이메일', value: 'info@zioinfo.co.kr' }, + { icon: , label: '운영시간', value: '평일 09:00 ~ 18:00' }, + { icon: , label: '주소', value: '경기도 안산시 단원구 광덕4로 220 오피스브이 578호' }, ].map((c,i) => (
{c.icon} diff --git a/frontend/src/pages/GuardiaDetail.jsx b/frontend/src/pages/GuardiaDetail.jsx index 0d66b3e..0056539 100644 --- a/frontend/src/pages/GuardiaDetail.jsx +++ b/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: , color: '#6366F1', items: [ { title: 'AI 에이전트 자동화', desc: 'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' }, @@ -30,7 +31,7 @@ const FEATURE_CATEGORIES = [ { id: 'itsm', label: 'ITSM 핵심', - icon: '📋', + icon: , color: '#0EA5E9', items: [ { title: 'SR 서비스 요청 관리', desc: '접수→배정→처리→완료. AI 자동 분류·우선순위 산정. 자율 워크플로우 자동화.' }, @@ -48,7 +49,7 @@ const FEATURE_CATEGORIES = [ { id: 'infra', label: '인프라 · 클라우드', - icon: '☁️', + icon: , color: '#10B981', items: [ { title: '에이전트리스 SSH 배포', desc: 'Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' }, @@ -68,7 +69,7 @@ const FEATURE_CATEGORIES = [ { id: 'security', label: '보안 · 컴플라이언스', - icon: '🔒', + icon: , color: '#F59E0B', items: [ { title: 'RBAC + MFA/OTP', desc: '역할별 세밀 권한 분리. TOTP 2단계 인증. JWT + 이상 감지 강제 재인증.' }, @@ -86,7 +87,7 @@ const FEATURE_CATEGORIES = [ { id: 'integration', label: '외부 연동 · OCR', - icon: '🔗', + icon: , color: '#EC4899', items: [ { title: 'Upstage OCR (Document AI)', desc: 'PDF·이미지 문서 파싱·정보 추출·QA. 계약서·납품서·청구서·회의록 자동 처리.' }, @@ -105,7 +106,7 @@ const FEATURE_CATEGORIES = [ { id: 'public', label: '공공기관 특화', - icon: '🏛️', + icon: , color: '#0369A1', items: [ { title: '나라장터 연동', desc: '조달청 OpenAPI. 입찰공고·계약 현황 조회. 계약 → ITSM SR 자동 연계.' }, @@ -121,7 +122,7 @@ const FEATURE_CATEGORIES = [ { id: 'saas', label: 'SaaS · 멀티테넌트', - icon: '💼', + icon: , color: '#8B5CF6', items: [ { title: '멀티테넌트 완전 격리', desc: '기관별 데이터 Row-Level Security. 테넌트간 정보 유출 원천 차단.' }, @@ -138,7 +139,7 @@ const FEATURE_CATEGORIES = [ { id: 'devops', label: 'DevOps · CI/CD', - icon: '🚀', + icon: , color: '#0891B2', items: [ { title: 'Jenkins + Gitea 파이프라인', desc: '5개 시스템 자동 빌드·테스트·배포. webhook → git pull → 재기동. 알림 연동.' }, @@ -155,7 +156,7 @@ const FEATURE_CATEGORIES = [ { id: 'autonomy', label: '자율화 · 성장 (NEW)', - icon: '🌱', + icon: , color: '#059669', items: [ { title: '건강검진 — 자동 테스트', desc: '매일 03:00 전체 API 자동 실행(69개). 실패 시 SR 자동 생성 + 메신저 즉시 알림. 결과 이력 저장.' }, @@ -414,7 +415,7 @@ export default function GuardiaDetail() { {FEATURE_CATEGORIES.map(cat => (
- {cat.icon} + {cat.icon}

, name: '유연근무제', desc: '코어타임(10시~16시) 외 자유로운 출퇴근 시간 선택' }, + { icon: , name: '재택근무', desc: '직무에 따라 주 1~2회 재택근무 지원' }, + { icon: , name: '장비 지원', desc: '맥북 또는 고성능 윈도우 노트북 선택 지급' }, + { icon: , name: '목표 관리(OKR)', desc: '분기별 OKR로 명확한 목표·성과 관리' }, ] }, { cat: '📚 성장 지원', items: [ - { icon: '📖', name: '교육비 지원', desc: '연 200만원 교육비 지원 (도서, 강의, 세미나)' }, - { icon: '🏆', name: '자격증 지원', desc: '정보처리기사, PMP, AWS, Oracle 자격증 취득 지원' }, - { icon: '🎓', name: '사내 강의', desc: 'AI·클라우드·보안 월 1회 사내 기술 세미나' }, - { icon: '✈️', name: '컨퍼런스', desc: 'AWS re:Invent, Google I/O 등 국내외 컨퍼런스 참가 지원' }, + { icon: , name: '교육비 지원', desc: '연 200만원 교육비 지원 (도서, 강의, 세미나)' }, + { icon: , name: '자격증 지원', desc: '정보처리기사, PMP, AWS, Oracle 자격증 취득 지원' }, + { icon: , name: '사내 강의', desc: 'AI·클라우드·보안 월 1회 사내 기술 세미나' }, + { icon: , name: '컨퍼런스', desc: 'AWS re:Invent, Google I/O 등 국내외 컨퍼런스 참가 지원' }, ] }, { cat: '🎁 복지 혜택', items: [ - { icon: '🏥', name: '건강검진', desc: '연 1회 종합건강검진 (배우자 포함)' }, - { icon: '🎂', name: '경조사 지원', desc: '경조금·경조휴가 제공 (결혼, 출산, 상조)' }, - { icon: '🍽️', name: '식대 지원', desc: '점심 식대 월 15만원 지원 (식권 또는 카드)' }, - { icon: '🎉', name: '명절 선물', desc: '설·추석 명절 선물 및 상여금 지급' }, + { icon: , name: '건강검진', desc: '연 1회 종합건강검진 (배우자 포함)' }, + { icon: , name: '경조사 지원', desc: '경조금·경조휴가 제공 (결혼, 출산, 상조)' }, + { icon: , name: '식대 지원', desc: '점심 식대 월 15만원 지원 (식권 또는 카드)' }, + { icon: , name: '명절 선물', desc: '설·추석 명절 선물 및 상여금 지급' }, ] }, ];

회사명(주)지오정보기술