# 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  # 기본값
```