refactor: label 컴포넌트 추가 및 적용 (#ATR-603)

Atractorrr · Aug 27, 2024 · f6dfc9a · f6dfc9a
1 parent 3406424
commit f6dfc9a
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 49 deletions.
diff --git a/packages/design-system/packages/core/src/components/label/Label.tsx b/packages/design-system/packages/core/src/components/label/Label.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { cn } from '@attraction/utils'
+
+interface LabelProps
+  extends React.DetailedHTMLProps<
+    React.LabelHTMLAttributes<HTMLLabelElement>,
+    HTMLLabelElement
+  > {
+  required?: boolean
+}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ required, className, children, ...props }, ref) => (
+    <label ref={ref} className={cn('ds-label', className)} {...props}>
+      {children}
+      {required && <span className="ds-asterisk">*</span>}
+    </label>
+  ),
+)
+
+export default Label
diff --git a/packages/design-system/packages/core/src/components/label/_index.scss b/packages/design-system/packages/core/src/components/label/_index.scss
@@ -0,0 +1,38 @@
+@use '../../token/variable';
+
+.ds-label {
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0px;
+  margin-bottom: 0.25rem;
+  padding: 0px 0.25rem;
+  font-size: variable.$ds-font-size-200;
+  font-weight: variable.$ds-font-weight-medium;
+  color: variable.$ds-gray-500;
+  line-height: variable.$ds-leading-normal;
+  white-space: nowrap;
+  .dark & {
+    color: variable.$ds-gray-400;
+  }
+  & > .ds-asterisk {
+    position: absolute;
+    top: 0.125rem;
+    bottom: 0rem;
+    right: -0.25rem;
+    font-size: variable.$ds-font-size-300;
+    font-weight: variable.$ds-font-weight-medium;
+    color: variable.$ds-red-400;
+    line-height: variable.$ds-leading-tight;
+    white-space: inherit;
+    .dark & {
+      color: variable.$ds-red-300;
+    }
+  }
+
+  *[class$='--size-lg'] & {
+    margin-bottom: 0.5rem;
+  }
+}
diff --git a/packages/design-system/packages/core/src/components/label/index.ts b/packages/design-system/packages/core/src/components/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label'
diff --git a/packages/design-system/packages/core/src/components/text-input/TextInput.tsx b/packages/design-system/packages/core/src/components/text-input/TextInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { cn } from '@attraction/utils'
+import { Label } from '../label'
 import { textInputVariants, variants } from './TextInput.style'
 
 type TextInputVariant = typeof variants
@@ -24,15 +25,13 @@ const TextInput = React.forwardRef<HTMLInputElement, TextProps>(
   (
     {
       className,
-      id,
-      type,
+      style,
       label,
+      description,
       state,
       size,
       round,
       withBackground,
-      style,
-      description,
       ...props
     },
     ref,
@@ -49,12 +48,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextProps>(
       )}
       style={style}>
       {label && (
-        <label htmlFor={id}>
+        <Label htmlFor={props.id} required={props.required}>
           {label}
-          {props.required && <span>*</span>}
-        </label>
+        </Label>
       )}
-      <input ref={ref} id={id} type={type || 'text'} {...props} />
+      <input ref={ref} type="text" {...props} />
       {description && <p>{description}</p>}
     </div>
   ),

diff --git a/packages/design-system/packages/core/src/components/text-input/_index.scss b/packages/design-system/packages/core/src/components/text-input/_index.scss
@@ -4,41 +4,6 @@
   display: block;
   width: 100%;
   height: auto;
-  & + & {
-    margin: 1.25rem 0px 0px;
-  }
-
-  & > label {
-    position: relative;
-    display: inline-flex;
-    justify-content: flex-start;
-    align-items: center;
-    box-sizing: border-box;
-    margin: 0px 0px 0.25rem;
-    padding: 0px 0.25rem;
-    font-size: variable.$ds-font-size-200;
-    font-weight: variable.$ds-font-weight-medium;
-    color: variable.$ds-gray-500;
-    line-height: variable.$ds-leading-normal;
-    white-space: nowrap;
-    .dark & {
-      color: variable.$ds-gray-400;
-    }
-    & > span {
-      position: absolute;
-      top: 0.125rem;
-      bottom: 0rem;
-      right: -0.25rem;
-      font-size: variable.$ds-font-size-300;
-      font-weight: variable.$ds-font-weight-medium;
-      color: variable.$ds-red-400;
-      line-height: variable.$ds-leading-tight;
-      white-space: inherit;
-      .dark & {
-        color: variable.$ds-red-300;
-      }
-    }
-  }
 
   & > input {
     display: block;
@@ -179,12 +144,6 @@
   }
 
   &--size-lg {
-    & + & {
-      margin: 1.5rem 0px 0px;
-    }
-    & > label {
-      margin: 0px 0px 0.5rem;
-    }
     & > input {
       height: 3rem;
       font-size: variable.$ds-font-size-400;