htlee
fb556fad9e
- frontend: React 19 + Vite 7 + Leaflet + Tailwind + Zustand - backend: Express + better-sqlite3 + TypeScript - database: PostgreSQL 초기화 스크립트 - .gitignore: 대용량 참고자료(scat, 참고용) 및 바이너리 파일 제외 - .env.example: API 키 템플릿 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
154 lines
3.3 KiB
Markdown
Executable File
154 lines
3.3 KiB
Markdown
Executable File
# Wing - 해양 레이어 관리 시스템
|
|
|
|
## 프로젝트 구조
|
|
|
|
```
|
|
wing/
|
|
├── backend/ # Express + SQLite 백엔드
|
|
│ ├── src/
|
|
│ │ ├── db/ # 데이터베이스 설정 및 시드
|
|
│ │ ├── routes/ # API 라우트
|
|
│ │ └── server.ts # 메인 서버
|
|
│ └── data/ # SQLite 데이터베이스 파일
|
|
├── frontend/ # React + Vite 프론트엔드
|
|
│ └── src/
|
|
│ ├── components/
|
|
│ ├── data/ # 레이어 데이터 타입
|
|
│ ├── hooks/ # React Query 훅
|
|
│ └── services/ # API 클라이언트
|
|
└── LayerList.csv # 원본 레이어 데이터
|
|
```
|
|
|
|
## 설치 및 실행
|
|
|
|
### 1. 백엔드 설정
|
|
|
|
```bash
|
|
cd backend
|
|
|
|
# 의존성 설치
|
|
npm install
|
|
|
|
# 데이터베이스 시드 (CSV를 DB로 변환)
|
|
npm run db:seed
|
|
|
|
# 개발 서버 실행
|
|
npm run dev
|
|
```
|
|
|
|
백엔드 서버는 `http://localhost:3001`에서 실행됩니다.
|
|
|
|
### 2. 프론트엔드 설정
|
|
|
|
```bash
|
|
cd frontend
|
|
|
|
# 의존성 설치 (아직 안 했다면)
|
|
npm install
|
|
|
|
# 개발 서버 실행
|
|
npm run dev
|
|
```
|
|
|
|
프론트엔드는 `http://localhost:5173`에서 실행됩니다.
|
|
|
|
## API 엔드포인트
|
|
|
|
### 레이어 관리
|
|
|
|
- `GET /api/layers` - 모든 레이어 조회
|
|
- `GET /api/layers/:id` - 특정 레이어 조회
|
|
- `GET /api/layers/tree/all` - 계층 구조 레이어 트리 조회
|
|
- `GET /api/layers/wms/all` - WMS 레이어만 조회
|
|
- `GET /api/layers/level/:level` - 특정 레벨의 레이어 조회
|
|
- `GET /api/layers/children/:parentId` - 특정 부모의 자식 레이어 조회
|
|
|
|
## 데이터베이스 스키마
|
|
|
|
```sql
|
|
CREATE TABLE layers (
|
|
cmn_cd TEXT PRIMARY KEY, -- 레이어 코드
|
|
up_cmn_cd TEXT, -- 부모 레이어 코드
|
|
cmn_cd_full_nm TEXT NOT NULL, -- 전체 이름
|
|
cmn_cd_nm TEXT NOT NULL, -- 레이어 이름
|
|
cmn_cd_level INTEGER NOT NULL, -- 레벨 (1-7)
|
|
clnm TEXT, -- WMS 레이어 이름
|
|
FOREIGN KEY (up_cmn_cd) REFERENCES layers(cmn_cd)
|
|
);
|
|
```
|
|
|
|
## 프론트엔드에서 사용하기
|
|
|
|
### React Query 훅 사용
|
|
|
|
```typescript
|
|
import { useLayers, useWMSLayers } from './hooks/useLayers'
|
|
|
|
function MyComponent() {
|
|
const { data: layers, isLoading, error } = useLayers()
|
|
const { data: wmsLayers } = useWMSLayers()
|
|
|
|
if (isLoading) return <div>로딩 중...</div>
|
|
if (error) return <div>오류: {error.message}</div>
|
|
|
|
return (
|
|
<div>
|
|
{layers?.map(layer => (
|
|
<div key={layer.id}>{layer.name}</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### API 직접 호출
|
|
|
|
```typescript
|
|
import { fetchAllLayers, fetchWMSLayers } from './services/api'
|
|
|
|
async function loadLayers() {
|
|
const layers = await fetchAllLayers()
|
|
const wmsLayers = await fetchWMSLayers()
|
|
console.log(layers, wmsLayers)
|
|
}
|
|
```
|
|
|
|
## CSV 데이터 업데이트
|
|
|
|
LayerList.csv 파일을 수정한 후:
|
|
|
|
```bash
|
|
cd backend
|
|
npm run db:seed
|
|
```
|
|
|
|
이렇게 하면 데이터베이스가 새 CSV 데이터로 업데이트됩니다.
|
|
|
|
## 기술 스택
|
|
|
|
### 백엔드
|
|
- Node.js + TypeScript
|
|
- Express.js
|
|
- Better-SQLite3
|
|
|
|
### 프론트엔드
|
|
- React 19
|
|
- TypeScript
|
|
- Vite
|
|
- React Query (TanStack Query)
|
|
- Axios
|
|
- Leaflet (지도)
|
|
- Tailwind CSS
|
|
|
|
## 환경 변수
|
|
|
|
### 프론트엔드 (.env)
|
|
```
|
|
VITE_API_URL=http://localhost:3001/api
|
|
```
|
|
|
|
### 백엔드
|
|
```
|
|
PORT=3001 # 기본값
|
|
```
|