From 0a858a6c66acfae02232e3bdf08462497558f7bc Mon Sep 17 00:00:00 2001 From: DESKTOP-TKLFCPRython Date: Sat, 30 May 2026 08:27:40 +0900 Subject: [PATCH] =?UTF-8?q?feat(zioinfo-web):=20(=EC=A3=BC)=EC=A7=80?= =?UTF-8?q?=EC=98=A4=EC=A0=95=EB=B3=B4=EA=B8=B0=EC=88=A0=20=ED=99=88?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20Spring=20Boot+React=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- 17_지오정보기술_홈페이지_개발가이드.md | 186 +++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 17_지오정보기술_홈페이지_개발가이드.md diff --git a/17_지오정보기술_홈페이지_개발가이드.md b/17_지오정보기술_홈페이지_개발가이드.md new file mode 100644 index 0000000..0fe4a19 --- /dev/null +++ b/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 배포 파이프라인)