Merge pull request #76 from SOPT-all/feat/#74/cmp-info-btn

[FEAT] InfoBtn 컴포넌트 구현

src/components/common/button/infoBtn/InfoBtn.tsx

@@ -0,0 +1,19 @@
+import Icon from '@assets/svgs';
+import buttonStyle from '@components/common/button/infoBtn/infoBtn.css';
+
+interface InfoBtnProps {
+  label: string;
+  onClick: () => void;
+  hasDivider?: boolean;
+}
+
+const InfoBtn = ({ label, onClick, hasDivider = false }: InfoBtnProps) => {
+  return (
+    <button onClick={onClick} className={buttonStyle({ hasDivider })}>
+      <p>{label} </p>
+      <Icon.IcnArrowGrayRight />
+    </button>
+  );
+};
+
+export default InfoBtn;

src/components/common/button/infoBtn/infoBtn.css.ts

@@ -0,0 +1,26 @@
+import theme from '@styles/theme.css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const buttonStyle = recipe({
+  base: {
+    backgroundColor: '#fff',
+    ...theme.FONTS.h5Sb16,
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '31.7rem',
+    padding: '1.6rem 2.3rem 1.6rem 0',
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        boxShadow: `0px 1px 0px 0px ${theme.COLORS.gray2}`,
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    hasDivider: false,
+  },
+});
+
+export default buttonStyle;

src/stories/InfoBtn.stories.ts

@@ -0,0 +1,33 @@
+import InfoBtn from '@components/common/button/infoBtn/InfoBtn';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Common/Button/InfoBtn',
+  component: InfoBtn,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      action: 'clicked',
+    },
+    hasDivider: {
+      action: 'boolean',
+    },
+  },
+  args: {
+    label: '공지사항',
+    onClick: () => alert('click !'),
+    hasDivider: true,
+  },
+} satisfies Meta<typeof InfoBtn>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};