<aside> 📍 How to use Fields

• 정의된 구조를 적절한 상황에 사용해야 하며, 정의되지 않은 새로운 구조의 사용은 지양합니다.
• 컴포넌트는 디바이스에 따라 100%로 적용하되, min-width와 min-height를 준수하여 사용합니다. </aside>

Fields

Fields는 컴포넌트의 용도에 따라 크게 Text field와 Text area 그리고 Select field, Send field로 분류합니다. Text field와 Text area는 비슷하지만 다르게 사용합니다. Text field는 기본적인 한 줄형 텍스트를 입력하고, Text area는 한 줄 이상의 문장형 텍스트를 입력합니다.

Text Field

Text field는 Layout 타입과 Icon 타입으로 나뉩니다. Layout 타입은 모바일과 PC에 따라 두 가지 레이아웃으로 분류합니다. Icon 타입은 명확한 피드백 및 액션이 필요할 경우 아이콘을 결합하여 사용합니다. 경우에 따라 레이블 우측으로 Badge를 넣어 사용하기도 합니다. (Badge 관련 내용은 Badges 참조)

State

기본 상태와 입력 중, 입력 완료 등의 사용자의 행동에 따라 변경되는 필드의 상태를 각각 다른 구조로 정의합니다.

Text Area

문장형 텍스트를 입력하기 위한 컴포넌트입니다. 텍스트양이 넘칠 경우 자동 줄 바꿈이 되며, 고정된 높이값 안에서 스크롤을 생성합니다. 경우에 따라 레이블을 붙여 사용하기도 합니다.

Select Field

필드에 중첩된 선택 구성 요소 중 특정 항목을 선택해 기본값을 변경하여 사용하는 컴포넌트입니다. 선택 가능한 옵션값을 제공하여 사용자 맞춤형 컨텐츠를 제공할 때 사용합니다. 레이블 없이 사용을 기본값으로 하며, 경우에 따라 레이블을 붙여 사용하기도 합니다.

State

기본 상태와 선택, 선택 완료 등의 사용자의 행동에 따라 변경되는 필드의 상태를 각각 다른 구조로 정의합니다. Click 시 페이지 내 드롭다운 리스트 노출은 PC에 사용합니다.

• Mobile OS별 시스템 드롭다운 메뉴 사용
  • iOS : Pull-down button
  • AOS : Confirmation dialog

Send Field

서비스 내에 등록되는 텍스트를 입력할 때 사용합니다. 용도에 따라 아이콘을 추가하여 다양한 기능을 추가한 컴포넌트로도 구성 가능합니다.

State

기본 상태와 입력 중, 입력 완료 등의 사용자의 행동에 따라 변경되는 필드의 상태를 각각 다른 구조로 정의합니다.

목차