기본 컴포넌트

기본 컴포넌트는 데이터에 대한 목적에 따라 다음과 같이 5가지로 분류한다. 기본적인 컴포넌트는 사용자가 혼락스럽지 않도록 기존에 사용해왔던 형태를 그대로 따르도록 한다.

• 데이터 입력(Data Entry)

• 데이터 출력(Data Display)

• 데이터 탐색(Navigation)

• 데이터 검색(Search)

• 데이터 정보(Information)

[01] 데이터 입력

정보를 입력할 때 사용 하는 컴포넌트이다. 사용자가 입력 또는 선택하는 정보의 종류에 따라 아래와 같이 총 12개의 컴포넌트를 사용 할 수 있다.

No	Component	Description
1	Text Field	텍스트 정보를 입력 받을 경우 사용
2	Text Area	멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용
3	Text Editor	텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용
4	Checkbox	여러 요소의 중복 선택이 필요한 경우 사용
5	Radio	여러 요소 중 1개만 선택해야 하는 경우 사용
6	Select	창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용
7	Buttons	사용자의 결정에 대한 정보를 입력 받을 경우 사용
8	Switch	특정 상태를 ON/OFF 할 경우 사용
9	DatePicker	날짜 정보를 선택하여 입력해야 하는 경우 사용
10	TimePicker	시간 정보를 선택하여 입력해야 하는 경우 사용
11	Transfer	두 개의 데이터 그룹 간의 정보 전송이 필요한 경우 사용
12	Rate	평가 정보를 표시해야 하는 경우 사용

※ Free Icon 출처: https://thenounproject.com

NEEDCHECK Text https://ant.design/components/input/

명칭 확인 필요 ~ 그냥 Text만 입력하는 컴포넌트와 헷갈릴 수 있음으로 Text Field로 변경

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/

[02] 데이터 출력

[03] 데이터 탐색

[04] 데이터 검색

• Card :

• List

• Gallery

• Carousel

• Tab

• Menu

[05] 데이터 정보

사용자에게 정보 전달을 해야하는 경우 사용되는 컴포넌트이다. 사용자의 액션 전/후 상황에 구체적인 정보를 전달하여 사용자가 혼란스럽지 않도록 가이드 해주는 목적을 가진다.

• Guide Text : 정보를 텍스트 형태로 상세히 전달

• Tool Tips :

• Toast :

• Alert

• Dialog

• Coach Mark