feat(zioinfo-web): (주)지오정보기술 홈페이지 Spring Boot+React 구현

Spring Boot 3.2 + React 18 SPA + SQLite
GUARDiA PMS ZIO-WEB-2026 프로젝트 연동
URP 스타일 디자인, GUARDiA 솔루션 상세 소개 (스크린샷 6장)
25개 ChatOps 봇 명령어 카탈로그, Messenger Bot 시나리오 데모
manual/17 개발가이드 생성

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

17_지오정보기술_홈페이지_개발가이드.md

@@ -0,0 +1,186 @@
+# (주)지오정보기술 홈페이지 개발 가이드
+
+> **프로젝트 코드:** ZIO-WEB-2026  
+> **기술 스택:** Spring Boot 3.2 + React 18 + SQLite  
+> **GUARDiA PMS:** http://localhost:8001/si (프로젝트 ID=1)
+
+---
+
+## 1. 프로젝트 구조
+
+```
+workspace/zioinfo-web/
+├── backend/                    # Spring Boot 백엔드 (포트 8080)
+│   ├── pom.xml                 # Maven 의존성 (SQLite, JPA, Mail)
+│   ├── src/main/
+│   │   ├── java/kr/co/zioinfo/web/
+│   │   │   ├── ZioinfoWebApplication.java
+│   │   │   ├── controller/ApiController.java   # 전체 REST API
+│   │   │   ├── model/News.java
+│   │   │   ├── model/Inquiry.java
+│   │   │   ├── service/NewsService.java
+│   │   │   ├── service/InquiryService.java
+│   │   │   ├── repository/NewsRepository.java
+│   │   │   ├── repository/InquiryRepository.java
+│   │   │   └── config/DataInitializer.java     # 초기 뉴스 데이터
+│   │   └── resources/
+│   │       └── application.yml                 # SQLite 설정
+│   └── data/zioinfo.db                         # SQLite DB 파일 (자동 생성)
+│
+└── frontend/                   # React SPA (포트 3000, 개발)
+    ├── public/
+    │   ├── logo.png             # 지오정보기술 로고
+    │   ├── logo-white.png       # 흰색 로고 (푸터)
+    │   ├── favicon.ico
+    │   └── screenshots/         # GUARDiA 실행 화면 캡처 6장
+    ├── src/
+    │   ├── components/layout/
+    │   │   ├── Header.jsx + .css   # 고정 헤더 + 드롭다운 메뉴
+    │   │   └── Footer.jsx + .css   # 회사 정보 + 링크
+    │   ├── pages/
+    │   │   ├── Home.jsx + .css         # 메인 (히어로 슬라이더)
+    │   │   ├── GuardiaDetail.jsx + .css # GUARDiA 솔루션 상세
+    │   │   ├── Contact.jsx + .css      # 문의하기 폼
+    │   │   ├── Company.jsx             # 회사소개
+    │   │   ├── NewsPage.jsx            # 뉴스룸
+    │   │   └── Recruit.jsx             # 채용
+    │   ├── styles/global.css           # 디자인 시스템 (변수/공통)
+    │   ├── App.jsx                     # 라우팅
+    │   └── main.jsx                    # 진입점
+    ├── package.json
+    └── vite.config.js                  # Spring Boot 백엔드 프록시
+```
+
+---
+
+## 2. 실행 방법
+
+### 개발 환경 (핫 리로드)
+
+```bash
+# 터미널 1: Spring Boot 백엔드
+cd workspace/zioinfo-web/backend
+./mvnw spring-boot:run
+
+# 터미널 2: React 프론트엔드
+cd workspace/zioinfo-web/frontend
+npm install
+npm run dev        # http://localhost:3000
+```
+
+### 운영 빌드 (단일 JAR)
+
+```bash
+# React 빌드 → Spring Boot static 폴더로 출력
+cd frontend && npm run build
+
+# Spring Boot 단일 JAR 빌드
+cd ../backend && ./mvnw clean package -DskipTests
+
+# 실행
+java -jar target/zioinfo-web-1.0.0.jar
+# → http://localhost:8080
+```
+
+---
+
+## 3. API 엔드포인트
+
+| Method | URL | 설명 |
+|--------|-----|------|
+| GET    | `/api/company`            | 회사 정보 |
+| GET    | `/api/history`            | 회사 연혁 |
+| GET    | `/api/solutions/guardia`  | GUARDiA 솔루션 정보 |
+| GET    | `/api/menu`               | 메뉴 구조 |
+| GET    | `/api/news`               | 소식 목록 (페이지) |
+| GET    | `/api/news/{id}`          | 소식 상세 |
+| POST   | `/api/inquiry`            | 문의 접수 |
+
+---
+
+## 4. DB 설정 (SQLite)
+
+```yaml
+# application.yml
+spring:
+  datasource:
+    url: jdbc:sqlite:./data/zioinfo.db
+    driver-class-name: org.sqlite.JDBC
+  jpa:
+    database-platform: org.hibernate.community.dialect.SQLiteDialect
+    hibernate.ddl-auto: update
+```
+
+**DB 파일 위치:** `backend/data/zioinfo.db`  
+**MySQL 전환 시:** `application-prod.yml`에 MySQL 설정 후 `--spring.profiles.active=prod`
+
+---
+
+## 5. 메뉴 구성
+
+| 1단계 | 2단계 서브메뉴 |
+|-------|--------------|
+| 회사소개 | CEO 인사말, 연혁, 조직도, CI 소개, 오시는 길 |
+| 솔루션 | **GUARDiA ITSM** ★, ERP, CRM, BI |
+| 사업실적 | 구축 레퍼런스, 파트너 |
+| 고객지원 | 공지사항, FAQ, 카탈로그, 문의하기 |
+| 채용 | 채용공고, 복리후생, 지원하기 |
+| 뉴스 | 뉴스룸, 기술 블로그 |
+
+---
+
+## 6. GUARDiA 솔루션 소개 페이지 (`/solution/guardia`)
+
+**탭 구성:**
+1. **핵심 기능** — 실행 스크린샷 6장 + 8가지 기능 카드
+2. **Messenger Bot** — 25개 명령어 카탈로그 + 운영 시나리오 데모
+3. **에디션 비교** — COMMUNITY / STANDARD / ENTERPRISE
+4. **기술 스택** — Backend/AI/Infra/Frontend/DevOps/모니터링
+5. **도입 사례** — 광역기관/공공IT센터/교육청
+
+---
+
+## 7. 디자인 시스템
+
+```css
+/* 브랜드 컬러 */
+--primary:        #0051A2;   /* 딥블루 */
+--accent:         #00A3E0;   /* 포인트 */
+--secondary:      #1A1A2E;   /* 다크 네이비 */
+
+/* 폰트 */
+--font-sans: 'Noto Sans KR', 'Inter', sans-serif;
+```
+
+**참조 디자인:** https://www.urpai.co.kr/
+
+---
+
+## 8. 스크린샷 추가/갱신
+
+GUARDiA 화면이 변경될 때 재캡처:
+
+```bash
+cd workspace/zioinfo-web
+python3 capture_screenshots.py   # (추가 예정)
+```
+
+현재 캡처된 화면:
+- `01_dashboard.png` — 통합 대시보드
+- `02_sr_list.png` — SR 서비스 요청
+- `03_si_project.png` — PMS 프로젝트
+- `04_incidents.png` — 인시던트 관리
+- `05_agents.png` — AI 에이전트
+- `06_license.png` — 라이선스 관리
+
+---
+
+## 9. TODO (다음 단계)
+
+- [ ] 관리자 페이지 (`/admin`) — 뉴스 CRUD, 문의 답변
+- [ ] 채용 지원 폼 처리
+- [ ] 오시는 길 지도 (카카오맵 연동)
+- [ ] SEO 메타태그 완성
+- [ ] 다크모드 대응
+- [ ] E2E 테스트 (Playwright)
+- [ ] Jenkins CI/CD 연동 (GUARDiA 배포 파이프라인)