기본 컴포넌트
기본 컴포넌트는 데이터에 대한 목적에 따라 다음과 같이 5가지로 분류한다. 기본적인 컴포넌트는 사용자가 혼락스럽지 않도록 기존에 사용해왔던 형태를 그대로 따르도록 한다.
데이터 입력(Data Entry)
데이터 출력(Data Display)
데이터 탐색(Navigation)
데이터 검색(Search)
데이터 정보(Information)
[01] 데이터 입력
정보를 입력할 때 사용 하는 컴포넌트이다. 사용자가 입력 또는 선택하는 정보의 종류에 따라 아래와 같이 총 6개의 컴포넌트를 사용 할 수 있다.
No | Component | Description |
|---|---|---|
1 | Text Field |  텍스트 정보를 입력 받을 경우 사용 |
2 | Checkbox |  여러 요소의 중복 선택이 필요한 경우 사용 |
3 | Radio |  여러 요소 중 1개만 선택해야 하는 경우 사용 |
4 | Select |  창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용 |
5 | Buttons |  사용자의 결정에 대한 정보를 입력 받을 경우 사용 |
6 | Switch |  특정 상태를 ON/OFF 할 경우 사용 |
7 | DatePicker |  날짜 정보를 선택하여 입력해야 하는 경우 사용 |
8 | TimePicker |  시간 정보를 선택하여 입력해야 하는 경우 사용 |
9 | Transfer |  두 개의 데이터 그룹 간의 정보 전송이 필요한 경우 사용 |
10 | Rate |  평가 정보를 표시해야 하는 경우 사용 |
NEEDCHECK Text https://ant.design/components/input/
명칭 및 종류 확인 필요: Text, TextArea, TextEditor
NEED CHECK Select https://ant.design/components/select/
종류 확인 필요: Select, SelectModal, SelectTree
NEED CHECK DatePicker https://ant.design/components/date-picker/
종류 확인 필요 : Date BirthDate DateRange DateTime DateTimeRange
https://ant.design/components/time-picker/
https://ant.design/components/transfer/
https://ant.design/components/rate/
1. 텍스트 필드
사용자가 문자와 숫자를 입력할 수 있는 가장 기본적인 입력 컨트롤이다. 사용자 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.
텍스트 필드의 기본 구조는 다음과 같다.
1 | 필드 라벨 | 입력 필드에 입력 할 정보가 무엇인지 제목 표시 |
2 | 입력 필드 | 라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보를 실시간으로 출력 |
3 | 플레이스 홀더 텍스트 | 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐 |
4 | 입력 텍스트 | 사용자가 입력 필드에 작성한 텍스트 |
5 | 커서(Cursor) | 사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시 |
6 | 클리어 버튼 | 필드에 입력한 정보를 한번에 삭제 |
7 | 도움말 텍스트 | 사용자가 정보 입력 중 필드 하단에 노출되는 도움말 문구 |
8 | 툴팁 | 물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버시 출력되는 안내 문구 |
9 | 아이콘 |
2. 체크박스
3. 라디오 버튼
4. 셀렉트 박스
드롭다운 메뉴와 드롭다운 리스트 2가지 타입으로 구분된다.
STATUS TABLE
Normal | Hover | Activated | Focused | Selected | Disabled |
|---|---|---|---|---|---|
5. 버튼
STATUS TABLE
Inactive | Focus | Hover | Active | Loading | Disabled |
|---|---|---|---|---|---|
6. 토글 버튼
[02] 데이터 출력
[03] 데이터 탐색
[04] 데이터 검색
Card :
List
Gallery
Carousel
Tab
Menu
[05] 데이터 정보
사용자에게 정보 전달을 해야하는 경우 사용되는 컴포넌트이다. 사용자의 액션 전/후 상황에 구체적인 정보를 전달하여 사용자가 혼란스럽지 않도록 가이드 해주는 목적을 가진다.
Guide Text : 정보를 텍스트 형태로 상세히 전달
Tool Tips :
Toast :
Alert
Dialog
Coach Mark