FEAT: ✨ Option 컴포넌트 추가

src/components/common/Option/Option.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Option } from '.';
+import Check from '../Check';
+import Icon from '../Icon';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Common/Option',
+  component: Option,
+  tags: ['autodocs'],
+  args: { isSelected: false, onClick: fn() },
+  argTypes: {},
+} satisfies Meta<typeof Option>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+  render: (args) => {
+    return (
+      <div className='w-[500px] flex flex-col gap-20'>
+        <Option {...args}>
+          <Option.Label>Text</Option.Label>
+        </Option>
+        <Option {...args}>
+          <Check />
+          <Option.Label>Text</Option.Label>
+        </Option>
+        <Option {...args}>
+          <Option.Label>Text</Option.Label>
+          <Icon name='chevronDown_s' className='w-16 h-16 stroke-text-minimal' />
+        </Option>
+        <Option {...args}>
+          <Check defaultChecked />
+          <Option.Label>Text</Option.Label>
+          <Icon name='chevronDown_s' className='w-16 h-16 stroke-text-minimal' />
+        </Option>
+      </div>
+    );
+  },
+};
+
+export const Selected_Option: Story = {
+  args: { isSelected: true },
+  render: (args) => {
+    return (
+      <div className='w-[500px] flex flex-col gap-20'>
+        <Option {...args}>
+          <Option.Label>Text</Option.Label>
+        </Option>
+        <Option {...args}>
+          <Check />
+          <Option.Label>Text</Option.Label>
+        </Option>
+        <Option {...args}>
+          <Option.Label>Text</Option.Label>
+          <Icon name='chevronDown_s' className='w-16 h-16 stroke-text-minimal' />
+        </Option>
+        <Option {...args}>
+          <Check defaultChecked />
+          <Option.Label>Text</Option.Label>
+          <Icon name='chevronDown_s' className='w-16 h-16 stroke-text-minimal' />
+        </Option>
+      </div>
+    );
+  },
+};
+
+export const Option_List: Story = {
+  args: {},
+  render: (args) => {
+    return (
+      <div className='w-[500px]'>
+        <div className='flex flex-col gap-4 p-8 rounded-lg shadow-layer'>
+          <Option {...args} isSelected>
+            <Option.Label>Text</Option.Label>
+          </Option>
+          <Option {...args}>
+            <Option.Label>Text</Option.Label>
+          </Option>
+          <Option {...args}>
+            <Option.Label>Text</Option.Label>
+          </Option>
+          <Option {...args}>
+            <Option.Label>Text</Option.Label>
+          </Option>
+        </div>
+      </div>
+    );
+  },
+};

src/components/common/Option/index.ts

@@ -0,0 +1,6 @@
+import OptionLabel from './ui/OptionLabel';
+import OptionMain from './ui/OptionMain';
+
+export const Option = Object.assign(OptionMain, {
+  Label: OptionLabel,
+});

src/components/common/Option/ui/OptionLabel.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+export interface IOptionLabel extends PropsWithChildren {}
+
+const OptionLabel = ({ children }: PropsWithChildren) => {
+  return <div className='flex-1 text-left text-text label-md '>{children}</div>;
+};
+
+export default OptionLabel;

src/components/common/Option/ui/OptionMain.tsx

@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+
+export interface IOptionMain extends PropsWithChildren {
+  isSelected?: boolean;
+  onClick?: () => void;
+}
+
+const OptionMain = ({ isSelected, onClick, children }: IOptionMain) => {
+  const handleOnClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+
+    if (onClick) onClick();
+  };
+
+  return (
+    <div className={cn(optionMainVariants({ isSelected }))} onClick={handleOnClick}>
+      {children}
+    </div>
+  );
+};
+
+export default OptionMain;
+
+const optionMainVariants = cva(
+  ['min-h-48 flex items-center justify-between gap-8 py-8 px-12 rounded-lg hover:bg-surface-sub'],
+  {
+    variants: {
+      isSelected: {
+        true: 'bg-action-primary-tonal hover:bg-action-primary-tonal',
+      },
+    },
+  },
+);

src/components/common/Select/Select.stories.tsx

@@ -166,7 +166,7 @@ export const Invalid: Story = {
 export const Disabled: Story = {
   args: { disabled: true },
   render: (args) => {
-    const { isInvalid } = args;
+    const { isInvalid, value } = args;
     const [text, setText] = useState<string>('');
 
     const handleChangeText = (e: ChangeEvent<HTMLInputElement>) => {
@@ -177,7 +177,7 @@ export const Disabled: Story = {
 
     return (
       <div className='w-[500px] flex flex-col gap-32'>
-        <Select {...args} value={text} onChange={handleChangeText}>
+        <Select {...args} value={value} onChange={handleChangeText}>
           <Select.Label>Label</Select.Label>
           <Select.InputWrapper>
             <Select.Input />