[#47] ✨ 공통 컴포넌트 Label 구현

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<HTMLInputElement>),
             disabled
           )
         }

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<HTMLLabelElement> {
+  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 (
+    <label htmlFor={htmlFor} className={labelClass}>
+      <div className={labelTextClass}>
+        <span className='font-medium text-gray-600'>{labelText}</span>
+        {required && <Highlight>*</Highlight>}
+      </div>
+      {children}
+    </label>
+  )
+}

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<typeof Label> = {
+  title: 'Common/Label/Label',
+  component: Label,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    required: false,
+    labelText: '라벨 제목',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Label>
+
+export const Default: Story = {
+  args: {
+    labelText: '이름',
+    required: false,
+  },
+  render: (args: LabelProps) => (
+    <Label {...args}>
+      <TextInput placeholder='이름을 입력하세요' />
+    </Label>
+  ),
+}
+
+export const RequiredLabel: Story = {
+  args: {
+    labelText: '이메일',
+    required: true,
+  },
+  render: (args: LabelProps) => (
+    <Label {...args}>
+      <TextInput placeholder='이메일을 입력하세요' />
+    </Label>
+  ),
+}
+
+export const RowRayout: Story = {
+  args: {
+    labelText: '이메일',
+    required: true,
+    layout: 'row',
+  },
+  render: (args: LabelProps) => (
+    <Label {...args}>
+      <TextInput placeholder='이메일을 입력하세요' />
+    </Label>
+  ),
+}