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

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

프로젝트 코드: 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. 실행 방법

개발 환경 (핫 리로드)

# 터미널 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)

# 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)

# 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. 디자인 시스템

/* 브랜드 컬러 */
--primary:        #0051A2;   /* 딥블루 */
--accent:         #00A3E0;   /* 포인트 */
--secondary:      #1A1A2E;   /* 다크 네이비 */

/* 폰트 */
--font-sans: 'Noto Sans KR', 'Inter', sans-serif;

참조 디자인: https://www.urpai.co.kr/

---

8. 스크린샷 추가/갱신

GUARDiA 화면이 변경될 때 재캡처:

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 배포 파이프라인)