diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
new file mode 100644
index 0000000..615b8d4
--- /dev/null
+++ b/components/Dropdown.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+
+import Menu from './Menu';
+
+interface DropdownProps {
+  options: string[];
+  dropdownSize?: string;
+  onSelect: (option: string) => void;
+}
+
+/**
+ * 드롭다운 컴포넌트
+ * @param options 메뉴팝업에 들어가는 옵션을 담을 배열
+ * @param dropdownSize 팝업의 크기
+ * @param onSelect 선택한 옵션을 부모 컴포넌트로 반환
+ */
+
+export default function Dropdown({
+  options,
+  onSelect,
+  dropdownSize = 'w-auto',
+}: DropdownProps) {
+  const [selectedOption, setSelectedOption] = useState(options[0]); //현재 선택된 옵션
+  const [isOpen, setIsOpen] = useState(false); //드롭다운 열기/닫기
+  const dropdownRef = useRef<HTMLDivElement>(null); // 드롭다운 DOM 요소 참조
+
+  //선택한 옵션을 상태로 설정, 부모 컴포넌트로 전달
+  const handleOptionClick = (option: string) => {
+    setSelectedOption(option);
+    setIsOpen(false);
+    onSelect(option);
+  };
+
+  //외부 클릭시 드롭다운 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`${dropdownSize} flex items-center justify-between rounded-xl border border-gray-300 bg-background px-5 py-3.5 text-14 leading-none text-gray-400 hover:border-green-200 focus:ring-1 focus:ring-green-200`}
+      >
+        {selectedOption}
+        <img
+          src="/icon/icon-arrowdown.svg"
+          className={`h-4 w-4 ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+        />
+      </button>
+
+      {isOpen && (
+        <Menu
+          options={options}
+          onSelect={handleOptionClick}
+          menuSize={dropdownSize}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/components/Menu.tsx b/components/Menu.tsx
new file mode 100644
index 0000000..d78e85a
--- /dev/null
+++ b/components/Menu.tsx
@@ -0,0 +1,30 @@
+interface MenuProps {
+  options: string[];
+  menuSize?: string;
+  onSelect: (option: string) => void;
+}
+
+/**
+ * 메뉴팝업을 띄우는 컴포넌트
+ * @param options 메뉴팝업에 들어가는 옵션을 담을 배열
+ * @param menuSize 팝업의 크기
+ * @param onSelect 선택한 옵션을 반환
+ */
+
+export default function Menu({ options, onSelect, menuSize }: MenuProps) {
+  return (
+    <ul
+      className={`${menuSize} absolute z-10 mt-2 rounded-xl border border-gray-300 bg-background p-1 text-14 shadow-custom`}
+    >
+      {options.map((option, index) => (
+        <li
+          key={index}
+          onClick={() => onSelect(option)}
+          className={`w-auto cursor-pointer rounded-md px-3 py-2.5 hover:bg-green-100`}
+        >
+          {option}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 765a356..23e59c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,8 +20,8 @@
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^8.57.1",
         "@types/node": "^20",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/react": "^19.0.1",
+        "@types/react-dom": "^19.0.2",
         "@typescript-eslint/eslint-plugin": "^8.18.0",
         "@typescript-eslint/parser": "^8.18.0",
         "autoprefixer": "^10.4.20",
@@ -29,6 +29,7 @@
         "eslint-config-next": "^15.1.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-next": "^0.0.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -2678,6 +2679,13 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
+    "node_modules/eslint-plugin-next": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-next/-/eslint-plugin-next-0.0.0.tgz",
+      "integrity": "sha512-IldNDVb6WNduggwRbYzSGZhaskUwVecJ6fhmqwX01+S1aohwAWNzU4me6y47DDzpD/g0fdayNBGxEdt9vKkUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/eslint-plugin-prettier": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
diff --git a/package.json b/package.json
index 0019e92..83b86a9 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^8.57.1",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "autoprefixer": "^10.4.20",
@@ -31,6 +31,7 @@
     "eslint-config-next": "^15.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-next": "^0.0.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
diff --git a/pages/test/index.tsx b/pages/test/index.tsx
index aac1243..3d338fc 100644
--- a/pages/test/index.tsx
+++ b/pages/test/index.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import Button from '@/components/Button';
+import Dropdown from '@/components/Dropdown';
 import LinkBar from '@/components/LinkBar';
 import SnackBar from '@/components/SnackBar';
 
@@ -24,6 +25,32 @@ export default function Test() {
   };
   // ----snackBar(end)----
 
+  //-----dropdown(start)-----
+  const options = ['옵션1', '옵션2', '옵션3'];
+
+  const handleOption1 = () => {
+    console.log('옵션1');
+  };
+
+  const handleOption2 = () => {
+    console.log('옵션2');
+  };
+
+  const handleOption3 = () => {
+    console.log('옵션3');
+  };
+
+  const handleOptionSelect = (option: string) => {
+    if (option === '옵션1') {
+      handleOption1();
+    } else if (option === '옵션2') {
+      handleOption2();
+    } else if (option === '옵션3') {
+      handleOption3();
+    }
+  };
+  //-----dropdown(end)-----
+
   return (
     <div className="px-4 py-10">
       <table className="w-full border-collapse border border-gray-300">
@@ -67,6 +94,16 @@ export default function Test() {
               <LinkBar link="https://www.google.com" />
             </td>
           </tr>
+          <tr className="border-b border-gray-300">
+            <td className={commonCellClass}>Dropdown</td>
+            <td className={commonRowClass}>
+              <Dropdown
+                options={options}
+                onSelect={handleOptionSelect}
+                dropdownSize="w-40"
+              />
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
diff --git a/public/icon/icon-arrowdown.svg b/public/icon/icon-arrowdown.svg
new file mode 100644
index 0000000..ce93a2a
--- /dev/null
+++ b/public/icon/icon-arrowdown.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5198 14.174L8.36872 11.0229C8.32525 10.9794 8.29102 10.9309 8.26602 10.8773C8.24102 10.8237 8.22852 10.7662 8.22852 10.7049C8.22852 10.5824 8.26995 10.476 8.35282 10.3856C8.43567 10.2952 8.54487 10.25 8.68044 10.25H15.3188C15.4544 10.25 15.5636 10.2956 15.6465 10.3869C15.7293 10.4781 15.7708 10.5846 15.7708 10.7063C15.7708 10.7367 15.724 10.8423 15.6304 11.0231L12.4794 14.174C12.407 14.2464 12.3321 14.2993 12.2548 14.3327C12.1775 14.366 12.0924 14.3827 11.9996 14.3827C11.9069 14.3827 11.8218 14.366 11.7445 14.3327C11.6671 14.2993 11.5923 14.2464 11.5198 14.174Z" fill="#8F95B2"/>
+</svg>