179 lines
4.2 KiB
Markdown
179 lines
4.2 KiB
Markdown
|
# 함정용 GIS (Dark)
|
||
|
|
|
||
|
|
선박위치정보 전시 및 조회 기능을 제공하는 해양 GIS 프론트엔드 프로젝트입니다.
|
||
|
|
|
||
|
|
## 기술 스택
|
||
|
|
|
||
|
|
| 항목 | 기술 |
|
||
|
|
|------|------|
|
||
|
|
| 지도 엔진 | OpenLayers 9.2.4 |
|
||
|
|
| 실시간 렌더링 | Deck.gl 9.2.6 (GPU) |
|
||
|
|
| UI 프레임워크 | React 18.2.0 |
|
||
|
|
| 상태 관리 | Zustand 4.5.2 |
|
||
|
|
| 라우팅 | React Router 6.30.3 |
|
||
|
|
| 실시간 통신 | STOMP WebSocket |
|
||
|
|
| 번들러 | Vite 5.2.10 |
|
||
|
|
| 스타일 | SCSS |
|
||
|
|
|
||
|
|
## 구현 완료 기능
|
||
|
|
|
||
|
|
### 지도
|
||
|
|
- 야간지도 렌더링 (OpenLayers + Deck.gl)
|
||
|
|
- 줌 레벨 5~15, 타일 로딩 6~11
|
||
|
|
|
||
|
|
### 실시간 선박 표시
|
||
|
|
- 선종별 아이콘/색상 표시
|
||
|
|
- 호버 툴팁
|
||
|
|
- 선종별 카운트
|
||
|
|
- 통합 모드 지원
|
||
|
|
|
||
|
|
### 선박 필터
|
||
|
|
- 선종별 ON/OFF
|
||
|
|
- 범례 표시
|
||
|
|
|
||
|
|
### 항적 조회
|
||
|
|
- 우클릭 메뉴 → 항적조회
|
||
|
|
- 조회 기간 설정 (최대 7일)
|
||
|
|
- 프로그레스 바
|
||
|
|
- 표시 옵션 (점/선/레이블)
|
||
|
|
- 통합선박 장비 필터: A/V/E/T/D
|
||
|
|
- 호버 하이라이트
|
||
|
|
|
||
|
|
### 리플레이
|
||
|
|
- WebSocket 실시간 데이터 수신
|
||
|
|
- 재생/일시정지
|
||
|
|
- 배속 조절: 1x ~ 1000x
|
||
|
|
- 선박 분류 관리
|
||
|
|
- Insert/Delete 단축키 지원
|
||
|
|
|
||
|
|
### 추적 모드
|
||
|
|
- 경비함정 반경 설정: 10/25/50/100/200 NM
|
||
|
|
- TopBar 정보 표시
|
||
|
|
|
||
|
|
### UI/UX
|
||
|
|
- 다크/라이트 테마 전환
|
||
|
|
- 토스트 알림
|
||
|
|
- 드래그 가능 패널
|
||
|
|
|
||
|
|
## 개발 환경 설정
|
||
|
|
|
||
|
|
### 사전 요구사항
|
||
|
|
|
||
|
|
- Node.js 18 이상
|
||
|
|
- Yarn Classic 1.x (`npm install -g yarn`)
|
||
|
|
|
||
|
|
### 환경 변수 파일
|
||
|
|
|
||
|
|
| 파일 | 용도 | 빌드 명령어 |
|
||
|
|
|------|------|------------|
|
||
|
|
| `.env.development` | 로컬 개발 | `yarn dev` |
|
||
|
|
| `.env.dev` | 개발서버 배포 | `yarn build:dev` |
|
||
|
|
| `.env.qa` | QA 배포 | `yarn build:qa` |
|
||
|
|
| `.env.production` | 운영 배포 | `yarn build` |
|
||
|
|
|
||
|
|
### 인터넷 환경 (일반)
|
||
|
|
|
||
|
|
```bash
|
||
|
|
yarn install
|
||
|
|
yarn dev
|
||
|
|
```
|
||
|
|
|
||
|
|
### 폐쇄망 환경 (오프라인)
|
||
|
|
|
||
|
|
이 프로젝트는 **Yarn Offline Mirror**를 통해 폐쇄망에서도 빌드가 가능합니다.
|
||
|
|
`.yarn-offline-cache/` 폴더에 모든 의존성 패키지의 tgz 아카이브가 포함되어 있습니다.
|
||
|
|
|
||
|
|
#### Windows 폐쇄망 초기 세팅
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 방법 1: 배치 스크립트 실행
|
||
|
|
setup-windows.bat
|
||
|
|
|
||
|
|
# 방법 2: 수동 실행
|
||
|
|
yarn install --offline
|
||
|
|
```
|
||
|
|
|
||
|
|
`yarn install --offline` 실행 시 네트워크 접근 없이 `.yarn-offline-cache/`에서 패키지를 설치하며,
|
||
|
|
실행 환경(Windows/macOS/Linux)에 맞는 네이티브 바이너리가 자동으로 선택됩니다.
|
||
|
|
|
||
|
|
#### 오프라인 캐시 갱신 (패키지 추가/업데이트 시)
|
||
|
|
|
||
|
|
인터넷이 가능한 환경에서 다음을 실행하면 캐시가 자동 갱신됩니다:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
yarn add <패키지명> # 캐시에 자동 추가
|
||
|
|
yarn install # 전체 캐시 동기화
|
||
|
|
```
|
||
|
|
|
||
|
|
### 개발 명령어
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 로컬 개발 서버 실행 (port 3000)
|
||
|
|
yarn dev
|
||
|
|
|
||
|
|
# 개발서버 배포용 빌드
|
||
|
|
yarn build:dev
|
||
|
|
|
||
|
|
# QA 배포용 빌드
|
||
|
|
yarn build:qa
|
||
|
|
|
||
|
|
# 운영 배포용 빌드
|
||
|
|
yarn build
|
||
|
|
|
||
|
|
# 빌드 결과 미리보기
|
||
|
|
yarn preview
|
||
|
|
```
|
||
|
|
|
||
|
|
## 배포 가이드
|
||
|
|
|
||
|
|
### 개발서버 배포 (/kcgnv/)
|
||
|
|
|
||
|
|
1. 빌드 실행:
|
||
|
|
```bash
|
||
|
|
yarn build:dev
|
||
|
|
```
|
||
|
|
|
||
|
|
2. dist 폴더 내용을 서버의 `/kcgnv/` 경로에 배포:
|
||
|
|
```bash
|
||
|
|
# 기존 파일 백업 후 교체
|
||
|
|
cp -r dist/* /var/www/html/kcgnv/
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Apache 설정 확인 (httpd.conf):
|
||
|
|
```apache
|
||
|
|
Alias /kcgnv /var/www/html/kcgnv
|
||
|
|
<Directory "/var/www/html/kcgnv">
|
||
|
|
Options Indexes FollowSymLinks
|
||
|
|
AllowOverride All
|
||
|
|
Require all granted
|
||
|
|
FallbackResource /kcgnv/index.html
|
||
|
|
</Directory>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 환경별 BASE_URL 설정
|
||
|
|
|
||
|
|
- 로컬 개발: `/` (자동)
|
||
|
|
- 개발서버: `/kcgnv/` (.env.dev)
|
||
|
|
- 운영서버: 환경에 맞게 설정
|
||
|
|
|
||
|
|
## 프로젝트 구조
|
||
|
|
|
||
|
|
```
|
||
|
|
src/
|
||
|
|
├── api/ # API 클라이언트
|
||
|
|
├── components/ # 공통 컴포넌트
|
||
|
|
├── hooks/ # 커스텀 훅
|
||
|
|
├── map/ # OpenLayers 지도 모듈
|
||
|
|
├── pages/ # 페이지 컴포넌트
|
||
|
|
├── publish/ # 퍼블리싱 미리보기 (개발용)
|
||
|
|
├── replay/ # 리플레이 모듈
|
||
|
|
├── stores/ # Zustand 스토어
|
||
|
|
├── tracking/ # 항적 추적 모듈
|
||
|
|
├── types/ # 타입/상수 정의
|
||
|
|
└── scss/ # 스타일시트
|
||
|
|
```
|
||
|
|
|
||
|
|
## 참조 프로젝트
|
||
|
|
|
||
|
|
- mda-react-front (메인 프로젝트)
|