Dropdown

Dropdown은 특정 옵션을 선택하거나 페이지 내 정보를 필터링하거나 정렬하는 데 사용 됩니다. 선택 가능한 옵션을 표출하는 Dropdown Menu와 각 구성요소인 Item으로 구성 되어져 있습니다. Dropdown Menu를 열 수 있음을 나타내는 Icon과 함께 사용됩니다.

Anatomy

• 1. Dropdown Container
• 2. Dropdown Field
• 3. Arrow Icon
• 4. Dropdown Button
• 5. Dropdown Menu
• 6. Menu Item
• 7. Selected Item Field

Extra Type

Dropdown은 구성요소인 Menu Item을 사용하여 페이지의 콘텐츠를 필터링하거나 정렬을 하기 위해서 사용됩니다. 해당 컴포넌트는 Dropdown Button의 유형에 따라 Primary Type (Label Dropdown), Secondary Type (Avatar and Badge Dropdown) 그리고 Tertiary Type (Non-Outlined Dropdown)으로 3가지로 분류합니다.

Components

Dropdown은 스타일, 쓰임새 그리고 채워지는 Field의 형태에 따라서 Primary Type (Label Dropdown), Secondary Type (Avatar and Badge Dropdown), Tertiary Type (Non-Outlined Dropdown) 그리고 Extra Type으로 분류되어 사용됩니다.

Primary Type

Primary Type은 가장 흔하게 사용되는 타입으로, Field의 값이 Text로만 구성되어진 Label Dropdown과 Icon과 Text가 함께 Field값으로 사용되는 Label with Icon Dropdown으로 구성되어집니다.

Secondary Type

Secondary Type은 Field의 값에 Text가 아닌 별도의 Component가 사용되는 경우이며, Avatar와 Badge가 주로 함께 사용 됩니다.

Tertiary Type

Tertiary Type은 Dropdown의 Outline이 표출이 되지 않는 상태로 Clicked 상태가 되었을때 Secondary Type의 Dropdown 형태가 사용되는 타입입니다. Table Dropdown과 List Dropdown으로 2가지로 분류가 되며, 각각의 Field에 사용되는 Component가 다르게 사용됩니다.

Extra Type

Extra Type은 컴포넌트가 사용되는 기능적 혹은 형태적 목적에 따라서 변경되어 사용되는 Dropdown의 Usecase로 Icon Dropdown, Inspection Selector, Fleet Selector가 있습니다.

Varients

State

Dropdown Button의 State는 8가지 (Disabled, Default, Hover, Clicked, Select Disabled, Selected, Select Hover, Select Clicked)로 구성이되며, Menu Item의 경우 4가지 (Default, Hover, Selected, Select Hover)로 구성됩니다.

Size

사이즈는 Height를 기준으로 Large, Medium, Small을 사용합니다. Width의 경우는 유동적입니다.

Menu Item

Dropdown Item의 Field를 구성하는 Components는 다양하게 사용이 되며 주요 요소는 Text, Avatar, Badge가 있으며 부가적으로 함께 사용되는 요소에는 Toggle, Icon이 있습니다. 이외에도 Dropdown Button의 높이와 동일한 Search Input이 사용됩니다.

Table of Dropdown Component

Table of Properties - Dropdown Button

Table of Properties - Menu Item

Color

Dropdown Component의 색상은 State에 따라서 다르게 가져갑니다. Field에 채워진 Contents의 색상은 상태에 따라서 동일하게 유지 하는 것으로 하며, Outline과 Container의 색상이 상태별로 다르게 사용 됩니다.

Dropdown Button Color

Menu Item Color

Spacing

Dropdown의 Menu Item의 Contents의 Text의 길이가 2줄 이상으로 길어지는 경우 Text를 제외한 다른 요소 (Icon, Avatar 등) 함께 사용되는 경우에 다음과 같이 사용됩니다. 더불어 Single 혹은 Multi-Selection의 경우에 따라서도 다르게 사용됩니다.

Contents

Dropdown의 Menu Item은 최대 4.5개를 표출하는 것을 지향하며, Menu Item이 5개 이상이 포함될 경우 Scrollbar를 사용하여 4.5개를 표출하여 보여지는 것이 특징입니다.

Table / List Empty State (Placeholder)

앞서 설명된 일반적으로 사용 되는 Dropdown의 Placeholder 방식과 다르게 Tertiary Type의 Table 및 List의 Placeholder는 문구의 형식을 가져가는 것이 아닌 '-'로 사용됩니다. 여러 데이터들이 한 곳에서 표기 되는 Table 및 List의 방식에서 데이터가 비어 있는 구간과 아닌 구간을 구분하기 위함입니다.

Type of Field

Dropdown Field에 속하는 값은 기본적으로 Text를 포함하는 Label Dropdown으로 구성되어 있으나, 다른 컴포넌트 요소가 사용되기도 합니다. 대표적으로는 Badge, Avatar가 있으며, 경우에 따라 다양한 형태의 Component가 함께 사용 될 수 있습니다.

Menu Item List

Dropdown Menu에서 Item이 표출되는 갯수는 최대 4개를 기본으로 제공하며, Item List가 4개를 넘어가는 경우에는 Over-Flow를 적용하여 스크롤이 되도록 합니다. 단 예외적으로 4개의 기본 표출이 사용성의 측면에서 충분치 않다고 판단되는 경우에 Menu Height의 최댓값을 상황에 따라 변경 할 수 있습니다.

Single-Selection

Dropdown의 Menu Item중 단일 선택만 가능한 형태이며, Dropdown에서 가장 많이 사용 되어지는 형태입니다. 단일 입력 선택 값에서 해당 항목이 필수값일 경우 별도의 Close (Clear All) Btn을 표출 하지 않으며, 해당 항목의 입력 값이 선택적 옵션일 경우 Close Btn을 함께 제공하는 방식입니다.

Multi-Selection

Dropdown의 Menu Item을 단일 혹은 다수의 항목을 선택 가능하며 선택된 Item이 표출 되는 방식은 Badge를 활용하여 추가되는 Item 항목의 갯수를 표출해주는 방식과 선택된 Item 항목의 Contents 값을 모두 표출 해주는 방식으로 두가지가 있습니다.

Minimum Width

Width의 경우 일반적으로 들어가는 영역에 따라서 Flexible하게 구성이 되어 지며 Minimum Width는 120px를 최소값으로 가집니다.

Flexible Width

Dropdown의 경우 Flexible하게 사용되어지며 Menu Item에 표출되어지는 Item의 Contents를 적절히 고려하여 Width를 설정 하는 것이 특징입니다. 특정 Parent 요소의 Container 내에 사용될 경우 해당 영역에서 정의된 Padding을 지키는 것을 원칙으로 합니다.

Text Overflow

Dropdown Button의 Field 내의 text의 값이 넘치는 경우 horizontal의 영역 지워지는 text값을 '...'으로 표현하여 축약되는 것이 특징입니다. Dropdown의 Menu Item의 경우에는 컨텐츠를 축약하지 않고 줄바꿈하여 모두 보여주는 것이 특징입니다.

Usage & Placement

Dropdown의 경우 Form의 입력 형식에서 Label과 함께 많이 사용이 되며, Text Input과 함께 주로 사용되어 집니다. 해당 경우의 형식에서 필요에 따라서 여러 요소들이 복합적으로 사용되어 사용자에게 정보를 전달 합니다.

Label

Dropdown이 포함된 입력 Form의 형태에서 Dropdown 항목에 대한 Label이 함께 사용됩니다. Subtitle 3 (Inter, Medium, 14px)가 함께 사용 되며 해당 Required, Error, 그리고 부가적인 정보가 필요한 Information의 형태로 사용 가능 합니다.

Label을 포함한 Dropdown 및 Input의 조합은 여러개가 함께 사용되는 경우가 많습니다. Label과 Dropdown 사이의 간격은 8px, 각 요소 사이의 간격을 가로 배열시 24px, 세로 배열시 32px 두고 배열하여 사용됩니다.

Label: Information

해당 입력 값에 대한 부가적인 정보를 사용자에게 제공하고자 할때 사용됩니다.

Label: Required

해당 입력 값이 필수 값인 경우를 표기하기 위해서 사용 됩니다. Label과 4px 간격을 두고 표기하는 것이 특징이며 필수 값에는 '*'을 표기하고, 필수가 아닌 선택값일 경우에는 별도의 표기 없이 Label만 사용하는 것이 특징입니다.

'*'의 값은 Body 2 (Inter, Regular, 14px)를 사용하며 Text의 사이즈는 보통 Label의 값과 동일하게 가져가는 것이 특징입니다.

Label: Error (Alert)

해당 입력 값에 대한 에러(alert)를 띄우는 경우로, 입력값에 대한 필수 요건에 대한 설명을 표출해 주는 것이 특징입니다. 별도의 Action (e.g. Confirm Button)후에 표출되는 것이 특징이며 Dropdown Button의 Outline의 색상과 함께 Text Alert을 함께 표출 해주는 것이 특징입니다.

Error 상태의 Dropdown Button Outlined Color: Red500을 사용하며, Medium 사이즈의 Alert를 사용합니다.

Label Size

해당 패턴은 Dropdown 컴포넌트의 높이와 정보 밀도에 맞춰 Label의 크기를 일관되게 정의하기 위해 사용됩니다. 입력 필드의 크기가 달라질 경우 Label 역시 동일한 비율 체계 안에서 조정되어야 하며, 이를 통해 컴포넌트 전체의 균형감과 가독성을 유지할 수 있습니다.

Medium 사이즈 Dropdown에는 Subtitle 3 (Inter, Medium, 14px)를 사용하고, Large 사이즈 Dropdown에는 Subtitle 1 (Inter, Medium, 16px)를 적용합니다. 이 규칙은 Label과 Input Field 사이의 시각적 위계를 명확하게 만들고, 서로 다른 크기의 Form 요소가 함께 배치되더라도 일관된 리듬을 유지하도록 돕습니다.

Loading Status

Menu Placement

Dropdown의 Menu의 표출 위치는 사용자가 Action을 수행하기 시작한 지점의 해당 화면상에 컴포넌트의 위치에 따라 결정이 되며, 가장 최 상단으로 Positioning 하는 것을 원칙으로 하되, 화면상에 디자인되는 최소 Padding인 32px를 기준으로 넘지 않는 선에서 Positioning 하는 것을 원칙으로 합니다.

Menu Items

Dropdown의 Menu내의 아이템의 갯수의 Boundary에 따라서 Height가 Flexible 하게 다르게 적용되는 구간과 Height가 Fixed되어 사용되는 지점 두가지로 분류 되어 집니다. 해당 지점의 기준이 되는 Item의 값은 4개로, 4보다 작거나 같은 경우, 4보다 많은 Item을 Menu 상에 표출 하게 됩니다.

Item List Contents Arrangement

Dropdown Menu Item List의 표출되어지는 콘텐츠의 순서는 기본적으로 A-Z로 나열이 되며, 특정 Sequence를 지닌 Item의 조합의 경우 해당 Sequence에 따라 나열 되는 것이 특징입니다.