diff --git a/src/components/common/button/infoBtn/InfoBtn.tsx b/src/components/common/button/infoBtn/InfoBtn.tsx new file mode 100644 index 0000000..190a900 --- /dev/null +++ b/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 ( + + ); +}; + +export default InfoBtn; diff --git a/src/components/common/button/infoBtn/infoBtn.css.ts b/src/components/common/button/infoBtn/infoBtn.css.ts new file mode 100644 index 0000000..8940483 --- /dev/null +++ b/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; diff --git a/src/stories/InfoBtn.stories.ts b/src/stories/InfoBtn.stories.ts new file mode 100644 index 0000000..81ca12d --- /dev/null +++ b/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; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {};