feat: UI 카탈로그 시스템 + 시맨틱 토큰 + Badge 재구축 #17

htlee · 2026-04-08T10:55:23+09:00

htlee 코멘트됨,

2026-04-08 10:55:23 +09:00

소유자

변경 사항

백엔드

V017 migration: auth_role.color_hex VARCHAR(7) + 빌트인 5개 역할 시드
Role 엔티티/DTO/Service/Controller에 colorHex 필드 추가

프론트 공통 인프라

cn() 유틸 (clsx + tailwind-merge, 시맨틱 토큰 classGroup 등록)
theme.css @layer utilities 직접 정의 (Tailwind v4 복합 이름 매핑 실패 대응)
Badge CVA 재구축 (8 intent × 4 size, rem 기반, !important 제거)
DataTable width 의미 변경 (고정 → 선호 최소)
dateFormat sv-SE 로케일 (KST YYYY-MM-DD HH:mm:ss)
ColorPicker 컴포넌트 신규

분류 카탈로그 19종

shared/constants/에 violation/alert/event/enforcement 등 백엔드 enum/code_master 기반 SSOT 구축. 표준 API (getXxxIntent/Label/Classes).

40+ 페이지 마이그레이션

Badge className → intent/size prop
컬러풀 액션 버튼 → text-on-vivid
ROLE_COLORS 4곳 중복 제거
Dashboard RiskBar 단위 버그, padding 복구 등

테스트

TypeScript 타입 체크 통과
ESLint 통과
백엔드 V017 migration 검증 (배포 시)
프론트 시각 회귀 확인

## 변경 사항 ### 백엔드 - V017 migration: `auth_role.color_hex VARCHAR(7)` + 빌트인 5개 역할 시드 - Role 엔티티/DTO/Service/Controller에 colorHex 필드 추가 ### 프론트 공통 인프라 - `cn()` 유틸 (clsx + tailwind-merge, 시맨틱 토큰 classGroup 등록) - `theme.css @layer utilities` 직접 정의 (Tailwind v4 복합 이름 매핑 실패 대응) - Badge CVA 재구축 (8 intent × 4 size, rem 기반, !important 제거) - DataTable width 의미 변경 (고정 → 선호 최소) - dateFormat sv-SE 로케일 (KST `YYYY-MM-DD HH:mm:ss`) - ColorPicker 컴포넌트 신규 ### 분류 카탈로그 19종 `shared/constants/`에 violation/alert/event/enforcement 등 백엔드 enum/code_master 기반 SSOT 구축. 표준 API (`getXxxIntent/Label/Classes`). ### 40+ 페이지 마이그레이션 - Badge className → intent/size prop - 컬러풀 액션 버튼 → `text-on-vivid` - ROLE_COLORS 4곳 중복 제거 - Dashboard RiskBar 단위 버그, padding 복구 등 ## 관련 - 누락 원인 분석 & 디자인 시스템 재정돈 계획은 별도 feature 브랜치로 진행 예정 ## 테스트 - [x] TypeScript 타입 체크 통과 - [x] ESLint 통과 - [ ] 백엔드 V017 migration 검증 (배포 시) - [ ] 프론트 시각 회귀 확인

htlee added 4 commits 2026-04-08 10:55:23 +09:00

feat(backend): Role.colorHex 추가 + V017 migration 20d6743c17

- auth_role.color_hex VARCHAR(7) 컬럼 추가 (Flyway V017)
- 빌트인 5개 역할 기본 색상 시드 (ADMIN/OPERATOR/ANALYST/FIELD/VIEWER)
- Role 엔티티 + RoleCreate/UpdateRequest DTO + RoleManagementService
- PermTreeController 응답에 colorHex 필드 포함

feat(frontend): UI 공통 인프라 + 19개 분류 카탈로그 구축 5812d9dea3

- cn() 유틸 신규 (clsx + tailwind-merge, 시맨틱 토큰 classGroup 등록)
- theme.css @layer utilities로 직접 정의 (Tailwind v4 복합 이름 매핑 실패 대응):
  text-heading/label/hint/on-vivid/on-bright, bg-surface-raised/overlay
- badgeVariants (CVA) 재구축: 8 intent x 4 size, rem 기반, !important 제거
- Badge 컴포넌트가 cn(badgeVariants, className)로 override 허용
- DataTable width 의미 변경: 고정 -> 선호 최소 너비 (minWidth), truncate + title 툴팁
- dateFormat.ts sv-SE 로케일로 YYYY-MM-DD HH:mm:ss 일관된 KST 출력
- ColorPicker 신규 (팔레트 + native color + hex 입력)
- shared/constants/ 19개 카탈로그: violation/alert/event/enforcement/patrol/
  engine/userRole/device/parentResolution/modelDeployment/gearGroup/darkVessel/
  httpStatus/userAccount/loginResult/permission/vesselAnalysis/connection/trainingZone
  + kpiUiMap. 백엔드 enum/code_master 기반 SSOT
- i18n ko/en common.json에 카테고리 섹션 추가
- adminApi.fetchRoles()가 updateRoleColorCache 자동 호출
- 공통 컴포넌트 (ExcelExport/NotificationBanner/Pagination/SaveButton) 시맨틱 토큰 적용

feat(frontend): 40+ 페이지 Badge/시맨틱 토큰 마이그레이션 a07c745cbc

- 모든 feature 페이지의 Badge className 패턴을 intent/size prop으로 변환
- 컬러풀 액션 버튼 (bg-*-500/600/700 + text-heading) -> text-on-vivid
- 검색/필터 버튼 배경 bg-blue-400 + text-on-bright (밝은 배경 위 검정)
- ROLE_COLORS 4곳 중복 제거 (MainLayout/UserRoleAssignDialog/
  PermissionsPanel/AccessControl) -> getRoleBadgeStyle 공통 호출
- PermissionsPanel 역할 생성/수정에 ColorPicker 통합
- MainLayout: PagePagination + scroll page state 제거 (데이터 페이지네이션 혼동)
- Dashboard RiskBar 단위 버그 수정 (0~100 정수 처리)
- ReportManagement, TransferDetection p-5 space-y-4 padding 복구
- EnforcementHistory 그리드 minmax 적용으로 컬럼 잘림 해소
- timeline 시간 formatDateTime 적용 (ISO T 구분자 처리)
- 각 feature 페이지가 공통 카탈로그 API (getXxxIntent/Label/Classes) 사용

docs: 릴리즈 노트 갱신 (UI 카탈로그 시스템) a07b7d9ba5

htlee referenced this pull request

2026-04-08 13:31:59 +09:00

feat(frontend): 디자인 시스템 SSOT 확립 + 전체 페이지 마이그레이션 + a11y 전수 처리 #18

htlee closed this pull request

2026-04-08 13:40:21 +09:00

htlee 코멘트됨,

2026-04-08 13:40:21 +09:00

소유자

동일 커밋이 MR #18 (feature/design-system-showcase → develop)에 포함되어 머지됨. 이 MR은 중복이므로 닫음.