Dropdown

드롭다운 컴포넌트는 숨겨진 메뉴나 옵션 목록을 제공하는 UI 요소입니다. 사용자가 아이콘, 버튼 또는 아바타를 클릭하면 해당 컨텍스트 메뉴가 표시됩니다. 많은 수의 작업이나 옵션을 제한된 공간에 표시해야 할 때 유용합니다.

인터랙티브 예제

다양한 속성을 직접 조절하여 드롭다운 컴포넌트를 테스트해보세요.

triggerTypeselect

트리거 타입을 선택합니다.

triggerIconNameselect

아이콘 트리거의 아이콘을 선택합니다.

triggerButtonTextstring

버튼 트리거의 텍스트를 입력합니다.

triggerAvatarSrcstring

아바타 트리거의 이미지 URL을 입력합니다.

alignselect

드롭다운 정렬을 선택합니다.

headerTypeselect

헤더 타입을 선택합니다.

headerTitlestring

헤더 제목을 입력합니다.

headerAvatarSrcstring

헤더 아바타 이미지 URL을 입력합니다.

headerSubtitlestring

헤더 부제목을 입력합니다.

showIconItemsboolean

아이콘이 있는 항목을 표시할지 선택합니다.

showShortcutItemsboolean

단축키가 있는 항목을 표시할지 선택합니다.

showDisabledItemboolean

비활성화된 항목을 표시할지 선택합니다.

showDangerItemboolean

위험한 항목을 표시할지 선택합니다.

기본 사용법

import { Dropdown } from '@ui-admin/components/dropdown';

const MyComponent = () => {
  return (
    <Dropdown
      trigger={{ type: 'icon' }}
      groups={[
        {
          items: [
            {
              id: 'item1',
              text: '메뉴 항목',
              onClick: () => console.log('메뉴 항목 클릭됨'),
            },
          ],
        },
      ]}
    />
  );
};

트리거 유형

드롭다운은 세 가지 트리거 유형을 지원합니다: icon, avatar, button.

아이콘 트리거

아바타 트리거

버튼 트리거

헤더 표시

드롭다운은 두 가지 유형의 헤더를 지원합니다: avatar 또는 text.

아바타 헤더

텍스트 헤더

정렬 방향

드롭다운 메뉴는 왼쪽 또는 오른쪽으로 정렬할 수 있습니다.

왼쪽 정렬 (기본값)

오른쪽 정렬

드롭다운 항목

아이콘 항목

단축키 표시

비활성화된 항목

위험 항목

위험 항목은 빨간색으로 표시되며 일반적으로 삭제나 로그아웃 같은 주의가 필요한 작업에 사용됩니다.

그룹 구분

여러 그룹을 사용하면 항목 사이에 구분선이 표시됩니다.

Props

Prop	Type	Default	Description
trigger	'AvatarTrigger \| TextTrigger \| ButtonTrigger \| IconTrigger \| CustomTrigger'	-	드롭다운을 열기 위한 트리거 타입
align	'left' \| 'right'	'left'	드롭다운 메뉴의 정렬 방향
header	DropdownHeaderType	-	드롭다운 메뉴 상단에 표시할 헤더 정보
groups	DropdownGroup[]	[]	드롭다운 메뉴 항목 그룹 배열
className	string	-	드롭다운 컨테이너에 추가할 CSS 클래스
closeOnClickItem	boolean	true	항목 클릭 시 드롭다운 닫기 여부
closeOnClickOutside	boolean	true	드롭다운 외부 클릭 시 닫기 여부
opened	boolean	false	드롭다운이 초기에 열린 상태로 표기됨

Trigger Types

IconTrigger

Prop	Type	Default	Description
type	'icon'	-	트리거 타입 (필수)
icon	IconName	-	표시할 아이콘 이름 (선택적)

AvatarTrigger

Prop	Type	Default	Description
type	'avatar'	-	트리거 타입 (필수)
avatar	string	-	표시할 아바타 이미지 경로

ButtonTrigger

Prop	Type	Default	Description
type	'button'	-	트리거 타입 (필수)
text	string	-	버튼에 표시할 텍스트

TextTrigger

Prop	Type	Default	Description
type	'text'	-	트리거 타입 (필수)
title	string	-	표시할 텍스트

CustomTrigger

Prop	Type	Default	Description
type	'custom'	-	트리거 타입 (필수)
content	React.ReactNode	-	커스텀 트리거 컨텐츠

DropdownHeaderType

드롭다운은 두 가지 헤더 타입을 지원합니다: AvatarHeader 또는 TextHeader.

AvatarHeader

Prop	Type	Default	Description
type	'avatar'	-	헤더 유형
avatar	string	-	표시할 아바타 이미지 경로
title	string	-	헤더에 표시할 제목
subtitle	string	-	헤더에 표시할 부제목

TextHeader

Prop	Type	Default	Description
type	'text'	-	헤더 유형
title	string	-	헤더에 표시할 제목

DropdownGroup

Prop	Type	Default	Description
items	DropdownItemType[]	-	그룹에 포함된 항목 배열

DropdownItemType

Prop	Type	Default	Description
id	string	-	항목의 고유 식별자
text	string	-	항목에 표시할 텍스트
icon	IconName	-	항목 왼쪽에 표시할 아이콘 이름
shortcut	string	-	항목 오른쪽에 표시할 키보드 단축키
onClick	() => void	-	항목 클릭 시 실행할 콜백 함수
disabled	boolean	false	항목 비활성화 여부
type	'default' \| 'danger'	'default'	항목 스타일 유형, 'danger'는 빨간색으로 표시됨

인터랙티브 예제​

기본 사용법​

트리거 유형​

아이콘 트리거​

아바타 트리거​

버튼 트리거​

헤더 표시​

아바타 헤더​

텍스트 헤더​

정렬 방향​

왼쪽 정렬 (기본값)​

오른쪽 정렬​

드롭다운 항목​

아이콘 항목​

단축키 표시​

비활성화된 항목​

위험 항목​

그룹 구분​

Props​

Dropdown Props​

Trigger Types​

IconTrigger​

AvatarTrigger​

ButtonTrigger​

TextTrigger​

CustomTrigger​

DropdownHeaderType​

AvatarHeader​

TextHeader​

DropdownGroup​

DropdownItemType​