wing-ops/docs

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. 백엔드 설정

cd backend

# 의존성 설치
npm install

# 데이터베이스 시드 (CSV를 DB로 변환)
npm run db:seed

# 개발 서버 실행
npm run dev

백엔드 서버는 http://localhost:3001에서 실행됩니다.

2. 프론트엔드 설정

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 - 특정 부모의 자식 레이어 조회

데이터베이스 스키마

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 훅 사용

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 직접 호출

import { fetchAllLayers, fetchWMSLayers } from './services/api'

async function loadLayers() {
  const layers = await fetchAllLayers()
  const wmsLayers = await fetchWMSLayers()
  console.log(layers, wmsLayers)
}

CSV 데이터 업데이트

LayerList.csv 파일을 수정한 후:

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