Merge pull request #90 from Kernel360/common-component-dropdown

공통 컴포넌트: Dropdown

src/app/globals.css

@@ -8,6 +8,9 @@
   --gray-300: #72777A;
   --gray-400: #404446;
   --tertiary: #7A7A7A;
+  --tertiary-100: #EAEAEA;
+  --tertiary-200: #F6F6F6;
+  --tertiary-400: #7C7A7A;
   --black: #090A0A;
   --white: #FFF;
   --white-100: #F3F5F8;

src/components/icons/Expand.tsx

@@ -0,0 +1,21 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface ExpandProps {
+  width?: number
+  height?: number
+  isRotate: boolean
+  color?: Colors
+}
+
+function Expand({
+  width = 10, height = 6, color = 'black', isRotate,
+}: ExpandProps) {
+  return (
+    <svg width={width} height={height} transform={isRotate ? 'rotate(180)' : 'rotate(0)'} viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4.99595 5.74996C4.89595 5.74996 4.8022 5.7326 4.7147 5.69788C4.6272 5.66315 4.54873 5.61107 4.47928 5.54163L0.52799 1.59033C0.370517 1.43286 0.295253 1.25343 0.302198 1.05204C0.309142 0.850654 0.389003 0.67357 0.541781 0.520793C0.694559 0.368015 0.871642 0.291626 1.07303 0.291626C1.27442 0.291626 1.4515 0.368015 1.60428 0.520793L5.00011 3.93746L8.41678 0.520793C8.56956 0.368015 8.74664 0.295098 8.94803 0.302043C9.14942 0.308987 9.3265 0.388848 9.47928 0.541626C9.63206 0.694404 9.70845 0.871487 9.70845 1.07288C9.70845 1.27426 9.62971 1.45331 9.47224 1.61L5.52095 5.54163C5.44595 5.61107 5.3647 5.66315 5.2772 5.69788C5.1897 5.7326 5.09595 5.74996 4.99595 5.74996Z" fill={colors[color]} />
+    </svg>
+
+  );
+}
+
+export default Expand;

src/components/shared/dropdown/Dropdown.module.scss

@@ -0,0 +1,56 @@
+.container {
+  position: relative;
+
+  &.favorite {
+    width: 80px;
+  }
+
+  .selectedValue {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.favorite {
+      width: 80px;
+      padding: 4px 4px 4px 8px;
+      border-radius: 8px;
+      background-color: var(--tertiary-200);
+    }
+  }
+
+  .menu {
+    position: absolute;
+    z-index: 3;
+    top: 34px;
+    width: 80px;
+    border: 1px solid var(--tertiary-100);
+    border-radius: 8px;
+
+    &.favorite {
+      background-color: var(--tertiary-200);
+      color: var(--tertiary-400);
+    }
+
+    .item {
+      &.favorite {
+        padding: 4px 8px;
+        border-bottom: 1px solid var(--tertiary-100);
+        font-size: 14px;
+      }
+
+      &:last-child {
+        border: none;
+      }
+    }
+
+    label {
+      &.favorite {
+        font-size: inherit;
+      }
+    }
+
+    .input[type="radio"] {
+      display: none;
+    }
+  }
+}

src/components/shared/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Dropdown from './Dropdown';
+
+const meta = {
+  title: 'Shared/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+    },
+  },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const YoutubeVideo: Story = {
+  args: {
+    type: 'favorite',
+    label: '최신순',
+    options: [
+      { label: '최신순', value: 'latest' },
+      { label: '오래된순', value: 'oldest' },
+    ],
+    placeholder: '최신순',
+    value: 'latest',
+  },
+};

src/components/shared/dropdown/Dropdown.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { InputHTMLAttributes, forwardRef, useState } from 'react';
+
+import classNames from 'classnames/bind';
+
+import useOutsideClick from '@/hooks/useOutsideClick';
+import Expand from '@components/icons/Expand';
+import Text from '@shared/text/Text';
+
+import styles from './Dropdown.module.scss';
+
+const cx = classNames.bind(styles);
+
+interface Option {
+  label: string
+  value: string | number | undefined
+}
+
+interface DropdownProps extends InputHTMLAttributes<HTMLInputElement> {
+  options: Option[]
+  label: string | number
+  value: string | number
+  type: 'favorite'
+}
+
+const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(({
+  label,
+  type,
+  options,
+  value,
+  ...props
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDropdownMenu = () => {
+    setIsOpen((prev) => { return !prev; });
+  };
+
+  const closeDropdownMenu = () => {
+    setIsOpen(false);
+  };
+
+  const containerRef = useOutsideClick(closeDropdownMenu);
+
+  return (
+    <div className={cx('container', { [type]: true })} ref={containerRef}>
+      <button onClick={openDropdownMenu} className={cx('selectedValue', { [type]: true })}>
+        <Text typography="t6" color="tertiary400">{label}</Text>
+        <Expand isRotate={isOpen} color="tertiary400" />
+      </button>
+      {isOpen && (
+        <ul className={cx('menu', { [type]: true })}>
+          {options.map((option) => {
+            return (
+              <li key={option.value} className={cx('item', { [type]: true })}>
+                <input className={cx('input')} id={option.label} type="radio" ref={ref} value={value} {...props} />
+                <label className={cx('label', { [type]: true })} htmlFor={option.label} onClick={closeDropdownMenu} role="presentation">
+                  {option.label}
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+});
+
+export default Dropdown;

src/styles/colorPalette.ts

@@ -8,6 +8,9 @@ export const colors = {
   gray300: 'var(--gray-300)',
   gray400: 'var(--gray-400)',
   tertiary: 'var(--tertiary)',
+  tertiary100: 'var(--tertiary-100)',
+  tertiary200: 'var(--tertiary-200)',
+  tertiary400: 'var(--tertiary-400)',
   black: 'var(--black)',
   white: 'var(--white)',
   white100: 'var(--white-100)',