ITAM/docs/issues/issue_sw_modal_refactor.md

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

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. 확인 사항

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