[SW_Table/UI] S/W 자산 관리 고도화 및 이력 추적 기능 구현 #10

New Issue

JooWangi · 2026-04-17T15:14:10+09:00

JooWangi commented

2026-04-17 15:14:10 +09:00

1. 개요

소프트웨어 자산의 라이프사이클을 체계적으로 관리하기 위해 상세 정보 모달을 개편하고, 갱신(업데이트) 이력을 추적할 수 있는 기능을 구현하였습니다. 또한, 사용자의 가독성을 위해 상태를 나타내는 자동 뱃지를 도입하고 날짜 입력 편의성을 개선하였습니다.

2. 작업 상세 내용

A. S/W 목록(Table) 개선

상태 자동 계산 시스템 도입:
- 구독 S/W: 만료일 기준 [사용중] / [만료] 자동 표시.
- 영구 S/W: 유지보수 대상 여부에 따라 [유효] / [없음] 표시.
UI 뱃지 적용: 테이블 좌측에 상태 뱃지를 추가하여 시각적 인지도를 높임.

B. 상세 정보 모달 개편 (`SWModal.ts`)

2단 분할 레이아웃 적용: 좌측(기본 정보), 우측(업데이트 타임라인)으로 UI 재설계.
날짜 입력 필드 개선:
- '구매일' 필드에 캘린더 피커(Calendar Picker) 적용.
- '구독 기간' 필드를 시작일과 종료일로 분리하여 각각 캘린더 적용.
- 직접 입력("yyyy-mm-dd") 형식도 동시 지원.

C. 계약 업데이트(갱신) 관리 기능

[업데이트 추가] 버튼 및 전용 서브 팝업 구현.
갱신 시 발생하는 비용, 기간 연장, 메모를 기록하여 타임라인(Log)에 누적.
업데이트 반영 시 메인 자산 정보의 구독 기한 및 누적 금액이 자동으로 최신화되도록 연동.

3. 관련 파일

src/views/SW_Table.ts: 테이블 상태 로직 및 뱃지 렌더링.
src/components/Modal/SWModal.ts: 모달 UI 및 날짜 처리, 업데이트 로직.
src/styles/modal.css: 분할 레이아웃 및 타임라인 스타일.

4. 확인 사항

엑셀 업로드/다운로드 시 기존 '구독일' 문자열 형식과의 호환성 유지 확인.
브라우저 테스트를 통한 캘린더 작동 및 테이블 상태 연동 확인 완료.

## 1. 개요 소프트웨어 자산의 라이프사이클을 체계적으로 관리하기 위해 상세 정보 모달을 개편하고, 갱신(업데이트) 이력을 추적할 수 있는 기능을 구현하였습니다. 또한, 사용자의 가독성을 위해 상태를 나타내는 자동 뱃지를 도입하고 날짜 입력 편의성을 개선하였습니다. ## 2. 작업 상세 내용 ### A. S/W 목록(Table) 개선 - **상태 자동 계산 시스템 도입**: - 구독 S/W: 만료일 기준 **[사용중] / [만료]** 자동 표시. - 영구 S/W: 유지보수 대상 여부에 따라 **[유효] / [없음]** 표시. - **UI 뱃지 적용**: 테이블 좌측에 상태 뱃지를 추가하여 시각적 인지도를 높임. ### B. 상세 정보 모달 개편 (`SWModal.ts`) - **2단 분할 레이아웃 적용**: 좌측(기본 정보), 우측(업데이트 타임라인)으로 UI 재설계. - **날짜 입력 필드 개선**: - '구매일' 필드에 캘린더 피커(Calendar Picker) 적용. - '구독 기간' 필드를 **시작일**과 **종료일**로 분리하여 각각 캘린더 적용. - 직접 입력("yyyy-mm-dd") 형식도 동시 지원. ### C. 계약 업데이트(갱신) 관리 기능 - **[업데이트 추가]** 버튼 및 전용 서브 팝업 구현. - 갱신 시 발생하는 비용, 기간 연장, 메모를 기록하여 타임라인(Log)에 누적. - 업데이트 반영 시 메인 자산 정보의 구독 기한 및 누적 금액이 자동으로 최신화되도록 연동. ## 3. 관련 파일 - `src/views/SW_Table.ts`: 테이블 상태 로직 및 뱃지 렌더링. - `src/components/Modal/SWModal.ts`: 모달 UI 및 날짜 처리, 업데이트 로직. - `src/styles/modal.css`: 분할 레이아웃 및 타임라인 스타일. ## 4. 확인 사항 - 엑셀 업로드/다운로드 시 기존 '구독일' 문자열 형식과의 호환성 유지 확인. - 브라우저 테스트를 통한 캘린더 작동 및 테이블 상태 연동 확인 완료.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#10

[SW_Table/UI] S/W 자산 관리 고도화 및 이력 추적 기능 구현 #10