✨Feat: 드롭다운 컴포넌트 구현 및 드롭다운 아이템 상수 옵션 추가

src/components/common/Dropdown.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react';
+import Down from '@/assets/icons/dropdown.svg';
+
+interface DropdownProps {
+  items: string[];
+  selected: string;
+  onSelect: (value: string) => void;
+  placeholder?: string;
+  variant: 'form' | 'filter';
+}
+
+export default function Dropdown({
+  items,
+  selected,
+  onSelect,
+  placeholder = '선택',
+  variant,
+}: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+  };
+
+  const handleSelect = (item: string) => {
+    onSelect(item);
+    closeDropdown();
+  };
+
+  // 외부 클릭 시 닫힘
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!dropdownRef.current?.contains(e.target as Node)) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        type="button"
+        onClick={toggleDropdown}
+        className={`flex cursor-pointer items-center justify-between rounded-md border border-gray-30 bg-white ${variant === 'form' ? 'w-full px-5 py-4 text-base' : 'bg-gray-10px-3 rounded-[5px]px-3 h-[30px] w-[105px] gap-[6px] px-2.5 text-sm'}`}
+      >
+        <span className={selected ? 'text-black' : 'text-gray-40'}>
+          {selected || placeholder}
+        </span>
+        <img
+          src={Down}
+          alt="arrow down"
+          className={`${isOpen ? '' : 'rotate-180'} ${variant === 'form' ? 'h-4 w-4' : 'h-[10px] w-[10px]'}`}
+        />
+      </button>
+
+      {isOpen && (
+        <ul
+          className={`absolute right-0 left-0 mt-2 flex cursor-pointer flex-col rounded-md border border-gray-20 bg-white text-black ${variant === 'form' ? 'h-[230px] w-full overflow-y-auto' : 'h-[160px] w-[105px]'}`}
+        >
+          {items.map((item) => (
+            <li
+              key={item}
+              onClick={() => handleSelect(item)}
+              className={`flex w-full cursor-pointer justify-center border-b border-gray-20 text-sm leading-[22px] font-regular text-black last:border-b-0 ${variant === 'form' ? 'py-3' : 'py-2'}`}
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

src/constants/dropdownOptions.ts

@@ -0,0 +1,45 @@
+export const ADDRESS_OPTIONS = [
+  '서울시 종로구',
+  '서울시 중구',
+  '서울시 용산구',
+  '서울시 성동구',
+  '서울시 광진구',
+  '서울시 동대문구',
+  '서울시 중랑구',
+  '서울시 성북구',
+  '서울시 강북구',
+  '서울시 도봉구',
+  '서울시 노원구',
+  '서울시 은평구',
+  '서울시 서대문구',
+  '서울시 마포구',
+  '서울시 양천구',
+  '서울시 강서구',
+  '서울시 구로구',
+  '서울시 금천구',
+  '서울시 영등포구',
+  '서울시 동작구',
+  '서울시 관악구',
+  '서울시 서초구',
+  '서울시 강남구',
+  '서울시 송파구',
+  '서울시 강동구',
+];
+
+export const CATEGORY_OPTIONS = [
+  '한식',
+  '중식',
+  '일식',
+  '양식',
+  '분식',
+  '카페',
+  '편의점',
+  '기타',
+];
+
+export const SORT_OPTIONS = [
+  '마감임박순',
+  '시급많은순',
+  '시간적은순',
+  '가나다순',
+];