Data Handling

생성, 추가, 편집, 삭제 등을 포함하는 데이터 처리에 대한 패턴을 다룹니다.

Create and Add Data

데이터 생성이나 추가는 각각 Create 나 Add 버튼을 통해 이루어집니다. 일반적으로 생성이나 추가는 dialog를 통한 form을 통합니다. 별도 페이지에서 form을 제공하거나 콘텍스트를 벗어나지 않으며 새로운 행을 추가하여 필드를 제공하기도 합니다.

Dialog with Stepper

Stepper를 사용한 form에서는 모든 required field 들에 사용자 입력이 만족되어야 다음 단계로 이동할 수 있는 Next 버튼이 활성화됩니다. 필드 입력에 대한 유효성 검사가 필요한 경우 사용자가 Next 버튼을 클릭할 때 검사를 수행합니다.

유효성 검사를 수행하여 사용자 입력에 문제가 있다고 확인되는 필드는 error state로 표시됩니다. 필드 아래에 validation message를 함께 노출하여 사용자가 맥락을 올바르게 이해하고 대처할 수 있도록 합니다.

필드 입력 길이 제한이 있는 필드에서의 입력이 제한 길이를 초과할 시에는 별도의 요구되는 액션 없이 필드가 바로 error state로 하이라이트 되어 보입니다. Next 버튼은 비활성화 처리됩니다.

가장 마지막 단계에서 생성 또는 추가를 위한 Create 또는 Add 버튼이 제공됩니다. 앞 단계에서의 Next 버튼과 마찬가지로, 모든 required field 들이 입력이 완료되면 액션 버튼이 활성화되며 필드 입력에 대한 유효성 검사가 필요한 경우 버튼을 클릭 시 검사를 수행합니다. 모든 입력이 유효한 경우 그 값을 기반으로 데이터를 생성 또는 추가합니다.

데이터가 성공적으로 생성 또는 추가된 경우에는 toast를 통해 피드백을 제공하는 것이 권장됩니다.

Edit Data

데이터 수정은 일반적으로 개별 항목의 Edit 버튼을 통해 이루어집니다. 데이터 생성이나 추가 케이스와 유사한 플로우를 가지며 dialog로 생성이나 추가가 된 경우에는 수정도 동일하게 dialog로 제공합니다. 별도 페이지에서 form을 제공하거나 콘텍스트를 벗어나지 않으며 새로운 행을 추가하여 필드를 제공하기도 합니다.

Dialog Using Stepper

수정 시에도 생성 및 추가와 동일한 조건이 적용되지만, 추가적으로 stepper의 전체 단계를 통틀어 입력 데이터에 변화가 있을 때 수정을 위한 Save 버튼이 활성화됩니다. 생성 및 추가 경우와 마찬가지로 필요한 경우 유효성 검사를 Save 버튼 클릭 시 수행합니다. 모든 입력이 유효한 경우 그 값을 기반으로 데이터를 수정합니다.