Versions Compared

Version Old Version 12 New Version 13
Changes made by

DXP Angela

DXP Angela

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

...

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

  • 데이터 입력(Data Entry)

  • 데이터 출력(Data Display)

  • 데이터 탐색(Navigation)

  • 데이터 검색(Search)

  • 데이터 정보(Information)

...

[01] 데이터 입력

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

No

Component

Description

1

Text Field

텍스트 정보를 입력 받을 경우 사용

2

Text Area

Image RemovedImage Added

멀티 라인 텍스트 인풋 박스로 긴 텍스트 입력이 필요 할 경우 사용

3

Text Editor

Image RemovedImage Added

텍스트, 이미지, 영상, 표, 목록, 라인, 에디팅 편집 기능이 필요한 경우 사용

4

Checkbox

여러 요소의 중복 선택이 필요한 경우 사용

5

Radio

여러 요소 중 1개만 선택해야 하는 경우 사용

6

Select

창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용

7

Buttons

사용자의 결정에 대한 정보를 입력 받을 경우 사용

8

Switch

특정 상태를 ON/OFF 할 경우 사용

9

DatePicker

날짜 정보를 선택하여 입력해야 하는 경우 사용

10

TimePicker

시간 정보를 선택하여 입력해야 하는 경우 사용

11

Transfer

두 개의 데이터 그룹 간의 정보 전송이 필요한 경우 사용

12

Rate

평가 정보를 표시해야 하는 경우 사용

...

Status
colourRed
titleneedcheck
Text https://ant.design/components/input/

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

...

Status
colourRed
titleNeed check
Select https://ant.design/components/select/

종류 확인 필요: Select, SelectModal, SelectTree

...

Status
colourRed
titleNeed check
DatePicker https://ant.design/components/date-picker/

종류 확인 필요 : Date BirthDate DateRange DateTime DateTimeRange

...

https://ant.design/components/rate/

...

[02] 데이터 출력

[03] 데이터 탐색

[04] 데이터 검색

  • Card :

  • List

  • Gallery

  • Carousel

  • Tab

  • Menu

Image Removed

[05] 데이터 정보

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

...

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

...

Tool Tips :

...

Toast :

...

Alert

...

Dialog

...


...

[03] 데이터 탐색

Image Added