이슈: "Select element must have an accessible name" — 스크린 리더가 용도를
인지할 수 없어 WCAG 2.1 Level A 위반.
수정:
- Select 공통 컴포넌트 타입을 union으로 강제
- aria-label | aria-labelledby | title 중 하나는 TypeScript 컴파일 타임에 필수
- 누락 시 tsc 단계에서 즉시 실패 → 회귀 방지
- 네이티브 <select> 5곳 aria-label 추가:
- admin/SystemConfig: 대분류 필터
- detection/RealVesselAnalysis: 해역 필터
- detection/RealGearGroups: 그룹 유형 필터
- detection/ChinaFishing: 관심영역 선택
- detection/GearIdentification: SelectField에 label prop 추가
- 쇼케이스 FormSection Select 샘플에 aria-label 추가
이제 모든 Select 사용처가 접근 이름을 가지며,
향후 신규 Select 사용 시 tsc가 누락을 차단함.
Phase A: 쇼케이스의 카탈로그/variant 정보를 중앙 상수로 끌어올림
- shared/constants/catalogRegistry.ts 신규
- 19+ 카탈로그의 id/showcaseId/titleKo/titleEn/description/source/items를
단일 레지스트리로 통합 관리
- 새 카탈로그 추가 = 레지스트리에 1줄 추가로 쇼케이스 자동 노출
- CATALOG_REGISTRY + getCatalogById()
- lib/theme/variantMeta.ts 신규
- BADGE_INTENT_META: 8 intent의 titleKo/titleEn/description
- BUTTON_VARIANT_META: 5 variant의 titleKo/titleEn/description
- BADGE_INTENT_ORDER/SIZE_ORDER, BUTTON_VARIANT_ORDER/SIZE_ORDER
- 쇼케이스 섹션 리팩토링 — 하드코딩 제거
- CatalogSection: CATALOG_REGISTRY 자동 열거 (CATALOGS 배열 삭제)
- BadgeSection: BADGE_INTENT_META에서 의미 가이드 + titleKo 참조
- ButtonSection: BUTTON_VARIANT_META에서 의미 가이드 + titleKo 참조
효과:
- 카탈로그의 라벨/색상/intent 변경 시 쇼케이스와 실 페이지 동시 반영
- Badge/Button의 variant 의미가 variantMeta 한 곳에서 관리됨
- 쇼케이스 섹션에 분산돼 있던 하드코딩 제거 (INTENT_USAGE, VARIANT_USAGE 등)
다음 단계: 실 페이지를 PageContainer/PageHeader/Button/Input으로 마이그레이션
- badgeVariants 다크 팔레트를 classes 기반 4종 카탈로그와 동일 패턴으로 통일
- 이전: dark:bg-X-400 dark:text-slate-900 dark:border-X-600 (솔리드)
- 이후: dark:bg-X-500/20 dark:text-X-400 dark:border-X-500/30 (translucent)
- 라이트 팔레트는 그대로 유지 (이미 통일되어 있음)
- CatalogSection: 각 카탈로그 항목을 [code / 한글 배지 / 영문 배지] 3열 행으로 렌더
- 한글/영문 라벨 두 버전을 한눈에 비교 검토 가능
- 추적 ID Trk는 행 전체를 감싸서 호버/복사 동작
변경:
- badgeVariants 8 intent 모두 라이트/다크 팔레트 분리
- 다크: 밝은 솔리드 배경(-400) + slate-900 글자 + 강한 보더(-600)
- 라이트: 파스텔 배경(-100) + 진한 글자(-900) + 소프트 보더(-300)
- base에서 text-on-bright 제거 (intent별로 관리)
- classes 기반 카탈로그 4종에 dark: 변형 추가로 라이트 모드 대응:
- eventStatuses: bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-400
- enforcementResults: 동일 패턴 (red/purple/yellow/green)
- patrolStatuses: border 포함 (7 상태)
- enforcementActions: classes 필드 신규 추가 (기존에 없어서 fallback grey로 떨어져
라이트 모드에서 글자 안 보이던 원인)
- CatalogSection fallback classes도 dark: 변형 추가 (안전장치)
- enforcementActions에 getEnforcementActionClasses() 헬퍼 신규
빌드 검증:
- tsc ✅, vite build ✅
- CSS 확인: .dark\:bg-red-400:is(.dark *) 컴파일 정상
