[SW_Table/UI] S/W 자산 조회 필터 기능 추가 #5

New Issue

JooWangi · 2026-04-14T14:08:11+09:00

JooWangi commented

2026-04-14 14:08:11 +09:00

1. 개요 (Description)

사용자가 대량의 자산 목록을 더 쉽고 빠르게 조회하고 관리할 수 있도록 소프트웨어 자산 테이블 상단에 '조회 필터 바'를 추가하고, 전체적인 레이아웃을 독립된 카드 형식으로 개선하여 시각적 완성도와 사용성을 높였습니다.

2. 주요 변경 사항 (Changes)

2.1 실시간 조회 필터(Search Bar) 도입

통합 검색 기능: 제품명 및 담당 부서명을 키워드로 검색할 수 있는 입력란을 추가했습니다. 영문 검색 시 대소문자를 구분하지 않으며, 입력 즉시 목록이 필터링됩니다.
분류형 필터:
- 분야: [전체, 업무공통, 개발S/W, 디자인, 설계S/W] 중 선택하여 특정 분야의 자산만 조회가 가능합니다.
- 법인: [전체, 한맥, 삼안, 바론] 법인별로 필터링하여 소속 자산을 구분할 수 있습니다.
필터 초기화: '필터 초기화' 버튼을 통해 모든 검색 조건을 한 번에 지우고 전체 리스트로 복원하는 기능을 탑재했습니다.

2.2 테이블 레이아웃 카드화 (Card UI Separation)

독립된 카드 구조: 기존에 하나로 묶여 있던 조회 영역과 테이블 영역을 각각 독립된 카드 디자인(배경 및 테두리 분리)으로 개편했습니다.
시각적 가독성: 카드 사이의 간격을 넓히고 부모 컨테이너를 투명하게 처리하여, 각 영역이 명확하게 구분되도록 시각적 완성도를 높였습니다.
공통 적용: 해당 레이아웃 구조를 하드웨어(H/W) 리스트 테이블에도 동일하게 적용하여 시스템 전반의 UI 정체성을 통일했습니다.

2.3 UX 개선 사항

검색 결과 없음: 필터 조건에 맞는 데이터가 없을 경우 "검색 결과가 없습니다"라는 명확한 피드백 문구를 표시합니다.
실시간 반응형: 별도의 조회 버튼 클릭 없이 데이터가 즉시 갱신되어 빠른 피드백을 제공합니다.

3. 관련 파일 (Affected Files)

src/views/AssetTableView.ts: 필터 바 UI 주입 및 실시간 필터링 로직 구현
src/style.css: 조회 바 및 카드 형태 레이아웃 스타일 정의

## 1. 개요 (Description) 사용자가 대량의 자산 목록을 더 쉽고 빠르게 조회하고 관리할 수 있도록 소프트웨어 자산 테이블 상단에 '조회 필터 바'를 추가하고, 전체적인 레이아웃을 독립된 카드 형식으로 개선하여 시각적 완성도와 사용성을 높였습니다. ## 2. 주요 변경 사항 (Changes) ### 2.1 실시간 조회 필터(Search Bar) 도입 - **통합 검색 기능**: 제품명 및 담당 부서명을 키워드로 검색할 수 있는 입력란을 추가했습니다. 영문 검색 시 대소문자를 구분하지 않으며, 입력 즉시 목록이 필터링됩니다. - **분류형 필터**: - **분야**: [전체, 업무공통, 개발S/W, 디자인, 설계S/W] 중 선택하여 특정 분야의 자산만 조회가 가능합니다. - **법인**: [전체, 한맥, 삼안, 바론] 법인별로 필터링하여 소속 자산을 구분할 수 있습니다. - **필터 초기화**: '필터 초기화' 버튼을 통해 모든 검색 조건을 한 번에 지우고 전체 리스트로 복원하는 기능을 탑재했습니다. ### 2.2 테이블 레이아웃 카드화 (Card UI Separation) - **독립된 카드 구조**: 기존에 하나로 묶여 있던 조회 영역과 테이블 영역을 각각 독립된 카드 디자인(배경 및 테두리 분리)으로 개편했습니다. - **시각적 가독성**: 카드 사이의 간격을 넓히고 부모 컨테이너를 투명하게 처리하여, 각 영역이 명확하게 구분되도록 시각적 완성도를 높였습니다. - **공통 적용**: 해당 레이아웃 구조를 하드웨어(H/W) 리스트 테이블에도 동일하게 적용하여 시스템 전반의 UI 정체성을 통일했습니다. ### 2.3 UX 개선 사항 - **검색 결과 없음**: 필터 조건에 맞는 데이터가 없을 경우 "검색 결과가 없습니다"라는 명확한 피드백 문구를 표시합니다. - **실시간 반응형**: 별도의 조회 버튼 클릭 없이 데이터가 즉시 갱신되어 빠른 피드백을 제공합니다. ## 3. 관련 파일 (Affected Files) - `src/views/AssetTableView.ts`: 필터 바 UI 주입 및 실시간 필터링 로직 구현 - `src/style.css`: 조회 바 및 카드 형태 레이아웃 스타일 정의

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#5