[Feat] Label 컴포넌트 구현 (#61)

* feat(packages/ui): Label 컴포넌트 구현

* chore(packages/ui): Label 컴포넌트 예시

apps/web/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon, Toast, Text, Badge, Checkbox } from '@repo/ui';
+import { Icon, Toast, Text, Badge, Checkbox, Label } from '@repo/ui';
 import { overlay } from 'overlay-kit';
 
 export default function Home() {
@@ -60,6 +60,11 @@ export default function Home() {
       <Checkbox label="체크박스" />
       <Checkbox label="체크박스" disabled checked />
       <Checkbox label="체크박스" disabled />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <Label variant="default">어떤 글을 생성할까요?</Label>
+        <Label variant="required">어떤 글을 생성할까요?</Label>
+        <Label variant="optional">어떤 글을 생성할까요?</Label>
+      </div>
     </div>
   );
 }

packages/ui/src/components/Label/Label.css.ts

@@ -0,0 +1,17 @@
+import { vars } from '@repo/theme';
+import { style } from '@vanilla-extract/css';
+
+export const labelStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: vars.typography.fontSize[20],
+  fontWeight: vars.typography.fontWeight.semibold,
+});
+
+export const requiredStyle = style({
+  gap: vars.space[4],
+});
+
+export const optionalStyle = style({
+  gap: vars.space[8],
+});

packages/ui/src/components/Label/Label.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, LabelHTMLAttributes } from 'react';
+import { Text } from '../Text/Text';
+import { labelStyle, requiredStyle, optionalStyle } from './Label.css';
+
+export type LabelVariant = 'default' | 'required' | 'optional';
+
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+  variant?: LabelVariant;
+};
+
+const LABEL_CLASS = {
+  default: undefined,
+  required: requiredStyle,
+  optional: optionalStyle,
+} as const;
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ children, variant = 'default', className, ...props }, ref) => {
+    return (
+      <label
+        ref={ref}
+        className={`${labelStyle} ${LABEL_CLASS[variant]} ${className}`}
+        aria-required={variant === 'required'}
+        {...props}
+      >
+        {children}
+        {variant === 'required' && (
+          <Text
+            as="span"
+            fontSize={20}
+            fontWeight="semibold"
+            color="primary600"
+          >
+            *
+          </Text>
+        )}
+        {variant === 'optional' && (
+          <Text as="span" fontSize={16} fontWeight="semibold" color="grey300">
+            선택
+          </Text>
+        )}
+      </label>
+    );
+  }
+);
+
+Label.displayName = 'Label';

packages/ui/src/components/index.ts

@@ -10,3 +10,5 @@ export { Badge } from './Badge/Badge';
 export type { BadgeProps } from './Badge/Badge';
 export { Checkbox } from './Checkbox/Checkbox';
 export type { CheckboxProps } from './Checkbox/Checkbox';
+export { Label } from './Label/Label';
+export type { LabelProps, LabelVariant } from './Label/Label';