diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 83ddd7a..3d4815f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,17 +14,17 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 9
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
diff --git a/.gitignore b/.gitignore
index 6edcd94..58ceba1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,4 +43,5 @@ next-env.d.ts
 
 
 # personal doc
+.documents/*
 .documents/daily-report.md
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
new file mode 100644
index 0000000..4368812
--- /dev/null
+++ b/src/components/dropdown/Dropdown.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+
+import DropdownItem from './DropdownItem';
+import useDropdown from './hooks/useDropdown';
+import styles from './styles/Dropdown.module.css';
+import type { DropdownMenuSize, DropdownProps } from './types/types';
+
+const DEFAULT_SIZE: DropdownMenuSize = 'default';
+const MENU_SIZE_CLASS: Record<DropdownMenuSize, string> = {
+  default: styles.menuDefault,
+  small: styles.menuSmall,
+  repeat: styles.menuRepeat,
+};
+
+export default function Dropdown({
+  items,
+  defaultValue,
+  value,
+  placeholder,
+  size = DEFAULT_SIZE,
+  disabled = false,
+  ariaLabel,
+  className,
+  buttonClassName,
+  menuClassName,
+  itemClassName,
+  onChange,
+}: DropdownProps) {
+  const {
+    listboxId,
+    isOpen,
+    selectedItem,
+    activeIndex,
+    openByKeyboard,
+    shouldRestoreFocus,
+    setActiveIndex,
+    clearRestoreFocus,
+    handleSelect,
+    handleToggle,
+    handleBlur,
+    handleKeyDown,
+  } = useDropdown({ items, defaultValue, value, disabled, onChange });
+  const triggerAriaLabel = selectedItem || placeholder ? undefined : ariaLabel;
+  const displayLabel = selectedItem?.label ?? placeholder;
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  useEffect(() => {
+    if (!isOpen || !openByKeyboard || activeIndex < 0) return;
+    optionRefs.current[activeIndex]?.focus();
+  }, [activeIndex, isOpen, openByKeyboard]);
+
+  useEffect(() => {
+    if (isOpen || !shouldRestoreFocus) return;
+    triggerRef.current?.focus();
+    clearRestoreFocus();
+  }, [clearRestoreFocus, isOpen, shouldRestoreFocus]);
+
+  return (
+    <div className={clsx(styles.dropdown, className)} onBlur={handleBlur} onKeyDown={handleKeyDown}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={clsx(styles.button, disabled && styles.disabled, buttonClassName)}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={listboxId}
+        aria-label={triggerAriaLabel}
+        disabled={disabled}
+        onClick={handleToggle}
+      >
+        <span className={clsx(styles.label, !selectedItem && placeholder && styles.placeholder)}>
+          {displayLabel}
+        </span>
+        <span className={clsx(styles.icon, isOpen && styles.iconOpen)} aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M3.5 6L8 10.5L12.5 6" stroke="currentColor" strokeWidth="1.6" />
+          </svg>
+        </span>
+      </button>
+      {isOpen ? (
+        <div
+          id={listboxId}
+          className={clsx(styles.menu, MENU_SIZE_CLASS[size], menuClassName)}
+          role="listbox"
+          aria-label={ariaLabel}
+        >
+          {items.map((item, index) => (
+            <DropdownItem
+              key={item.value}
+              label={item.label}
+              isSelected={item.value === selectedItem?.value}
+              size={size}
+              className={itemClassName}
+              tabIndex={openByKeyboard && activeIndex === index ? 0 : -1}
+              onFocus={() => setActiveIndex(index)}
+              onSelect={() => handleSelect(item.value)}
+              ref={(node) => {
+                optionRefs.current[index] = node;
+              }}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/dropdown/DropdownItem.tsx b/src/components/dropdown/DropdownItem.tsx
new file mode 100644
index 0000000..402e1dc
--- /dev/null
+++ b/src/components/dropdown/DropdownItem.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+import styles from './styles/DropdownItem.module.css';
+import type { DropdownItemProps } from './types/types';
+
+const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(function DropdownItem(
+  { label, isSelected, size, className, onSelect, tabIndex, onFocus },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={clsx(styles.item, styles[size], isSelected && styles.selected, className)}
+      role="option"
+      aria-selected={isSelected}
+      tabIndex={tabIndex}
+      onClick={onSelect}
+      onFocus={onFocus}
+    >
+      {label}
+    </button>
+  );
+});
+
+DropdownItem.displayName = 'DropdownItem';
+
+export default DropdownItem;
diff --git a/src/components/dropdown/hooks/useDropdown.ts b/src/components/dropdown/hooks/useDropdown.ts
new file mode 100644
index 0000000..3650c0a
--- /dev/null
+++ b/src/components/dropdown/hooks/useDropdown.ts
@@ -0,0 +1,170 @@
+import type { FocusEvent, KeyboardEvent } from 'react';
+import { useId, useMemo, useState } from 'react';
+
+import type { UseDropdownOptions } from '../types/types';
+import { getSelectedItem, resolveInitialValue } from '../utils/dropdown';
+
+export default function useDropdown({
+  items,
+  defaultValue,
+  value,
+  disabled = false,
+  onChange,
+}: UseDropdownOptions) {
+  const listboxId = useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const [openByKeyboard, setOpenByKeyboard] = useState(false);
+  const [shouldRestoreFocus, setShouldRestoreFocus] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(() =>
+    resolveInitialValue(items, defaultValue),
+  );
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const currentValue = value ?? uncontrolledValue;
+  const selectedItem = getSelectedItem(items, currentValue);
+  const selectedIndex = useMemo(
+    () => items.findIndex((item) => item.value === currentValue),
+    [items, currentValue],
+  );
+  const fallbackIndex = useMemo(
+    () => (selectedIndex >= 0 ? selectedIndex : items.length > 0 ? 0 : -1),
+    [items.length, selectedIndex],
+  );
+  const resolvedActiveIndex = useMemo(() => {
+    if (items.length === 0) return -1;
+    const base = activeIndex ?? fallbackIndex;
+    if (base < 0) return 0;
+    return Math.min(base, items.length - 1);
+  }, [activeIndex, fallbackIndex, items.length]);
+
+  const handleSelect = (nextValue: string) => {
+    if (disabled) return;
+    if (value === undefined) {
+      setUncontrolledValue(nextValue);
+    }
+    onChange?.(nextValue);
+    setIsOpen(false);
+    setActiveIndex(null);
+    setShouldRestoreFocus(true);
+  };
+
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen((prev) => {
+      const next = !prev;
+      if (next) {
+        setOpenByKeyboard(false);
+        setActiveIndex(fallbackIndex);
+      } else {
+        setActiveIndex(null);
+      }
+      return next;
+    });
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+    const nextFocus = event.relatedTarget as Node | null;
+    if (nextFocus && event.currentTarget.contains(nextFocus)) return;
+    setIsOpen(false);
+    setActiveIndex(null);
+    setShouldRestoreFocus(false);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    const target = event.target as HTMLElement | null;
+    const isTrigger =
+      target instanceof HTMLButtonElement && target.getAttribute('aria-haspopup') === 'listbox';
+
+    if (items.length === 0) {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        setIsOpen(false);
+        setActiveIndex(null);
+        setShouldRestoreFocus(true);
+      }
+      return;
+    }
+
+    if (!isOpen) {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault();
+        setIsOpen(true);
+        setOpenByKeyboard(true);
+        setActiveIndex(fallbackIndex);
+      }
+      return;
+    }
+
+    if (isTrigger) {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        setIsOpen(false);
+        setActiveIndex(null);
+        setShouldRestoreFocus(true);
+      }
+      return;
+    }
+
+    const maxIndex = items.length - 1;
+    setOpenByKeyboard(true);
+
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        const nextIndex = resolvedActiveIndex + 1 > maxIndex ? 0 : resolvedActiveIndex + 1;
+        setActiveIndex(nextIndex);
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        const nextIndex = resolvedActiveIndex <= 0 ? maxIndex : resolvedActiveIndex - 1;
+        setActiveIndex(nextIndex);
+        break;
+      }
+      case 'Home': {
+        event.preventDefault();
+        setActiveIndex(0);
+        break;
+      }
+      case 'End': {
+        event.preventDefault();
+        setActiveIndex(maxIndex);
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        event.preventDefault();
+        const item = items[resolvedActiveIndex];
+        if (item) {
+          handleSelect(item.value);
+        }
+        break;
+      }
+      case 'Escape': {
+        event.stopPropagation();
+        setIsOpen(false);
+        setActiveIndex(null);
+        setShouldRestoreFocus(true);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  return {
+    listboxId,
+    isOpen,
+    selectedItem,
+    activeIndex: resolvedActiveIndex,
+    openByKeyboard,
+    shouldRestoreFocus,
+    setActiveIndex,
+    clearRestoreFocus: () => setShouldRestoreFocus(false),
+    handleSelect,
+    handleToggle,
+    handleBlur,
+    handleKeyDown,
+  };
+}
diff --git a/src/components/dropdown/styles/Dropdown.module.css b/src/components/dropdown/styles/Dropdown.module.css
new file mode 100644
index 0000000..5508514
--- /dev/null
+++ b/src/components/dropdown/styles/Dropdown.module.css
@@ -0,0 +1,98 @@
+.dropdown {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 120px;
+  height: 44px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--Border-Primary, #e2e8f0);
+  background: var(--Background-Primary, #ffffff);
+  color: var(--Text-Default, #64748b);
+  font-family: Pretendard, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  letter-spacing: 0%;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.button:focus-visible {
+  outline: 2px solid #94a3b8;
+  outline-offset: 2px;
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.placeholder {
+  color: var(--Text-Placeholder, #94a3b8);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 120ms ease;
+}
+
+.iconOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 8px 0;
+  border-radius: 12px;
+  border: 1px solid var(--Border-Primary, #e2e8f0);
+  background: var(--Background-Primary, #ffffff);
+  box-sizing: border-box;
+}
+
+.menuDefault {
+  width: 135px;
+  min-height: 184px;
+}
+
+.menuSmall {
+  width: 120px;
+  min-height: 160px;
+}
+
+.menuRepeat {
+  width: 109px;
+  min-height: 160px;
+}
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@media (max-width: 480px) {
+  .button {
+    width: 94px;
+    height: 40px;
+    padding: 8px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 14px;
+  }
+}
diff --git a/src/components/dropdown/styles/DropdownItem.module.css b/src/components/dropdown/styles/DropdownItem.module.css
new file mode 100644
index 0000000..7224b3f
--- /dev/null
+++ b/src/components/dropdown/styles/DropdownItem.module.css
@@ -0,0 +1,37 @@
+.item {
+  width: 100%;
+  border: none;
+  background: transparent;
+  padding: 8px 12px;
+  text-align: center;
+  color: #111827;
+  font-family: Pretendard, sans-serif;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.item:focus-visible {
+  outline: 2px solid #94a3b8;
+  outline-offset: -2px;
+}
+
+.default {
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.small {
+  font-size: 14px;
+  line-height: 17px;
+}
+
+.repeat {
+  font-size: 14px;
+  line-height: 17px;
+  text-align: left;
+  margin-left: 16px;
+}
+
+.selected {
+  font-weight: 600;
+}
diff --git a/src/components/dropdown/types/types.ts b/src/components/dropdown/types/types.ts
new file mode 100644
index 0000000..75b086d
--- /dev/null
+++ b/src/components/dropdown/types/types.ts
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+
+export type DropdownMenuSize = 'default' | 'small' | 'repeat';
+
+export interface DropdownItemData {
+  value: string;
+  label: ReactNode;
+}
+
+export interface DropdownProps {
+  items: DropdownItemData[];
+  defaultValue?: string;
+  value?: string;
+  placeholder?: string;
+  size?: DropdownMenuSize;
+  disabled?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  buttonClassName?: string;
+  menuClassName?: string;
+  itemClassName?: string;
+  onChange?: (value: string) => void;
+}
+
+export interface DropdownItemProps {
+  label: ReactNode;
+  isSelected: boolean;
+  size: DropdownMenuSize;
+  className?: string;
+  onSelect: () => void;
+  tabIndex?: number;
+  onFocus?: () => void;
+}
+
+export interface UseDropdownOptions {
+  items: DropdownItemData[];
+  defaultValue?: string;
+  value?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}
diff --git a/src/components/dropdown/utils/dropdown.ts b/src/components/dropdown/utils/dropdown.ts
new file mode 100644
index 0000000..e55ed9a
--- /dev/null
+++ b/src/components/dropdown/utils/dropdown.ts
@@ -0,0 +1,12 @@
+import type { DropdownItemData } from '../types/types';
+
+export function resolveInitialValue(items: DropdownItemData[], defaultValue?: string) {
+  if (defaultValue && items.some((item) => item.value === defaultValue)) {
+    return defaultValue;
+  }
+  return items[0]?.value ?? '';
+}
+
+export function getSelectedItem(items: DropdownItemData[], currentValue: string) {
+  return items.find((item) => item.value === currentValue);
+}