gc-wing/apps/web
htlee 168bea0621 feat(map): 오버레이 가시성 개선 + 경고 선박 강조
Part A — 오버레이 라인 가시성:
- Globe/Mercator 쌍끌이·FC·선단 라인 굵기 ~2x 증가
- Globe 범위 원·선단 원 대시 패턴 추가
- Globe 오버레이 호버 시 브리딩(breathing) 맥동 rAF

Part B — 경고 선박 강조:
- DashboardPage → Map3D alarmMmsiMap 전달
- Globe: 경고 맥동 레이어(ships-globe-alarm-pulse) + 배지(ships-globe-alarm-badge)
- Mercator: Deck.gl ScatterplotLayer 맥동 + TextLayer 배지
- 경고 종류별 배지(이/수/환/휴/A), z-index 상향, 호버 스케일 확대
- 경고 필터 OFF 시 맥동/배지 자동 비표시

Part C — Mercator 선명 라벨:
- MapLibre 라벨 → Deck.gl TextLayer 교체 (z-order 안정)

Part D — 프로젝션 전환 안정화:
- Globe→Mercator 전환 시 Globe custom layer 맵에서 분리
- alarm rAF에 projectionBusyRef 가드 추가
- overlay.setProps() stale WebGL 자원 참조 방지

Part E — 김개발(DEV) 모드 더미 데이터:
- mockOverlayData.ts: 서해 12척 가상 선박 (5종 경고 시나리오)
- 김개발 로그인 시 자동 주입, 일반 계정 미노출

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 10:52:51 +09:00
..
public feat(weather): 기상 타일 오버레이 + 수역별 날씨 패널 2026-02-16 21:45:07 +09:00
src feat(map): 오버레이 가시성 개선 + 경고 선박 강조 2026-02-17 10:52:51 +09:00
.gitignore chore: initial commit 2026-02-15 11:22:38 +09:00
eslint.config.js chore: initial commit 2026-02-15 11:22:38 +09:00
index.html chore: Tailwind CSS v4 + @wing/ui 패키지 인프라 구축 2026-02-17 06:10:04 +09:00
package.json chore: Tailwind CSS v4 + @wing/ui 패키지 인프라 구축 2026-02-17 06:10:04 +09:00
README.md chore: initial commit 2026-02-15 11:22:38 +09:00
tsconfig.app.json chore: initial commit 2026-02-15 11:22:38 +09:00
tsconfig.json chore: initial commit 2026-02-15 11:22:38 +09:00
tsconfig.node.json chore: initial commit 2026-02-15 11:22:38 +09:00
vite.config.ts chore: Tailwind CSS v4 + @wing/ui 패키지 인프라 구축 2026-02-17 06:10:04 +09:00

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])