refactor(design-system): 하드코딩 색상 라이트/다크 대응 + raw HTML → 공통 컴포넌트 치환 #70

htlee · 2026-04-16T17:09:57+09:00

htlee 코멘트됨,

2026-04-16 17:09:57 +09:00

소유자

변경 사항

구조 정비 3단계 리팩토링 PR #C — 디자인 시스템 SSOT 전영역 준수 (30파일).

공통 컴포넌트 치환

raw <button> → <Button variant> (primary / destructive / secondary / ghost)
raw <input> → <Input size> (parent-inference, admin, ai-operations, auth)
raw <select> → <Select size> (detection)
커스텀 탭 → <TabBar> + <TabButton> (ChinaFishing 모드/선박/통계 탭)
raw <input type="checkbox"> → <Checkbox> (GearDetection FilterCheckGroup)

StatBox 재설계

color: string prop 제거 → intent: BadgeIntent + INTENT_TEXT_CLASS 매핑
RealGearGroups, RealVesselAnalysis

하드코딩 Tailwind 색상 라이트/다크 쌍 변환

text-red-400 → text-red-600 dark:text-red-400
green / blue / cyan / orange / yellow / purple / amber 동일 패턴
text-*-500 아이콘도 text-*-600 dark:text-*-500 로 라이트 모드 대응
상태 dot (bg-red-500 animate-pulse 등)은 의도적 시각 구분이므로 유지

에러 메시지 통일

에러: {error} 하드코딩 → t('error.errorPrefix', { msg: error })

영역별 파일 (30)

detection (6) — ChinaFishing, RealVesselAnalysis, RealGearGroups, GearDetection, GearIdentification, DarkVesselDetection
detection/components (4) — DarkDetailPanel, GearDetailPanel, VesselAnomalyPanel, VesselMiniMap
enforcement — EventList
surveillance (2) — LiveMapView, MapControl
admin (7) — PermissionsPanel, AccessControl, UserRoleAssignDialog, DataModelVerification, DataRetentionPolicy, PerformanceMonitoring, NoticeManagement
parent-inference (3) — ParentReview, ParentExclusion, LabelSession
statistics — ReportManagement
ai-operations (3) — AIAssistant, MLOpsPage, AIModelManagement
dashboard — Dashboard
field-ops (2) — MobileService, AIAlert
auth — LoginPage

테스트

npx tsc --noEmit 0 errors
npx eslint . --quiet 0 errors (84 warnings 기존)
pre-commit hook 통과
스테이징 배포 후 주요 10 화면 다크/라이트 모드 시각 회귀 확인
design-system.html 쇼케이스 정상 렌더 확인

남은 항목 (후속 PR)

JSX placeholder/텍스트 한글 35건 (쇼케이스 디자인 검토 필요한 영역)
text-*-500 일부 아이콘 색 (의도적 다크 설계, 필요 시 별도 조정)

## 변경 사항 **구조 정비 3단계 리팩토링 PR #C** — 디자인 시스템 SSOT 전영역 준수 (30파일). ### 공통 컴포넌트 치환 - raw `<button>` → `<Button variant>` (primary / destructive / secondary / ghost) - raw `<input>` → `<Input size>` (parent-inference, admin, ai-operations, auth) - raw `<select>` → `<Select size>` (detection) - 커스텀 탭 → `<TabBar>` + `<TabButton>` (ChinaFishing 모드/선박/통계 탭) - raw `<input type="checkbox">` → `<Checkbox>` (GearDetection FilterCheckGroup) ### StatBox 재설계 - `color: string` prop 제거 → `intent: BadgeIntent` + `INTENT_TEXT_CLASS` 매핑 - RealGearGroups, RealVesselAnalysis ### 하드코딩 Tailwind 색상 라이트/다크 쌍 변환 - `text-red-400` → `text-red-600 dark:text-red-400` - green / blue / cyan / orange / yellow / purple / amber 동일 패턴 - `text-*-500` 아이콘도 `text-*-600 dark:text-*-500` 로 라이트 모드 대응 - 상태 dot (bg-red-500 animate-pulse 등)은 의도적 시각 구분이므로 유지 ### 에러 메시지 통일 - `에러: {error}` 하드코딩 → `t('error.errorPrefix', { msg: error })` ### 영역별 파일 (30) - detection (6) — ChinaFishing, RealVesselAnalysis, RealGearGroups, GearDetection, GearIdentification, DarkVesselDetection - detection/components (4) — DarkDetailPanel, GearDetailPanel, VesselAnomalyPanel, VesselMiniMap - enforcement — EventList - surveillance (2) — LiveMapView, MapControl - admin (7) — PermissionsPanel, AccessControl, UserRoleAssignDialog, DataModelVerification, DataRetentionPolicy, PerformanceMonitoring, NoticeManagement - parent-inference (3) — ParentReview, ParentExclusion, LabelSession - statistics — ReportManagement - ai-operations (3) — AIAssistant, MLOpsPage, AIModelManagement - dashboard — Dashboard - field-ops (2) — MobileService, AIAlert - auth — LoginPage ## 관련 이슈 - 3단계 리팩토링 계획 중 PR #C. PR #A(iran+백엔드+카탈로그) / PR #B(i18n) 후속 ## 테스트 - [x] `npx tsc --noEmit` 0 errors - [x] `npx eslint . --quiet` 0 errors (84 warnings 기존) - [x] pre-commit hook 통과 - [ ] 스테이징 배포 후 주요 10 화면 다크/라이트 모드 시각 회귀 확인 - [ ] design-system.html 쇼케이스 정상 렌더 확인 ## 남은 항목 (후속 PR) - JSX placeholder/텍스트 한글 35건 (쇼케이스 디자인 검토 필요한 영역) - `text-*-500` 일부 아이콘 색 (의도적 다크 설계, 필요 시 별도 조정)

htlee added 2 commits 2026-04-16 17:09:57 +09:00

refactor(design-system): 하드코딩 색상 라이트/다크 대응 + raw button/input 공통 컴포넌트 치환 c1cc36b134

30개 파일 전 영역에 동일한 패턴으로 SSOT 준수:

**StatBox 재설계 (2파일)**:
- RealGearGroups, RealVesselAnalysis 의 `color: string` prop 제거
- `intent: BadgeIntent` prop + `INTENT_TEXT_CLASS` 매핑 도입

**raw `<button>` → Button 컴포넌트 (다수)**:
- `bg-blue-600 hover:bg-blue-500 text-on-vivid ...` → `<Button variant="primary">`
- `bg-orange-600 ...` / `bg-green-600 ...` → `<Button variant="primary">`
- `bg-red-600 ...` → `<Button variant="destructive">`
- 아이콘 전용 → `<Button variant="ghost" aria-label=".." icon={...} />`
- detection/enforcement/admin/parent-inference/statistics/ai-operations/auth 전영역

**raw `<input>` → Input 컴포넌트**:
- parent-inference (ParentReview, ParentExclusion, LabelSession)
- admin (PermissionsPanel, UserRoleAssignDialog)
- ai-operations (AIAssistant)
- auth (LoginPage)

**raw `<select>` → Select 컴포넌트**:
- detection (RealGearGroups, RealVesselAnalysis, ChinaFishing)

**커스텀 탭 → TabBar/TabButton (segmented/underline)**:
- ChinaFishing: 모드 탭 + 선박 탭 + 통계 탭

**raw `<input type="checkbox">` → Checkbox**:
- GearDetection FilterCheckGroup

**하드코딩 Tailwind 색상 라이트/다크 쌍 변환 (전영역)**:
- `text-red-400` → `text-red-600 dark:text-red-400`
- `text-green-400` → `text-green-600 dark:text-green-400`
- blue/cyan/orange/yellow/purple/amber 동일 패턴
- `text-*-500` 아이콘도 `text-*-600 dark:text-*-500` 로 라이트 모드 대응
- 상태 dot (bg-red-500 animate-pulse 등)은 의도적 시각 구분이므로 유지

**에러 메시지 한글 → t('error.errorPrefix') 통일**:
- detection/parent-inference/admin 에서 `에러: {error}` 패턴 → `t('error.errorPrefix', { msg: error })`

**결과**: tsc 0 errors / eslint 0 errors (84 warnings 기존)

docs: 릴리즈 노트 업데이트 (PR #C 디자인시스템 정비) 5731fa30a1

claude-bot 이 변경사항을 승인하였습니다. 2026-04-16 17:10:08 +09:00

claude-bot left a comment

멤버

MR 승인 (via /mr skill) — PR #C 디자인 시스템

htlee merged commit 38c97686fc into develop

2026-04-16 17:10:10 +09:00

htlee 삭제된 브랜치 refactor/design-system-ssot

2026-04-16 17:10:10 +09:00

htlee 커밋

2026-04-16 17:10:11 +09:00

에서 이 이슈 언급