diff --git a/src/components/common/input/RadioInput.tsx b/src/components/common/input/RadioInput.tsx index e11cae1..0a0b23d 100644 --- a/src/components/common/input/RadioInput.tsx +++ b/src/components/common/input/RadioInput.tsx @@ -34,7 +34,7 @@ export const RadioInput = ({ () => onChange?.({ target: { checked: true, value: props.value }, - } as any), + } as React.ChangeEvent), disabled ) } diff --git a/src/components/common/label/Label.tsx b/src/components/common/label/Label.tsx new file mode 100644 index 0000000..42792a3 --- /dev/null +++ b/src/components/common/label/Label.tsx @@ -0,0 +1,39 @@ +import clsx from 'clsx' + +import { Highlight } from '@/components/common/text' + +export interface LabelProps + extends React.LabelHTMLAttributes { + required?: boolean + labelText?: string + layout?: 'col' | 'row' +} + +export const Label = ({ + required = false, + labelText, + layout = 'col', + htmlFor, + children, + className = '', +}: LabelProps): JSX.Element => { + const labelClass = clsx( + 'flex text-body3 font-medium', + layout === 'col' ? 'flex-col' : 'flex-row', + className + ) + const labelTextClass = clsx( + 'flex items-center', + layout === 'col' ? 'mb-4' : '' + ) + + return ( + + ) +} diff --git a/src/stories/common/label/Label.stories.tsx b/src/stories/common/label/Label.stories.tsx new file mode 100644 index 0000000..de732da --- /dev/null +++ b/src/stories/common/label/Label.stories.tsx @@ -0,0 +1,57 @@ +import { Meta, StoryObj } from '@storybook/react' + +import { TextInput } from '@/components/common/input/TextInput' +import { Label, LabelProps } from '@/components/common/label/Label' + +const meta: Meta = { + title: 'Common/Label/Label', + component: Label, + parameters: { + layout: 'centered', + }, + args: { + required: false, + labelText: '라벨 제목', + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + labelText: '이름', + required: false, + }, + render: (args: LabelProps) => ( + + ), +} + +export const RequiredLabel: Story = { + args: { + labelText: '이메일', + required: true, + }, + render: (args: LabelProps) => ( + + ), +} + +export const RowRayout: Story = { + args: { + labelText: '이메일', + required: true, + layout: 'row', + }, + render: (args: LabelProps) => ( + + ), +}