Merge pull request #142 from Boggle-Boggle/feat/137 : 셀렉트 컴포넌트 구현

[Feat/137] 셀렉트 컴포넌트 구현

Author: devkyoung2

.storybook/preview.ts

@@ -10,6 +10,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: ['Components', ['Button', 'Checkbox', 'Radio', 'Switch', 'Icons']],
+      },
+    },
   },
 };
 

src/components/refactor/CheckBox.tsx

@@ -0,0 +1,27 @@
+type CheckBoxProps = {
+  size?: 'small' | 'medium';
+  variant?: 'primary' | 'grey';
+  checked?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const CheckBox = ({ size = 'medium', variant = 'primary', checked = false, onChange }: CheckBoxProps) => {
+  const variantClass =
+    variant === 'primary'
+      ? 'border-neutral-40 peer-checked:bg-primary '
+      : 'border-neutral-60 peer-checked:bg-neutral-80 ';
+  const sizeClass = size === 'small' ? 'h-3 w-3 text-body2' : 'h-6 w-6  text-title2';
+
+  return (
+    <label htmlFor="checkbox">
+      <input id="checkbox" type="checkbox" className="peer sr-only" checked={checked} onChange={onChange} />
+      <span
+        className={`flex items-center justify-center rounded-[4px] border-[1.5px] text-neutral-0 peer-checked:border-transparent ${variantClass} ${sizeClass}`}
+      >
+        {checked && '✓'}
+      </span>
+    </label>
+  );
+};
+
+export default CheckBox;

src/components/refactor/Radio.tsx

@@ -0,0 +1,32 @@
+type RadioProps = {
+  id: string;
+  name: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  size?: 'small' | 'medium';
+  variant?: 'primary' | 'grey';
+  checked: boolean;
+};
+
+const Radio = ({ id, name, checked, onChange, size = 'medium', variant = 'primary' }: RadioProps) => {
+  const variantInnerClass = variant === 'primary' ? 'bg-primary' : 'bg-neutral-80 ';
+  const variantOuterClass =
+    variant === 'primary'
+      ? 'border-neutral-40 peer-checked:border-primary'
+      : 'border-neutral-80 peer-checked:border-neutral-80';
+
+  const sizeInnerClass = size === 'small' ? 'h-[10.7px] w-[10.7px]' : 'h-[15px] w-[15px]';
+  const sizeOuterClass = size === 'small' ? 'h-4 w-4' : 'h-6 w-6';
+
+  return (
+    <label htmlFor={id}>
+      <input id={id} name={name} type="radio" checked={checked} onChange={onChange} className="peer sr-only" />
+      <span
+        className={`flex items-center justify-center rounded-full border bg-neutral-0 ${sizeOuterClass} ${variantOuterClass} `}
+      >
+        {checked && <span className={`block rounded-full ${sizeInnerClass} ${variantInnerClass}`} />}
+      </span>
+    </label>
+  );
+};
+
+export default Radio;

src/components/refactor/Switch.tsx

@@ -0,0 +1,26 @@
+type SwitchProps = {
+  checked?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const Switch = ({ checked = false, onChange }: SwitchProps) => {
+  return (
+    <label htmlFor="switch">
+      <input
+        id="switch"
+        type="checkbox"
+        className="peer sr-only"
+        checked={checked}
+        onChange={onChange}
+        aria-label="스위치"
+      />
+      <span className="relative block h-5 w-9 rounded-[23px] bg-neutral-40 p-[1px] peer-checked:bg-primary">
+        <span
+          className={`${checked ? 'left-[1.063rem]' : 'left-[0.063rem]'} absolute size-[1.125rem] rounded-full border-neutral-0 bg-neutral-0 transition-all duration-300`}
+        />
+      </span>
+    </label>
+  );
+};
+
+export default Switch;

src/stories/Button.stories.ts src/stories/Button.stories.tsxsrc/stories/Button.stories.ts renamed to src/stories/Button.stories.tsx

@@ -41,7 +41,7 @@ const buttonArgs: React.ComponentProps<typeof Button> = {
   type: 'submit',
 };
 
-export const dafault: Story = {
+export const Default: Story = {
   args: {
     ...buttonArgs,
   },

src/stories/Checkbox.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import CheckBox from 'components/refactor/CheckBox';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: CheckBox,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'medium'],
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['primary', 'grey'],
+    },
+    checked: {
+      control: 'boolean',
+    },
+    onChange: { action: 'changed' },
+  },
+} satisfies Meta<typeof CheckBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: 'small',
+    variant: 'grey',
+    checked: true,
+    onChange: () => {},
+  },
+};

src/stories/Radio.stories.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useState } from 'react';
+
+import Radio from 'components/refactor/Radio';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Components/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['small', 'medium'],
+    },
+    variant: {
+      control: 'radio',
+      options: ['primary', 'grey'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+const Template: Story['render'] = (args) => {
+  const [selected, setSelected] = useState('option1');
+
+  return (
+    <div className="flex flex-col">
+      <Radio
+        {...args}
+        id="option1"
+        name="group"
+        checked={selected === 'option1'}
+        onChange={() => setSelected('option1')}
+      />
+      <div className="h-2" />
+      <Radio
+        {...args}
+        id="option2"
+        name="group"
+        checked={selected === 'option2'}
+        onChange={() => setSelected('option2')}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    size: 'medium',
+    variant: 'primary',
+  },
+};

src/stories/Switch.stories.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useState } from 'react';
+
+import Switch from 'components/refactor/Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+const Template: Story['render'] = () => {
+  const [selected, setSelected] = useState(false);
+
+  return <Switch checked={selected} onChange={() => setSelected(!selected)} />;
+};
+
+export const Default: Story = {
+  render: Template,
+};