드롭다운

드롭다운

• 사용자 인터페이스(UI)에서 선택할 수 있는 옵션들을 리스트 형태로 보여주는 요소. 일반적으로 버튼이나 입력 필드 등을 클릭하면 숨겨진 메뉴가 아래로 펼쳐지며, 사용자는 그 메뉴에서 원하는 항목을 선택할 수 있음. 드롭다운은 공간을 절약하고, 여러 옵션을 깔끔하게 정리하여 사용자에게 제공하는 데 유용. 주로 설정, 메뉴, 필터링 등 다양한 상황에 사용된다.

import React, { useState } from 'react';

const DropdownExample = () => {
    const [isOpen, setIsOpen] = useState(false);

    const toggleDropdown = () => {
        setIsOpen(!isOpen);
    };

    return (
        <div className="relative inline-block">
            <button
                onClick={toggleDropdown}
                className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
            >
                드롭다운 메뉴
            </button>

            {isOpen && (
                <div className="absolute left-0 mt-2 w-48 bg-white border border-gray-300 rounded shadow-lg">
                    <ul className="py-1">
                        <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">옵션 1</li>
                        <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">옵션 2</li>
                        <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">옵션 3</li>
                    </ul>
                </div>
            )}
        </div>
    );
};

export default DropdownExample;

• useState를 사용해 드롭다운의 열림 상태를 관리.
• 이벤트 핸들러 toggleDropdown 함수는 버튼 클릭 시 드롭다운 상태를 토글함.
• isOpen 이 true 일 때만 드롭다운 메뉴가 렌더링됨.

• 스타일 예시

메뉴 버튼 스타일
inline-flex: 인라인 플렉스 컨테이너로 설정
w-full: 가로 폭을 100%로 설정
justify-center: 수평 중앙 정렬
gap-x-1.5: 아이콘과 텍스트 사이의 수평 간격
rounded-md: 중간 정도의 둥근 모서리
bg-white: 배경 색상을 흰색으로 설정
px-3 py-2: 수평 및 수직 패딩
text-sm: 작은 텍스트 크기
font-semibold: 중간 두께의 글꼴
text-gray-900: 텍스트 색상을 진회색으로 설정
shadow-sm: 작은 그림자 효과
ring-1 ring-inset ring-gray-300: 테두리 효과
hover:bg-gray-50: 호버 시 배경 색상 변경

드롭다운 아이템 스타일
inline-flex: 인라인 플렉스 컨테이너로 설정
w-full: 가로 폭을 100%로 설정
justify-center: 수평 중앙 정렬
gap-x-1.5: 아이콘과 텍스트 사이의 수평 간격
rounded-md: 중간 정도의 둥근 모서리
bg-white: 배경 색상을 흰색으로 설정
px-3 py-2: 수평 및 수직 패딩
text-sm: 작은 텍스트 크기
font-semibold: 중간 두께의 글꼴
text-gray-900: 텍스트 색상을 진회색으로 설정
shadow-sm: 작은 그림자 효과
ring-1 ring-inset ring-gray-300: 테두리 효과
hover:bg-gray-50: 호버 시 배경 색상 변경

드롭다운 개별 메뉴 항목 스타일
block: 블록 요소로 설정
px-4 py-2: 수평 및 수직 패딩
text-sm: 작은 텍스트 크기
text-gray-700: 텍스트 색상을 회색으로 설정
data-[focus]:bg-gray-100: 포커스 시 배경 색상 변경
data-[focus]:text-gray-900: 포커스 시 텍스트 색상 변경