Feat(design-system): Dropdown 구현

packages/design-system/src/components/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import Dropdown from './Dropdown';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '**선택형 입력 컴포넌트입니다.** `selectedValue`로 선택 상태를 제어하고 `onChange`로 변경 이벤트를 처리합니다. ' +
+          '`onAddItem`을 지정하면 목록 하단에 “추가” 버튼을 노출하며, `limit`으로 최대 개수를 제어합니다.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      control: 'object',
+      description: '드롭다운 항목 문자열 배열입니다.',
+    },
+    selectedValue: {
+      control: 'text',
+      description: '현재 선택된 값(제어 컴포넌트에서 사용).',
+    },
+    placeholder: {
+      control: 'text',
+      description: '선택 전 표시되는 안내 문구.',
+    },
+    addItemLabel: {
+      control: 'text',
+      description: '추가 버튼 라벨 (`onAddItem`과 함께 사용).',
+    },
+    onChange: {
+      action: 'changed',
+      description: '선택이 변경될 때 호출됩니다.',
+    },
+    limit: {
+      control: 'number',
+      description: '옵션 개수 상한. 도달 시 “추가” 버튼 숨김.',
+    },
+    onAddItem: {
+      action: 'add item clicked',
+      description: '“추가” 버튼 클릭 시 호출됩니다.',
+    },
+    className: { table: { disable: true } },
+  },
+  args: {
+    options: ['사과', '바나나', '체리'],
+    selectedValue: null,
+    placeholder: '항목을 선택하세요',
+    addItemLabel: '항목 추가',
+    limit: 5,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+function ControlledRender(args: any) {
+  const [value, setValue] = useState<string | null>(args.selectedValue ?? null);
+
+  return (
+    <div className="h-[20rem]">
+      <Dropdown
+        {...args}
+        selectedValue={value}
+        onChange={(next: string | null) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  name: '기본',
+  render: ControlledRender,
+};
+
+export const WithPreselected: Story = {
+  name: '선택값 초기화',
+  args: { selectedValue: '바나나' },
+  render: ControlledRender,
+};
+
+export const WithAddItemAlert: Story = {
+  name: '추가 버튼 클릭 시 (test Alert)',
+  args: {
+    options: ['사과', '바나나'],
+    limit: 5,
+    addItemLabel: '새 항목 추가',
+    onAddItem: () => {
+      alert('추가 버튼이 클릭되었습니다.');
+    },
+  },
+  render: ControlledRender,
+};
+
+export const LimitReached: Story = {
+  name: '추가 제한 도달 (limit)',
+  args: {
+    options: ['사과', '바나나', '체리'],
+    limit: 3,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`options.length`가 `limit`에 도달하여 “추가” 버튼이 표시되지 않습니다.',
+      },
+    },
+  },
+  render: ControlledRender,
+};
+
+export const ManyOptions: Story = {
+  name: '옵션이 많은 경우',
+  args: {
+    options: Array.from({ length: 20 }, (_, i) => `옵션 ${i + 1}`),
+  },
+  render: ControlledRender,
+};

packages/design-system/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,88 @@
+import { Icon } from '@pinback/design-system/icons';
+import { useState } from 'react';
+
+interface DropdownProps {
+  options: string[];
+  selectedValue: string | null;
+  onChange: (selected: string | null) => void;
+  placeholder: string;
+  onAddItem?: () => void;
+  addItemLabel?: string;
+  limit?: number;
+  className?: string;
+}
+
+const Dropdown = ({
+  options,
+  selectedValue,
+  onChange,
+  placeholder,
+  onAddItem,
+  addItemLabel,
+  limit,
+  className = '',
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = (option: string) => {
+    onChange(option);
+    setIsOpen(false);
+  };
+
+  const showAddItemButton =
+    onAddItem && (limit === undefined || options.length < limit);
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`body4-r flex h-[4.4rem] w-[24.8rem] items-center justify-between rounded-[4px] border px-[0.8rem] py-[1.2rem] transition-colors duration-200 ${isOpen ? 'border-main500' : 'border-gray200'}`}
+      >
+        <span className={selectedValue ? 'text-black' : 'text-font-gray-3'}>
+          {selectedValue || placeholder}
+        </span>
+        <Icon
+          name="ic_arrow_down_disable"
+          width={16}
+          height={16}
+          // TODO: Icon 컴포넌트 내부에서 animation 관련 처리 고민하기
+          // rotate={isOpen ? 180 : undefined}
+          className={`transform transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="common-shadow absolute z-10 mt-[1.5rem] w-[24.8rem] rounded-[0.4rem] bg-white">
+          <ul className="flex flex-col gap-[0.2rem]">
+            {options.map((option) => (
+              <li
+                key={option}
+                onClick={() => handleSelect(option)}
+                className={`body4-r cursor-pointer p-[0.8rem] ${selectedValue === option ? 'text-main600' : 'text-font-gray-3'}`}
+              >
+                {option}
+              </li>
+            ))}
+          </ul>
+
+          {showAddItemButton && (
+            <button
+              type="button"
+              onClick={() => {
+                onAddItem?.();
+                setIsOpen(false);
+              }}
+              className="text-main500 body4-r flex w-full cursor-pointer items-center gap-[0.8rem] p-[0.8rem]"
+            >
+              <Icon name="ic_plus" width={16} height={16} />
+              {addItemLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

packages/design-system/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as Badge } from './badge/Badge';
 export { default as Button } from './button/Button';
 export { default as Card } from './card/Card';
 export { default as Chip } from './chip/Chip';
+export { default as Dropdown } from './dropdown/Dropdown';
 export { default as Input } from './input/Input';
 export { default as Level } from './level/Level';
 export { Progress } from './progress/Progress';

packages/design-system/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "@pinback/typescript-config/react.json",
   "compilerOptions": {
     "typeRoots": ["node_modules/@types"],
-
+    "rootDir": ".",
     "outDir": "dist",
     "baseUrl": ".",
     "paths": {