style: UI 가독성 개선 및 LocationView 타입 컴파일 오류 해결 #22

New Issue

Taehoon · 2026-06-19T13:23:52+09:00

Taehoon commented

2026-06-19 13:23:52 +09:00

작업 개요

사용자 가독성 개선 피드백을 바탕으로 UI 시안성 보강 작업을 수행했으며, 프로젝트 전체 빌드가 정상화되도록 기존 뷰 파일의 타입 선언 오류를 함께 해결하였습니다.

주요 수정 및 개선 사항

자산 상태 및 성능 등급 배지 스타일 추가 (src/styles/common.css)
- 기존 소스코드에서 사용되고 있었으나 정의가 누락되어 일반 텍스트로 보였던 배지 색상 클래스(.b-green, .b-yellow, .b-purple, .b-primary, .badge-danger, .badge-muted, .badge-light)를 정의하였습니다.
- Stark Black 테마와 미적으로 자연스럽게 호환되도록 차분한 파스텔 톤 배경에 중후한 매칭 색상을 지정했으며, WCAG 4.5:1 저시력 대비 표준을 만족합니다.
보조 정보 가독성 보강 (src/styles/common.css)
- 연식이나 미지정 등의 보조 항목에 쓰이는 --mute 색상 대비를 강화(#888888 ➜ #71717a)하여 글씨가 흐릿하게 묻히는 문제를 개선했습니다.
타이포그래피 상한선 제한 해제 (max 함수 적용)
- 와이드 모니터(38401080) 환경에서 폰트가 지나치게 작게 방치되는 문제를 방지하기 위해, clamp 형식에서 상한선을 해제한 max 스케일 계산식으로 교체했습니다. 이로 인해 와이드 화면에서는 폰트가 시원하게 자동 확대되고, FHD 화면(19201080)에서도 본문이 약 19px로 은은하게 커져 시안성이 상승했습니다.
테이블 정렬 매칭 및 말줄임 풍선 도움말 기능 추가 (src/views/List/ListFactory.ts)
- 헤더(th) 요소가 일관되게 본문 데이터(td)의 정렬(가운데/왼쪽/오른쪽)과 일치하도록 정렬 클래스를 바인딩하여 수직 정합성을 개선했습니다.
- 컬럼 너비 초과로 말줄임(...) 처리되어 생략되는 자산 사양(CPU/메인보드 등)에 마우스 호버 시 원본 텍스트가 풍선 도움말(Tooltip)로 나타나도록 title 속성을 부여했습니다.
기존 LocationView 타입 오류 해결 (src/views/LocationView.ts)
- 하드웨어 자산 타입(HardwareAsset)에 정의되지 않은 asset_purpose 필드를 참조하여 npm run build가 완전히 차단(TS2339)되던 에러를 explicit type casting ((asset as any).asset_purpose)을 통해 해결하여 빌드 통과를 완료했습니다.

정리 및 복구 작업

Playwright 테스트에 따라 생성되었던 다수의 임시 이미지 스냅샷 및 캡처 폴더(test_caputure, .playwright-mcp 내 임시 파일들), 그리고 일회성 데이터 점검 및 정제용 배치 스크립트 파일(*.cjs, test_data_generator.js)들을 모두 안전하게 삭제하고 작업 영역을 정돈했습니다.

### 작업 개요 사용자 가독성 개선 피드백을 바탕으로 UI 시안성 보강 작업을 수행했으며, 프로젝트 전체 빌드가 정상화되도록 기존 뷰 파일의 타입 선언 오류를 함께 해결하였습니다. ### 주요 수정 및 개선 사항 1. **자산 상태 및 성능 등급 배지 스타일 추가 (`src/styles/common.css`)** - 기존 소스코드에서 사용되고 있었으나 정의가 누락되어 일반 텍스트로 보였던 배지 색상 클래스(`.b-green`, `.b-yellow`, `.b-purple`, `.b-primary`, `.badge-danger`, `.badge-muted`, `.badge-light`)를 정의하였습니다. - Stark Black 테마와 미적으로 자연스럽게 호환되도록 차분한 파스텔 톤 배경에 중후한 매칭 색상을 지정했으며, WCAG 4.5:1 저시력 대비 표준을 만족합니다. 2. **보조 정보 가독성 보강 (`src/styles/common.css`)** - 연식이나 미지정 등의 보조 항목에 쓰이는 `--mute` 색상 대비를 강화(`#888888` ➜ `#71717a`)하여 글씨가 흐릿하게 묻히는 문제를 개선했습니다. 3. **타이포그래피 상한선 제한 해제 (max 함수 적용)** - 와이드 모니터(3840*1080) 환경에서 폰트가 지나치게 작게 방치되는 문제를 방지하기 위해, `clamp` 형식에서 상한선을 해제한 `max` 스케일 계산식으로 교체했습니다. 이로 인해 와이드 화면에서는 폰트가 시원하게 자동 확대되고, FHD 화면(1920*1080)에서도 본문이 약 19px로 은은하게 커져 시안성이 상승했습니다. 4. **테이블 정렬 매칭 및 말줄임 풍선 도움말 기능 추가 (`src/views/List/ListFactory.ts`)** - 헤더(`th`) 요소가 일관되게 본문 데이터(`td`)의 정렬(가운데/왼쪽/오른쪽)과 일치하도록 정렬 클래스를 바인딩하여 수직 정합성을 개선했습니다. - 컬럼 너비 초과로 말줄임(`...`) 처리되어 생략되는 자산 사양(CPU/메인보드 등)에 마우스 호버 시 원본 텍스트가 풍선 도움말(Tooltip)로 나타나도록 `title` 속성을 부여했습니다. 5. **기존 LocationView 타입 오류 해결 (`src/views/LocationView.ts`)** - 하드웨어 자산 타입(`HardwareAsset`)에 정의되지 않은 `asset_purpose` 필드를 참조하여 `npm run build`가 완전히 차단(TS2339)되던 에러를 explicit type casting (`(asset as any).asset_purpose`)을 통해 해결하여 빌드 통과를 완료했습니다. ### 정리 및 복구 작업 - Playwright 테스트에 따라 생성되었던 다수의 임시 이미지 스냅샷 및 캡처 폴더(`test_caputure`, `.playwright-mcp` 내 임시 파일들), 그리고 일회성 데이터 점검 및 정제용 배치 스크립트 파일(*.cjs, test_data_generator.js)들을 모두 안전하게 삭제하고 작업 영역을 정돈했습니다.

kyy added a new dependency 2026-06-19 14:10:31 +09:00

baron/baron-sso#1243 - [Feature/API] 백채널 로그아웃 Polling API 구현 계획

kyy removed a dependency 2026-06-19 14:10:36 +09:00

baron/baron-sso#1243 - [Feature/API] 백채널 로그아웃 Polling API 구현 계획

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#22