[SW_Table/UI/Schema] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장 #3

New Issue

JooWangi · 2026-04-14T11:42:37+09:00

JooWangi commented

2026-04-14 11:42:37 +09:00

개요 (Description)
기존 S/W 자산 관리 기능의 사용성을 높이기 위해 대시보드 UI를 개선하고, 새로운 속성(분야, 부서)을 중심으로 테이블 레이아웃 및 엑셀 연동 스키마를 고도화했습니다.

주요 변경 사항 (Changes)

1. S/W 자산 스키마 구조 개편 및 기능 추가

속성 추가: SoftwareAsset 모델에 분야, 부서 필드를 새롭게 추가했습니다.
모달(UI) 업데이트: 자산 추가/수정 팝업 시 분야 항목을 4가지 고정값(업무공통, 개발S/W, 디자인, 설계S/W)의 Select Box로 선택할 수 있도록 구현하고, 부서 입력란을 추가했습니다.
데이터베이스(Excel) 연동: 다운로드용 엑셀 템플릿과 전체 일괄 엑셀 저장, 그리고 다중 시트 업로드 시 추가된 파라미터가 모두 올바르게 맵핑되도록 excelHandler.ts 로직을 업데이트했습니다.
상태 관리/테스트: dummyDataGenerator.ts에 임시 데이터 생성 알고리즘을 확장해 프로토타입 상태에서도 화면 테스트가 가능하도록 구성했습니다.

2. S/W 테이블 (AssetTableView) UI 개선

레이아웃 재배치: 테이블 헤더를 요구 사항에 맞춘 No. / 분야 / 법인 / 부서 / 제품명 / 구매일 / 구독일 / 수량 / 사용가능 / 관리 체계로 전면 교체했습니다. (구독일은 '구독SW' 탭에서만 동적 표출됨)
정렬 일원화: S/W 관련 모든 테이블의 속성명(헤더)과 데이터가 중앙(Center)으로 정렬되도록 CSS 클래스(.sw-table)를 반영했습니다.
관리 버튼 시각화 강화: 혼용되던 아이콘과 텍스트 버튼 대신 수정 및 사용자 관리 버튼을 완전한 Icon 버튼 형태로 통일했습니다. (크기 18px 상향, 사용자 관리의 메인 시그니처 초록색 포인트 적용)

3. S/W 대시보드 카드 디자인 고도화

통계 컴포넌트 일관성: 구독 SW 및 유지보수 만료 예정 카드 영역을 하드웨어 노후화 자산 카드와 동일한 디자인 체계로 업데이트했습니다. (만료 수량 퍼센티지 및 원형 테두리 프로그레스 UI 도입)

관련 파일 (Affected Files)

src/components/Modal/SWModal.ts
src/views/DashboardView.ts
src/views/AssetTableView.ts
src/excelHandler.ts
src/dummyDataGenerator.ts
index.html
src/style.css

**개요 (Description)** 기존 S/W 자산 관리 기능의 사용성을 높이기 위해 대시보드 UI를 개선하고, 새로운 속성(분야, 부서)을 중심으로 테이블 레이아웃 및 엑셀 연동 스키마를 고도화했습니다. **주요 변경 사항 (Changes)** **1. S/W 자산 스키마 구조 개편 및 기능 추가** - **속성 추가**: `SoftwareAsset` 모델에 `분야`, `부서` 필드를 새롭게 추가했습니다. - **모달(UI) 업데이트**: 자산 추가/수정 팝업 시 `분야` 항목을 4가지 고정값(업무공통, 개발S/W, 디자인, 설계S/W)의 Select Box로 선택할 수 있도록 구현하고, `부서` 입력란을 추가했습니다. - **데이터베이스(Excel) 연동**: 다운로드용 엑셀 템플릿과 전체 일괄 엑셀 저장, 그리고 다중 시트 업로드 시 추가된 파라미터가 모두 올바르게 맵핑되도록 `excelHandler.ts` 로직을 업데이트했습니다. - **상태 관리/테스트**: `dummyDataGenerator.ts`에 임시 데이터 생성 알고리즘을 확장해 프로토타입 상태에서도 화면 테스트가 가능하도록 구성했습니다. **2. S/W 테이블 (AssetTableView) UI 개선** - **레이아웃 재배치**: 테이블 헤더를 요구 사항에 맞춘 `No. / 분야 / 법인 / 부서 / 제품명 / 구매일 / 구독일 / 수량 / 사용가능 / 관리` 체계로 전면 교체했습니다. (구독일은 '구독SW' 탭에서만 동적 표출됨) - **정렬 일원화**: S/W 관련 모든 테이블의 속성명(헤더)과 데이터가 중앙(Center)으로 정렬되도록 CSS 클래스(`.sw-table`)를 반영했습니다. - **관리 버튼 시각화 강화**: 혼용되던 아이콘과 텍스트 버튼 대신 수정 및 사용자 관리 버튼을 완전한 Icon 버튼 형태로 통일했습니다. (크기 18px 상향, 사용자 관리의 메인 시그니처 초록색 포인트 적용) **3. S/W 대시보드 카드 디자인 고도화** - **통계 컴포넌트 일관성**: 구독 SW 및 유지보수 만료 예정 카드 영역을 하드웨어 노후화 자산 카드와 동일한 디자인 체계로 업데이트했습니다. (만료 수량 퍼센티지 및 원형 테두리 프로그레스 UI 도입) **관련 파일 (Affected Files)** - `src/components/Modal/SWModal.ts` - `src/views/DashboardView.ts` - `src/views/AssetTableView.ts` - `src/excelHandler.ts` - `src/dummyDataGenerator.ts` - `index.html` - `src/style.css`

JooWangi closed this issue

2026-04-14 11:42:58 +09:00

JooWangi reopened this issue

2026-04-14 11:43:01 +09:00

JooWangi changed title from ~~[Feature/UI] S/W Dashboard Improvement & Asset Schema Expansion~~ to [Feature/UI] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장

2026-04-14 11:44:21 +09:00

JooWangi changed title from ~~[Feature/UI] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장~~ to [SW_Table/UI] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장

2026-04-14 13:15:57 +09:00

JooWangi changed title from ~~[SW_Table/UI] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장~~ to [SW_Table/UI, Schema] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장

2026-04-14 13:16:14 +09:00

JooWangi changed title from ~~[SW_Table/UI, Schema] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장~~ to [SW_Table/UI/Schema] S/W 대시보드 개선 및 S/W 자산 스키마(분야/부서) 확장

2026-04-14 13:16:29 +09:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#3