Feat(design-system): Dropdown 구현

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

@@ -0,0 +1,121 @@
+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:
+          'dropdown 컴포넌트는 `select`와 `option` 컴포넌트를 포함하여 여러 항목 중 하나를 선택할 수 있는 UI 요소입니다. <br/>' +
+          '`onAddItem`과 `limit` props를 통해 사용자가 항목을 추가할 수 있는 기능도 제공합니다.',
+      },
+    },
+  },
+  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-[25rem]">
+      <Dropdown
+        {...args}
+        selectedValue={value}
+        onChange={(next: string | null) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  name: '기본',
+  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,87 @@
+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-[24.8rem] ${className}`}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`body4-r flex h-[4.4rem] w-full 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}
+          rotate={isOpen ? 180 : undefined}
+          hasRotateAnimation={true}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="common-shadow ds-scrollbar absolute z-10 mt-[1.5rem] h-[20.4rem] w-full overflow-y-auto rounded-[0.4rem] bg-white p-[0.8rem]">
+          <ul className="flex flex-col gap-[0.2rem]">
+            {options.map((option) => (
+              <li
+                key={option}
+                onClick={() => handleSelect(option)}
+                className={`body4-r h-[3.6rem] cursor-pointer p-[0.8rem] ${selectedValue === option ? 'text-main600' : 'text-font-gray-3'}`}
+              >
+                {option}
+              </li>
+            ))}
+
+            {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>
+            )}
+          </ul>
+        </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/src/icons/components/icon.tsx

@@ -1,6 +1,6 @@
-import type { IconName } from '../iconNames';
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
+import type { IconName } from '../iconNames';
 
 type IconRotate = 90 | 180 | 270;
 
@@ -63,6 +63,7 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
   color?: IconColor;
   className?: string;
   rotate?: IconRotate;
+  hasRotateAnimation?: boolean;
   ariaHidden?: boolean;
 }
 
@@ -74,6 +75,7 @@ export const Icon = ({
   color,
   className,
   rotate,
+  hasRotateAnimation = false,
   ariaHidden = true,
   ...rest
 }: IconProps) => {
@@ -89,7 +91,12 @@ export const Icon = ({
           ? 'rotate-[270deg]'
           : '';
 
-  const combined = clsx('inline-block', rotateClass, className);
+  const combined = clsx(
+    'inline-block',
+    rotateClass,
+    hasRotateAnimation && 'transform transition-transform duration-200',
+    className
+  );
 
   return (
     <svg

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": {