8758ff0b91
## index.html (기반 메타태그) - title: 풀네임 + 키워드 포함 - description: 160자 최적화 - keywords: 지오정보기술·GUARDiA·공공기관IT·안산IT기업 등 - og:type/title/description/url/image/locale - twitter:card/title/description/image - JSON-LD: Organization (주소·전화·대표자) + WebSite 스키마 - 네이버/구글 서치콘솔 인증 주석 준비 ## public/sitemap.xml (26개 URL) - priority: 홈 1.0, GUARDiA 0.9, 오시는길·문의 0.8 - changefreq: 뉴스/공지 weekly, 솔루션 monthly, 약관 yearly ## public/robots.txt - Googlebot/Yeti(네이버) Allow, Baiduspider Disallow - /admin/ /api/ Disallow - Sitemap 경로 명시 ## hooks/useSeoMeta.js - 페이지별 title/description/og/twitter/canonical 동적 업데이트 ## 적용 페이지 (6개) - Home: AI 인프라 자율 운영 키워드 - GuardiaDetail: GUARDiA ITSM 상세 설명 - Company>Greeting: CEO 인사말·홍영택 - Company>Location: 안산 주소·전화번호 - Privacy/Terms/Sitemap: 각 페이지 설명 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
444 lines
19 KiB
JavaScript
444 lines
19 KiB
JavaScript
import React from 'react';
|
||
import { Routes, Route, NavLink, useNavigate } from 'react-router-dom';
|
||
import './Common.css';
|
||
import './Company.css';
|
||
import { useSeoMeta } from '../hooks/useSeoMeta';
|
||
|
||
/* ── 서브 네비 ── */
|
||
const SUB_NAV = [
|
||
{ path: '/company/greeting', label: 'CEO 인사말' },
|
||
{ path: '/company/history', label: '연혁' },
|
||
{ path: '/company/organization', label: '조직도' },
|
||
{ path: '/company/ci', label: 'CI 소개' },
|
||
{ path: '/company/location', label: '오시는 길' },
|
||
];
|
||
|
||
function SubNav({ title }) {
|
||
return (
|
||
<>
|
||
<div className="page-hero">
|
||
<div className="container">
|
||
<span className="section-label">Company</span>
|
||
<h1 className="page-hero-title">{title}</h1>
|
||
</div>
|
||
</div>
|
||
<nav className="sub-nav">
|
||
<div className="container">
|
||
{SUB_NAV.map(n => (
|
||
<NavLink key={n.path} to={n.path}
|
||
className={({ isActive }) => 'sub-nav-item' + (isActive ? ' active' : '')}>
|
||
{n.label}
|
||
</NavLink>
|
||
))}
|
||
</div>
|
||
</nav>
|
||
</>
|
||
);
|
||
}
|
||
|
||
/* ── CEO 인사말 ── */
|
||
function Greeting() {
|
||
useSeoMeta({ title: 'CEO 인사말 — 홍영택 대표이사', description: '(주)지오정보기술 홍영택 대표이사의 인사말. 20년 이상 공공기관 IT 전문 서비스 기업으로 성장한 지오정보기술의 비전을 소개합니다.', path: '/company/greeting' });
|
||
return (
|
||
<main id="main-content" className="inner-page">
|
||
<SubNav title="CEO 인사말" />
|
||
<section className="section">
|
||
<div className="container" style={{ maxWidth: '860px' }}>
|
||
<div className="ceo-wrap">
|
||
<div className="ceo-photo">
|
||
<div className="ceo-avatar">
|
||
<span>CEO</span>
|
||
</div>
|
||
<p className="ceo-name">홍영택</p>
|
||
<p className="ceo-sign">대표이사</p>
|
||
</div>
|
||
<div className="ceo-text">
|
||
<h2>안녕하십니까,<br />(주)지오정보기술 대표이사 홍영택입니다.</h2>
|
||
<div className="divider divider-left" style={{ margin: '20px 0 28px' }} />
|
||
{[
|
||
'저희 (주)지오정보기술은 2000년 창립 이래 20년 이상 공공기관 및 대기업 IT 전문 서비스 기업으로 성장해 왔습니다. 삼성전자, 현대백화점, 국민연금, 헌법재판소 등 국내 주요 기관·기업의 핵심 시스템을 성공적으로 구축·운영한 풍부한 경험을 보유하고 있습니다.',
|
||
'최근에는 GUARDiA ITSM 플랫폼을 통해 "AI 기반 인프라 자율 운영"이라는 새로운 패러다임을 제시하고 있습니다. 메신저 한 줄 명령으로 1,000개 이상의 관공서 레거시 인프라를 자동화하는 혁신적인 솔루션으로, 대상 서버에 별도 소프트웨어 설치 없이 표준 SSH/SFTP 프로토콜만으로 운영 자동화를 실현합니다.',
|
||
'앞으로도 고객의 성공이 곧 저희의 성공이라는 신념 아래, 최고의 기술력과 서비스로 보답하겠습니다. 언제나 여러분 곁에서 디지털 혁신의 파트너가 되겠습니다.',
|
||
'감사합니다.',
|
||
].map((p, i) => (
|
||
<p key={i} className="ceo-para">{p}</p>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 핵심 가치 */}
|
||
<div style={{ marginTop: '72px' }}>
|
||
<div className="section-header">
|
||
<span className="section-label">Core Values</span>
|
||
<h2 className="section-title">핵심 가치</h2>
|
||
</div>
|
||
<div className="grid-4">
|
||
{[
|
||
{ icon: '🎯', title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' },
|
||
{ icon: '🚀', title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' },
|
||
{ icon: '🤝', title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' },
|
||
{ icon: '🌱', 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>
|
||
<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>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
/* ── 연혁 ── */
|
||
const HISTORY = [
|
||
{
|
||
year: '2026', items: [
|
||
'GUARDiA ITSM v2.0 출시 — AI ChatOps 오케스트레이션 플랫폼',
|
||
'GS인증 1등급 신청 준비 완료 (TTA 심사 예정)',
|
||
'공공기관 1,000개 이상 멀티테넌트 지원 목표 달성',
|
||
]
|
||
},
|
||
{
|
||
year: '2025', items: [
|
||
'삼성전자 차세대 CRM 구축 (DB Migration / DA / 튜닝)',
|
||
'GUARDiA ITSM v1.0 베타 서비스 개시',
|
||
'AI 기반 인프라 자동화 특허 출원',
|
||
]
|
||
},
|
||
{
|
||
year: '2024', items: [
|
||
'DELL 차세대 CRM 구축 — DBA 역할 수행 (엠로)',
|
||
'소상공인컨설팅시스템 구축 (서울신용보증재단, PM)',
|
||
'국민연금 차세대 시스템 구축 (AA)',
|
||
]
|
||
},
|
||
{
|
||
year: '2023', items: [
|
||
'헌법재판소 포털시스템 구축 (PM)',
|
||
'서울신용보증재단 모바일앱 구축 완료 (PM)',
|
||
]
|
||
},
|
||
{
|
||
year: '2022', items: [
|
||
'에이텍에이피 통합유지보수관리시스템 개발 (PM)',
|
||
'헌법재판소 통합보안관제시스템 구축 (PM)',
|
||
]
|
||
},
|
||
{
|
||
year: '2020–2021', items: [
|
||
'현대백화점 HKOS 시스템 개발/구축 (PM)',
|
||
'서울시립대 대학행정정보시스템 성능 개선 (PL)',
|
||
'농협 하나로마트 ESL 시스템 구축 (PM)',
|
||
]
|
||
},
|
||
{
|
||
year: '2018–2019', items: [
|
||
'이마트 정산시스템 프로젝트 (DA)',
|
||
'우체국금융 스마트ATM 도입 (PMO)',
|
||
'현대백화점 무인POS시스템 구축 (PM)',
|
||
'갤러리아백화점 PDA 정산시스템 (PM)',
|
||
]
|
||
},
|
||
{
|
||
year: '2015–2017', items: [
|
||
'LG U+ VAN 고도화 — 승인시스템 개발 FEP/AP/BEP (AA)',
|
||
'한화그룹 4사 통합 HR시스템 구축 (PL)',
|
||
'참좋은여행 콜센터 어플리케이션 구축 (PL)',
|
||
]
|
||
},
|
||
{
|
||
year: '2013–2014', items: [
|
||
'삼성전자 품질관리시스템(QWINGS) 구축 (PM)',
|
||
'대우증권 통합인프라시스템 (DBA)',
|
||
'현대캐피탈 차세대시스템 (PL)',
|
||
'중소기업 1357 통합콜센터 구축 (PL)',
|
||
]
|
||
},
|
||
{
|
||
year: '2010–2012', items: [
|
||
'삼성전자서비스 eZone 갱신 (PL)',
|
||
'현대모비스 원가관리시스템 (DBA)',
|
||
'한국전기안전공사 전기안전포털시스템 (DBA)',
|
||
]
|
||
},
|
||
{
|
||
year: '2008–2009', items: [
|
||
'국민은행 차세대 포탈 구축 (PL)',
|
||
'한국원자력연료 인사정보(HMS)시스템 (DBA)',
|
||
'한국전기안전공사 안전점검 고도화 (DBA)',
|
||
]
|
||
},
|
||
{
|
||
year: '2000', items: [
|
||
'(주)지오정보기술 창립',
|
||
'공공기관 IT 인프라 서비스 개시',
|
||
]
|
||
},
|
||
];
|
||
|
||
function History() {
|
||
return (
|
||
<main id="main-content" className="inner-page">
|
||
<SubNav title="연혁" />
|
||
<section className="section">
|
||
<div className="container" style={{ maxWidth: '900px' }}>
|
||
<div className="section-header">
|
||
<span className="section-label">History</span>
|
||
<h2 className="section-title">20년+ 성장의 역사</h2>
|
||
<p className="section-desc">2000년 창립 이래 국내 주요 기관·기업과 함께 성장해 왔습니다</p>
|
||
</div>
|
||
<div className="timeline">
|
||
{HISTORY.map((h, i) => (
|
||
<div key={i} className="timeline-row">
|
||
<div className="timeline-year">{h.year}</div>
|
||
<div className="timeline-dot" />
|
||
<div className="timeline-content">
|
||
{h.items.map((item, j) => (
|
||
<div key={j} className="timeline-item">
|
||
<span className="timeline-bullet" />
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
/* ── 조직도 ── */
|
||
function Organization() {
|
||
return (
|
||
<main id="main-content" className="inner-page">
|
||
<SubNav title="조직도" />
|
||
<section className="section">
|
||
<div className="container" style={{ maxWidth: '960px' }}>
|
||
<div className="section-header">
|
||
<span className="section-label">Organization</span>
|
||
<h2 className="section-title">조직 구성</h2>
|
||
</div>
|
||
<div className="org-chart">
|
||
{/* 대표이사 */}
|
||
<div className="org-top">
|
||
<div className="org-box ceo">대표이사</div>
|
||
</div>
|
||
<div className="org-line-v" />
|
||
{/* 본부 */}
|
||
<div className="org-depts">
|
||
{[
|
||
{
|
||
name: '개발본부', color: 'var(--primary)',
|
||
teams: ['AI개발팀', '플랫폼개발팀', '프론트엔드팀']
|
||
},
|
||
{
|
||
name: '기술본부', color: 'var(--accent)',
|
||
teams: ['인프라팀', 'DBA팀', '보안팀']
|
||
},
|
||
{
|
||
name: 'PM본부', color: '#7c3aed',
|
||
teams: ['SI사업팀', 'SM운영팀', 'PMO팀']
|
||
},
|
||
{
|
||
name: '경영지원본부', color: '#059669',
|
||
teams: ['경영기획팀', '영업팀', '인사·총무팀']
|
||
},
|
||
].map((dept, i) => (
|
||
<div key={i} className="org-dept-col">
|
||
<div className="org-line-h" />
|
||
<div className="org-line-v-short" />
|
||
<div className="org-box dept" style={{ borderColor: dept.color, color: dept.color }}>
|
||
{dept.name}
|
||
</div>
|
||
<div className="org-teams">
|
||
{dept.teams.map((t, j) => (
|
||
<div key={j} className="org-box team">{t}</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 인원 현황 */}
|
||
<div className="grid-4" style={{ marginTop: '64px' }}>
|
||
{[
|
||
{ label: '전체 임직원', value: '50+', unit: '명' },
|
||
{ label: '개발 인력', value: '70', unit: '%' },
|
||
{ label: '평균 경력', value: '8', unit: '년+' },
|
||
{ label: '국가 공인 자격', value: '30+', unit: '개' },
|
||
].map((s, i) => (
|
||
<div key={i} className="card" style={{ padding: '32px', textAlign: 'center' }}>
|
||
<div style={{ fontSize: '36px', fontWeight: '900', color: 'var(--primary)' }}>
|
||
{s.value}<span style={{ fontSize: '18px' }}>{s.unit}</span>
|
||
</div>
|
||
<p style={{ marginTop: '8px', color: 'var(--gray-600)', fontSize: '14px' }}>{s.label}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
/* ── CI 소개 ── */
|
||
function CI() {
|
||
return (
|
||
<main id="main-content" className="inner-page">
|
||
<SubNav title="CI 소개" />
|
||
<section className="section">
|
||
<div className="container" style={{ maxWidth: '900px' }}>
|
||
<div className="section-header">
|
||
<span className="section-label">Corporate Identity</span>
|
||
<h2 className="section-title">브랜드 아이덴티티</h2>
|
||
<p className="section-desc">지오정보기술의 브랜드는 신뢰·혁신·전문성을 상징합니다</p>
|
||
</div>
|
||
|
||
{/* 로고 */}
|
||
<div className="ci-section">
|
||
<h3 className="ci-title">로고 시스템</h3>
|
||
<div className="ci-logo-wrap">
|
||
<div className="ci-logo-box dark">
|
||
<div className="ci-logo-text-wrap">
|
||
<span className="ci-logo-mark">GEO</span>
|
||
<span className="ci-logo-sub">정보기술</span>
|
||
</div>
|
||
<p className="ci-logo-label">다크 배경용</p>
|
||
</div>
|
||
<div className="ci-logo-box light">
|
||
<div className="ci-logo-text-wrap">
|
||
<span className="ci-logo-mark" style={{ color: 'var(--primary)' }}>GEO</span>
|
||
<span className="ci-logo-sub" style={{ color: 'var(--gray-700)' }}>정보기술</span>
|
||
</div>
|
||
<p className="ci-logo-label" style={{ color: 'var(--gray-500)' }}>라이트 배경용</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 브랜드 컬러 */}
|
||
<div className="ci-section">
|
||
<h3 className="ci-title">브랜드 컬러</h3>
|
||
<div className="ci-colors">
|
||
{[
|
||
{ name: 'Primary Blue', hex: '#0051A2', cmyk: 'C100 M50 Y0 K37', usage: '주요 UI·버튼·강조' },
|
||
{ name: 'Accent Blue', hex: '#00A3E0', cmyk: 'C100 M28 Y0 K12', usage: '포인트·링크·아이콘' },
|
||
{ name: 'Dark Navy', hex: '#1A1A2E', cmyk: 'C40 M40 Y0 K82', usage: '헤더·배경·텍스트' },
|
||
{ name: 'Pure White', hex: '#FFFFFF', cmyk: 'C0 M0 Y0 K0', usage: '배경·반전 텍스트' },
|
||
].map((c, i) => (
|
||
<div key={i} className="ci-color-card">
|
||
<div className="ci-color-swatch" style={{ background: c.hex, border: c.hex === '#FFFFFF' ? '1px solid #eee' : 'none' }} />
|
||
<div className="ci-color-info">
|
||
<strong>{c.name}</strong>
|
||
<span className="ci-hex">{c.hex}</span>
|
||
<span className="ci-cmyk">{c.cmyk}</span>
|
||
<span className="ci-usage">{c.usage}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 슬로건 */}
|
||
<div className="ci-section">
|
||
<h3 className="ci-title">브랜드 슬로건</h3>
|
||
<div className="ci-slogan-wrap">
|
||
<p className="ci-slogan-main">"공공기관 IT, 지오정보기술과 함께"</p>
|
||
<p className="ci-slogan-sub">20년 신뢰의 기술력으로 AI 인프라 혁신을 이끕니다</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
/* ── 오시는 길 ── */
|
||
function Location() {
|
||
useSeoMeta({ title: '오시는 길 — 경기도 안산시 단원구', description: '(주)지오정보기술 찾아오시는 방법. 경기도 안산시 단원구 광덕4로 220 오피스브이 578호. 전화: 031-483-1766', path: '/company/location', keywords: '지오정보기술 주소, 지오정보기술 위치, 안산 IT기업' });
|
||
return (
|
||
<main id="main-content" className="inner-page">
|
||
<SubNav title="오시는 길" />
|
||
<section className="section">
|
||
<div className="container" style={{ maxWidth: '960px' }}>
|
||
<div className="section-header">
|
||
<span className="section-label">Location</span>
|
||
<h2 className="section-title">오시는 길</h2>
|
||
</div>
|
||
|
||
{/* 네이버 지도 */}
|
||
<div className="map-wrap">
|
||
<iframe
|
||
title="(주)지오정보기술 오시는 길"
|
||
src="https://map.naver.com/v5/embed?type=address&query=%EA%B2%BD%EA%B8%B0%EB%8F%84+%EC%95%88%EC%82%B0%EC%8B%9C+%EB%8B%A8%EC%9B%90%EA%B5%AC+%EA%B4%91%EB%8D%954%EB%A1%9C+220&zoom=17&maptype=normal"
|
||
style={{ width: '100%', height: '420px', border: 'none', borderRadius: '12px', display: 'block' }}
|
||
allowFullScreen
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
|
||
<div className="location-grid">
|
||
{/* 본사 */}
|
||
<div className="card" style={{ padding: '36px' }}>
|
||
<h3 className="loc-office-title">📍 본사</h3>
|
||
<table className="loc-table">
|
||
<tbody>
|
||
<tr><th>회사명</th><td>(주)지오정보기술</td></tr>
|
||
<tr><th>대표이사</th><td>홍영택</td></tr>
|
||
<tr><th>주소</th><td>경기도 안산시 단원구 광덕4로 220<br />오피스브이 578호</td></tr>
|
||
<tr><th>대표전화</th><td><a href="tel:031-483-1766">031-483-1766</a></td></tr>
|
||
<tr><th>이메일</th><td><a href="mailto:info@zioinfo.co.kr">info@zioinfo.co.kr</a></td></tr>
|
||
<tr><th>운영시간</th><td>평일 09:00 ~ 18:00 (점심 12:00~13:00)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* 교통 안내 */}
|
||
<div className="card" style={{ padding: '36px' }}>
|
||
<h3 className="loc-office-title">🚇 교통 안내</h3>
|
||
<div className="transport-list">
|
||
{[
|
||
{ type: '지하철', icon: '🚇', lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] },
|
||
{ type: '버스', icon: '🚌', lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] },
|
||
{ type: '자가용', icon: '🚗', lines: ['서해안고속도로 비봉IC → 안산방면 → 광덕4로', '주차 가능 (방문 전 사전 연락 권장)'] },
|
||
].map((t, i) => (
|
||
<div key={i} className="transport-item">
|
||
<div className="transport-header">
|
||
<span>{t.icon}</span>
|
||
<strong>{t.type}</strong>
|
||
</div>
|
||
{t.lines.map((l, j) => <p key={j}>{l}</p>)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div style={{ marginTop: '20px', padding: '12px 16px', background: 'var(--gray-50)', borderRadius: '8px', fontSize: '13px', color: 'var(--gray-500)' }}>
|
||
📌 네이버 지도에서 <strong>"오피스브이 안산"</strong> 검색
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
/* ── 라우터 ── */
|
||
export default function Company() {
|
||
return (
|
||
<Routes>
|
||
<Route path="greeting" element={<Greeting />} />
|
||
<Route path="history" element={<History />} />
|
||
<Route path="organization" element={<Organization />} />
|
||
<Route path="ci" element={<CI />} />
|
||
<Route path="location" element={<Location />} />
|
||
<Route path="*" element={<Greeting />} />
|
||
</Routes>
|
||
);
|
||
}
|