요약에서 필요한 자원까지

클라우드 플랫폼 개요 화면에서 담당한 바형 자원 현황·필터링과 섹션 배치 인터랙션을 재구성했습니다. 상태를 고르고, 관련 자원을 찾고, 섹션을 옮기는 흐름을 직접 조작할 수 있습니다.

전체 레이아웃은 기획에서 정의했고, 담당 범위는 자원 현황 바·필터링 및 섹션 그리드 배치·상하 이동의 상세 동작과 구현입니다. 이 페이지는 가상 데이터로 새로 만든 축약 데모이며, 실제 제품의 API·상태 판정 기준이나 적용 완료를 나타내지 않습니다.

이동 손잡이를 다른 섹션으로 끌어 놓으세요. 오른쪽 아래 손잡이로 폭을 조절하거나 반폭·전체 폭 버튼을 사용할 수 있습니다. 좁은 화면에서는 한 열로 표시합니다.

자원 현황

1 / 3

요약 수량·비율은 항상 전체 기준입니다. 상태 카드나 막대를 눌러 필터를 선택하세요.

자원 유형 4종

2 / 3

전체 보기 · 99개 / 전체 99개

3 / 3

자원 유형 목록에서 항목을 선택하면 상태별 수량을 확인할 수 있습니다.

배치만 이 브라우저에 저장됩니다. 필터와 선택한 유형은 새로고침하면 초기화됩니다.

필터를 바꿔도 요약의 수량과 비율은 전체 기준을 유지합니다. 아래 목록만 선택 수량 / 전체 수량으로 바꿔, 무엇을 기준으로 읽는 숫자인지 구분했습니다. 0건 상태도 선택할 수 있고, 필터 해제는 전체 보기에서만 합니다.

상태 아래의 자원 유형을 누르면 해당 상태로 필터를 바꾸고 목록에서 같은 유형을 잠깐 강조합니다. 화면 밖에 있으면 위치를 안내하고, 연속 선택해도 강조는 하나만 남습니다. 이 데모에서는 목록을 누르면 가상의 유형 상세를 보여줍니다.

비율 막대는 구성비를 보여주지만 작은 구간은 누르기 어렵습니다. 같은 필터를 상태 카드에서도 선택하게 했습니다. 수량을 색만으로 구분하지 않고 상태 이름과 숫자를 함께 표시합니다.

원래 작업에서는 그리드 배치와 상하 이동을 비교 구현했습니다. 공개 데모는 그리드를 순서 이동과 반폭·전체 폭 조절로 축약했습니다. 두 방식의 상태는 별도로 보관하며, 이 브라우저에서만 복원합니다. 제품 적용이나 계정별 저장을 의미하지 않습니다.