# (주)지오정보기술 홈페이지 개발 가이드

> **프로젝트 코드:** 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 배포 파이프라인)