보조 버튼은 그 행동의 대상 옆에 두세요
문서 제목을 누르면 상세 내용을 열고, 공유 버튼을 누르면 해당 문서의 공유 안내를 표시하는 목록입니다. 같은 두 문서와 두 공유 버튼의 위치를 비교합니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
FOUNDATIONS
검색과 목록을 구성하고 로딩·갱신·빈 결과·조회 실패를 구분합니다.
최대 폭·열 전환·스크롤·하단 CTA 배치와 레이어·Elevation 규칙을 함께 확인하세요.
검색 대상과 적용한 필터를 함께 보여줍니다. 긴 라벨은 줄바꿈하고 좁은 화면에서는 행동을 다음 줄로 보냅니다.
문서 플랫폼을 확인하는 중…
검색어·선택한 후보·목록 필터를 구분합니다. 예제는 로컬 목록을 검색하며 loadOptions의 취소 신호를 확인합니다.
문서 플랫폼을 확인하는 중…
ListSection과 ListRow로 범용 목록을 만듭니다. 행 이동과 공유 버튼을 분리하고 Switch·Checkbox의 선택은 소비자가 관리합니다.
문서 플랫폼을 확인하는 중…
행 이동과 공유 버튼은 독립된 행동으로 연결하고, 알림·선택 값은 소비자 상태에서 관리합니다.
문서 플랫폼을 확인하는 중…
이름·종목 코드·가격·변동률의 위계를 구분합니다. 숫자는 단위를 포함하고 열의 정렬 기준을 유지합니다.
문서 플랫폼을 확인하는 중…
조회 상태와 표시할 행을 분리합니다. 아래 코드는 기본 조회 결과와 로딩·빈 결과·실패를 재현하는 로컬 예제입니다.
문서 플랫폼을 확인하는 중…
Image에 비율과 소비자 바깥 너비를 지정해 썸네일을 구성합니다. 정보를 전달하는 이미지는 대체 텍스트를 제공하고 실패해도 주변 설명을 유지합니다.
문서 플랫폼을 확인하는 중…
목록의 leading 영역에서 이미지 바깥 폭과 비율을 정합니다. 의미를 전달하는 이미지에는 대체 텍스트를 제공합니다.
문서 플랫폼을 확인하는 중…
자산 목록을 처음 조회하거나 같은 조건으로 다시 가져오는 상황입니다.
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
선택한 플랫폼의 실제 실행 예제입니다.
문서 플랫폼을 확인하는 중…
문서 제목을 누르면 상세 내용을 열고, 공유 버튼을 누르면 해당 문서의 공유 안내를 표시하는 목록입니다. 같은 두 문서와 두 공유 버튼의 위치를 비교합니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
이미 조회한 프로젝트 문서를 같은 조건으로 갱신하는 화면입니다. 같은 두 문서와 선택 상태를 두고 로딩 중 기존 콘텐츠의 처리만 바꿉니다.
적용 조건 · 현재 조건의 조회 결과가 이미 있는 동일 조건 갱신에 적용합니다. 시작·완료·실패 버튼으로 상태를 직접 재현합니다.
주의 · 최초 조회에는 이전 결과가 없으므로 로딩 화면을 사용합니다. 검색 조건이 달라졌다면 이전 결과를 새 조건의 결과처럼 보여주지 마세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
queryKey와 resultKey가 같은 갱신에서는 이전 결과와 선택을 유지합니다. 완료·실패 버튼은 서버 응답을 모의 적용합니다.
문서 플랫폼을 확인하는 중…
‘완료된 문서’ 필터의 빈 결과와 문서 조회 실패를 각 전후 화면에 함께 배치했습니다. 두 상황의 데이터와 조건은 같고 안내와 복구 행동만 다릅니다.
적용 조건 · 요청이 성공했지만 결과가 0개인 상태와 요청 자체가 실패한 상태를 구분할 때 적용합니다. 두 복구 버튼은 독립적으로 실행됩니다.
주의 · 조회 실패를 빈 결과로 단정하지 마세요. 예제의 재시도는 외부 요청 없이 로컬 성공 결과를 표시합니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
문서 플랫폼을 확인하는 중…
조회 성공 후 빈 결과에는 필터 초기화, 조회 실패에는 재시도를 연결합니다. 두 동작은 서로 독립된 로컬 시뮬레이션입니다.
문서 플랫폼을 확인하는 중…