드래그앤드롭의 상태 표시
Drop zone은 데이터가 어디로 들어갈 수 있는지 보여 주어야 합니다. 허용 여부, 처리 중 상태와 드롭 결과를 구분하고 드래그 종료 뒤 강조 표시를 제거합니다.
상태
| 상태 | 의미 |
|---|---|
| Valid | 현재 페이로드의 미디어 유형을 받음 |
| Invalid | 받는 유형이 아님. 예를 들어 Gotham 객체만 받는 곳에 text/html을 끌어옴 |
| Loading | 비동기 판단이나 드롭한 데이터의 보강을 기다림 |
허용 또는 loading 상태에서도 포인터가 영역 위에 있는 hover 상태를 별도로 표시합니다.
일반 HTML DataTransfer의 실제 데이터는 drop에서 동기적으로 읽습니다. dragover 중에는 유형을 보고 수용 가능성을 표시하며, 데이터 보강이 필요한 경우 드롭 후 읽은 값으로 요청하고 처리 상태를 갱신합니다.
작은 영역
탭 막대 또는 입력 필드 같은 작은 영역에 적용합니다.
.loading-small {
background: rgba(143, 153, 168, 0.5);
border: 1px dashed #F6F7F9;
}
.loading-small-drag-hover {
border: 1px solid #F6F7F9;
}
.not-valid-small {
background: rgba(18, 21, 24, 0.6);
}
.valid-small {
background: rgba(24, 74, 144, 0.5);
border: 2px dashed #8ABBFF;
}
.valid-small-drag-hover {
border: 2px solid #8ABBFF;
}
중간 영역
객체 카드처럼 중간 크기의 drop zone에 적용합니다.
.loading-medium {
background: rgba(143, 153, 168, 0.5);
border: 1px dashed #F6F7F9;
}
.loading-medium-drag-hover {
border: 1px solid #F6F7F9;
}
.not-valid-medium {
background: rgba(18, 21, 24, 0.6);
}
.valid-medium {
background: rgba(24, 74, 144, 0.2);
border: 2px dashed #8ABBFF;
}
.valid-medium-drag-hover {
border: 2px solid #8ABBFF;
}
큰 영역
지도 전체 같은 큰 drop zone은 inner와 outer 영역을 나누어 표시합니다.
.loading-inner-large {
background: rgba(143, 153, 168, 0.25);
border: 3px dashed #F6F8F9;
border-radius: 5px;
color: #F6F8F9;
}
.loading-inner-large-drag-hover {
border: 3px solid #F6F8F9;
}
.loading-outer-large {
background: rgba(143, 153, 168, 0.25);
border-radius: 5px;
}
.not-valid-large {
background: rgba(18, 21, 24, 0.6);
color: rgba(246, 248, 249, 0.6);
}
.valid-inner-large {
background: rgba(24, 74, 144, 0.25);
border: 3px dashed #8ABBFF;
border-radius: 5px;
color: #F6F7F9;
}
.valid-inner-large-drag-hover {
border: 3px solid #8ABBFF;
}
.valid-outer-large {
background: rgba(24, 74, 144, 0.25);
border-radius: 5px;
}
결과 toast
Blueprint의 toast 같은 알림 컴포넌트로 결과를 전달할 수 있습니다.
| 상황 | 표시 조건과 수명 |
|---|---|
| 드롭 후 loading | 데이터 보강 등 추가 작업이 끝날 때까지 표시 |
| 보강 후 유효한 drop | 앱이 실제로 데이터를 사용한 뒤 성공 표시. 750 ms 후 사라짐 |
| 보강 후 무효한 drop | 처음에는 받을 수 있는 유형이었으나 실제로 사용할 수 없음. 사용자가 닫을 때까지 유지 |
| 한 개만 받는데 여러 ID를 drop | 첫 항목만 사용했음을 알림. 사용자가 닫을 때까지 유지 |
750 ms는 성공 알림의 권장 표시 시간이며 보강 요청 timeout이 아닙니다. 실패나 일부 데이터만 사용한 결과를 성공 알림으로 바꾸지 않습니다.
사용자 선택이 필요한 경우
받은 항목을 처리할 방법이나 대상이 여러 개이면 다음 행동을 설명하는 대화상자를 사용합니다. 처리할 선택지를 보여 주고 선택 뒤에 해당 동작을 수행합니다.
유형 확인과 강조 상태의 코드 연결은 기본 통합점 구현, 비동기 보강은 Gotham/Foundry 보강을 따릅니다.