refactor: 프론트엔드 구조 리팩토링 Phase 1~6 #155

htlee · 2026-03-23T11:14:39+09:00

htlee 코멘트됨,

2026-03-23 11:14:39 +09:00

소유자

변경 내용

Phase 1: App.tsx 분해 (771줄→163줄, -79%)

IranDashboard/KoreaDashboard 추출
SharedFilterContext + useSharedFilters
헤더 Portal 기반 탭별 UI

Phase 2: useStaticDeckLayers 분할 (1,086줄→85줄, -92%)

createPortLayers / createNavigationLayers / createMilitaryLayers / createFacilityLayers
layers/types.ts 공통 타입

Phase 3: StaticFacilityPopup 추출 (KoreaMap -20%)

Phase 4: 유틸 추출

geometry.ts (convexHull, padPolygon, clusterColor)
shipClassification.ts (MT 색상, 타입매핑)

Phase 5+6: 줌 디바운싱 + API 클라이언트 + 폴링 유틸

cn-fishing/localStorage 통합

develop 머지 후 누락 복원

변경 파일

26 files changed, +2,660 / -2,154

테스트

tsc --noEmit 통과
이란 탭 정상 렌더링
한국 탭 + 중국어선감시 + 어구 그룹
localStorage 상태 복원
줌 인/아웃 스케일

## 변경 내용 ### Phase 1: App.tsx 분해 (771줄→163줄, -79%) - IranDashboard/KoreaDashboard 추출 - SharedFilterContext + useSharedFilters - 헤더 Portal 기반 탭별 UI ### Phase 2: useStaticDeckLayers 분할 (1,086줄→85줄, -92%) - createPortLayers / createNavigationLayers / createMilitaryLayers / createFacilityLayers - layers/types.ts 공통 타입 ### Phase 3: StaticFacilityPopup 추출 (KoreaMap -20%) ### Phase 4: 유틸 추출 - geometry.ts (convexHull, padPolygon, clusterColor) - shipClassification.ts (MT 색상, 타입매핑) ### Phase 5+6: 줌 디바운싱 + API 클라이언트 + 폴링 유틸 ### cn-fishing/localStorage 통합 - develop 머지 후 누락 복원 ## 변경 파일 26 files changed, +2,660 / -2,154 ## 테스트 - [x] `tsc --noEmit` 통과 - [ ] 이란 탭 정상 렌더링 - [ ] 한국 탭 + 중국어선감시 + 어구 그룹 - [ ] localStorage 상태 복원 - [ ] 줌 인/아웃 스케일

htlee added 11 commits 2026-03-23 11:14:39 +09:00

docs: 릴리즈 노트 정리 (2026-03-23) 83c0281710

refactor: Phase 1 기반 컴포넌트 생성 — IranDashboard, KoreaDashboard, SharedFilterContext d6de826d1d

- SharedFilterContext + SharedFilterProvider: 카테고리 필터 공유 상태
- useSharedFilters: Context 소비 훅 (react-refresh 호환 분리)
- IranDashboard: 이란 전용 상태/JSX 추출 (274줄)
- KoreaDashboard: 한국 전용 상태/JSX 추출 (323줄)
- App.tsx 통합은 후속 커밋 (헤더 상태 참조 리팩토링 필요)

refactor: Phase 1 완료 — App.tsx 분해 (771줄→163줄) 19e5ff23aa

- App.tsx: 탭 전환 + 공통 헤더(MON/LANG/THEME) + SharedFilterProvider만 유지
- IranDashboard: 이란 전용 상태/JSX + 헤더 Portal (모드토글/맵모드/카운트)
- KoreaDashboard: 한국 전용 상태/JSX + 헤더 Portal (필터버튼/카운트)
- SharedFilterContext: hiddenAcCategories/hiddenShipCategories 공유 상태
- useSharedFilters: Context 소비 훅 (react-refresh 호환)
- showFieldAnalysis를 KoreaDashboard 내부로 이동
- 헤더 슬롯(dashboard-header-slot/dashboard-counts-slot)으로 탭별 UI Portal

refactor: Phase 2 완료 — useStaticDeckLayers 분할 (1,086줄→85줄) 8acf8824fb

- useStaticDeckLayers를 조합 훅으로 전환 (서브훅 호출만)
- createPortLayers: 항구 + 풍력단지 (145줄)
- createNavigationLayers: 해경 + 공항 + 항행경보 + 해적 (332줄)
- createMilitaryLayers: 군사시설 + 정부기관 + NK 발사/미사일 (272줄)
- createFacilityLayers: 인프라 + 위험시설 + CN/JP 시설 (310줄)
- layers/types.ts: 공유 타입 + hexToRgb (49줄)
- 각 서브훅은 SVG/색상 상수를 자체 포함 (독립 모듈)

fix: KoreaDashboard named export 추가 (default→named) aff17588b2

refactor: Phase 3 — StaticFacilityPopup 추출 (KoreaMap 935줄→742줄) 728936439b

- StaticFacilityPopup: 시설 클릭 Popup 로직 독립 컴포넌트 (207줄)
- KoreaMap: IIFE Popup 블록(~200줄) → 컴포넌트 호출 3줄로 대체
- SUB_META/KIND_DEFAULT 상수 + 배지/필드 렌더링 모두 이동

refactor: Phase 4-1 — geometry 유틸 추출 (FleetClusterLayer 979줄→927줄) c6c3b5ffb9

- utils/geometry.ts: convexHull, padPolygon, clusterColor 추출 (48줄)
- FleetClusterLayer: 로컬 함수 → import로 교체

refactor: Phase 4-2 — shipClassification 유틸 추출 (ShipLayer 862줄→769줄) 2b009ca81a

- utils/shipClassification.ts: MT 색상/타입매핑/국기/사이즈 추출 (87줄)
- ShipLayer: 로컬 상수/함수 93줄 → import 1줄로 교체

refactor: Phase 5+6 — 줌 디바운싱 + API 클라이언트 + 폴링 유틸 03f659986f

Phase 5 (렌더링 최적화):
- KoreaMap: onZoom ref 기반 비교로 불필요한 setState 방지

Phase 6 (서비스 정리):
- apiClient.ts: kcgFetch/externalFetch 래퍼 (credentials, error handling)
- usePoll.ts: 공통 폴링 훅 (interval + enabled + graceful error)

Merge remote-tracking branch 'origin/develop' into refactor/phase1-app-decompose 4ee977101b

# Conflicts:
#	docs/RELEASE-NOTES.md
#	frontend/src/App.tsx
#	frontend/src/components/korea/FleetClusterLayer.tsx

fix: cn-fishing/localStorage 변경 통합 — develop 머지 후 누락 복원 5fd1e2b3cf

- KoreaDashboard: useLocalStorage 적용 (koreaLayers, nationalities)
- KoreaDashboard: useKoreaFilters에 cnFishingOn 파라미터 전달
- KoreaDashboard: useCallback 의존성 React Compiler 호환
- FleetClusterLayer: geometry import 복원 + 로컬 함수 제거

claude-bot 이 변경사항을 승인하였습니다. 2026-03-23 11:14:49 +09:00

claude-bot left a comment

멤버

✅ 프론트엔드 리팩토링 Phase 1~6

htlee merged commit 2c566041ca into develop

2026-03-23 11:14:49 +09:00

htlee 삭제된 브랜치 refactor/phase1-app-decompose

2026-03-23 11:14:49 +09:00

htlee 커밋

2026-03-23 11:14:51 +09:00

에서 이 이슈 언급

refactor: 프론트엔드 구조 리팩토링 Phase 1~6 (#155)

"로그인하여 이 대화에 참여"

No reviewers

레이블 없음

마일스톤 없음

담당자 없음

참여자 2명

알림

마감일

기한이 올바르지 않거나 범위를 벗어났습니다. 'yyyy-mm-dd'형식을 사용해주십시오.

마감일이 설정되지 않았습니다.

의존성

No dependencies set.

Reference: gc/kcg-monitoring#155