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

src/components/common/Dropdown.tsx

@@ -0,0 +1,92 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import Down from '@/assets/icons/dropdown.svg';
+
+interface DropdownProps {
+  options: string[];
+  selected: string;
+  setSelect: Dispatch<SetStateAction<string>>; // Dispatch<SetStateAction<string>>는 set함수 타입
+  placeholder?: string;
+  variant: 'form' | 'filter';
+}
+
+export default function Dropdown({
+  options,
+  selected,
+  setSelect,
+  placeholder = '선택',
+  variant,
+}: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+  };
+
+  const handleSelect = (options: string) => {
+    setSelect(options);
+    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 items-center justify-between rounded-md ${variant === 'form' ? 'h-58 w-full border border-gray-30 bg-white px-20 py-16 text-body1 font-regular' : 'rounded-5 h-30 w-105 justify-center gap-6 bg-gray-10 px-12 text-body2 font-bold'}`}
+      >
+        <span className={selected ? 'text-black' : 'text-gray-40'}>
+          {selected || placeholder}
+        </span>
+        <img
+          src={Down}
+          alt="arrow down"
+          className={`${isOpen ? '' : 'rotate-180'} ${variant === 'form' ? 'h-16 w-16' : 'h-10 w-10'}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className={`absolute right-0 left-0 mt-8 flex cursor-pointer flex-col rounded-md border border-gray-20 bg-white text-black ${variant === 'form' ? 'h-230 w-full overflow-y-auto' : 'h-160 w-105 justify-center py-12'}`}
+        >
+          <ul
+            className={`${variant === 'form' ? '' : 'flex h-136 flex-col gap-8'}`}
+          >
+            {options.map((option) => (
+              <li
+                key={option}
+                onClick={() => handleSelect(option)}
+                className={`flex items-center justify-center border-b border-gray-20 text-body2 leading-22 font-regular text-black last:border-b-0 ${variant === 'form' ? 'pt-12 pb-11' : 'pb-8'}`}
+              >
+                {option}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

src/constants/dropdownOptions.ts

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