Merge pull request #31 from Prography-9th-3team/feat/common-select

Feat/Select & Option 컴포넌트 작업

src/components/common/Icon/lib/index.ts

@@ -15,6 +15,7 @@ export { default as checkOn_f } from './check_on.svg';
 export { default as chevronDown_s } from './chevron_down.svg';
 export { default as home04_s } from './home_04.svg';
 export { default as placeholder_s } from './placeholder.svg';
+export { default as plus_square } from './plus-square.svg';
 export { default as plus_s } from './plus.svg';
 export { default as searchSm_s } from './search_sm.svg';
 export { default as user_s } from './user.svg';

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',
+      },
+    },
+  },
+);