diff --git a/src/assets/icons/dropdown.svg b/src/assets/icons/dropdown.svg
new file mode 100644
index 00000000..3b76743d
--- /dev/null
+++ b/src/assets/icons/dropdown.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
new file mode 100644
index 00000000..74c651bc
--- /dev/null
+++ b/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>; // Dispatch>는 set함수 타입
+ placeholder?: string;
+ variant: 'form' | 'filter';
+}
+
+export default function Dropdown({
+ options,
+ selected,
+ setSelect,
+ placeholder = '선택',
+ variant,
+}: DropdownProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(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 (
+
+
+
+ {isOpen && (
+
+
+ {options.map((option) => (
+ - 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}
+
+ ))}
+
+
+ )}
+