refactor: 공통 인풋 컴포넌트 분리 및 적용 (#ATR-603)

Atractorrr · Aug 28, 2024 · f8644f5 · f8644f5
1 parent 5efc3fa
commit f8644f5
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 94 deletions.
diff --git a/packages/design-system/packages/core/src/components/index.scss b/packages/design-system/packages/core/src/components/index.scss
@@ -8,3 +8,4 @@
 @import 'label';
 @import 'select';
 @import 'dimmed';
+@import 'input-description';
diff --git a/packages/design-system/packages/core/src/components/index.ts b/packages/design-system/packages/core/src/components/index.ts
@@ -10,3 +10,4 @@ export * from './search-input'
 export * from './label'
 export * from './select'
 export * from './dimmed'
+export * from './input-description'
diff --git a/packages/design-system/packages/core/src/components/input-description/InputDescription.tsx b/packages/design-system/packages/core/src/components/input-description/InputDescription.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { cn } from '@attraction/utils'
+
+interface InputDescriptionProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLParagraphElement>,
+    HTMLParagraphElement
+  > {}
+
+const InputDescription = React.forwardRef<
+  HTMLParagraphElement,
+  InputDescriptionProps
+>(({ className, ...props }, ref) => {
+  if (!props.children) {
+    return null
+  }
+  return (
+    <p ref={ref} className={cn('ds-input-description', className)} {...props} />
+  )
+})
+
+export default InputDescription
diff --git a/packages/design-system/packages/core/src/components/input-description/_index.scss b/packages/design-system/packages/core/src/components/input-description/_index.scss
@@ -0,0 +1,42 @@
+@use '../../token/variable';
+
+.ds-input-description {
+  display: block;
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  margin: 0px;
+  margin-top: 0.75rem;
+  padding: 0px 0.25rem;
+  font-size: variable.$ds-font-size-300;
+  font-weight: variable.$ds-font-weight-regular;
+  color: variable.$ds-gray-500;
+  line-height: variable.$ds-leading-normal;
+  word-break: keep-all;
+  .dark & {
+    color: variable.$ds-gray-400;
+  }
+
+  *[class$='--size-lg'] & {
+    margin-top: 1rem;
+  }
+
+  *[class$='--danger'] & {
+    color: variable.$ds-red-400;
+    .dark & {
+      color: variable.$ds-red-300;
+    }
+  }
+  *[class$='--warn'] & {
+    color: variable.$ds-yellow-400;
+    .dark & {
+      color: variable.$ds-yellow-300;
+    }
+  }
+  *[class$='--success'] & {
+    color: variable.$ds-green-400;
+    .dark & {
+      color: variable.$ds-green-300;
+    }
+  }
+}
diff --git a/packages/design-system/packages/core/src/components/input-description/index.ts b/packages/design-system/packages/core/src/components/input-description/index.ts
@@ -0,0 +1 @@
+export { default as InputDescription } from './InputDescription'
diff --git a/packages/design-system/packages/core/src/components/label/Label.tsx b/packages/design-system/packages/core/src/components/label/Label.tsx
@@ -10,12 +10,17 @@ interface LabelProps
 }
 
 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>
-  ),
+  ({ required, className, children, ...props }, ref) => {
+    if (!children) {
+      return null
+    }
+    return (
+      <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/select/Select.tsx b/packages/design-system/packages/core/src/components/select/Select.tsx
@@ -12,6 +12,7 @@ import { forwardRefWithGeneric } from '../../core'
 import { Button } from '../button'
 import { Label } from '../label'
 import { Dimmed } from '../dimmed'
+import { InputDescription } from '../input-description'
 import { SelectContext, useSelect } from './Select.context'
 import type {
   OptionProps,
@@ -215,13 +216,11 @@ function SelectContainer<T extends string>(
         className,
       )}
       style={style}>
-      {label && (
-        <Label htmlFor={props.id} required={props.required}>
-          {label}
-        </Label>
-      )}
+      <Label htmlFor={props.id} required={props.required}>
+        {label}
+      </Label>
       <ForwardedSelect ref={inputRef} {...props} />
-      {description && <p>{description}</p>}
+      <InputDescription>{description}</InputDescription>
     </div>
   )
 }

diff --git a/packages/design-system/packages/core/src/components/select/_index.scss b/packages/design-system/packages/core/src/components/select/_index.scss
@@ -92,23 +92,6 @@
     }
   }
 
-  & > p {
-    display: block;
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    margin: 0.75rem 0px 0px;
-    padding: 0px 0.25rem;
-    font-size: variable.$ds-font-size-300;
-    font-weight: variable.$ds-font-weight-regular;
-    color: variable.$ds-gray-500;
-    line-height: variable.$ds-leading-normal;
-    word-break: keep-all;
-    .dark & {
-      color: variable.$ds-gray-400;
-    }
-  }
-
   &__option {
     position: fixed;
     z-index: 99999;
@@ -122,12 +105,14 @@
       top: var(--ds-select-top);
       left: var(--ds-select-left);
       width: var(--ds-select-width);
+      max-height: 48vh;
       box-sizing: border-box;
       padding: 0.25rem;
       margin: 0px;
       border: 1px solid variable.$ds-gray-100;
       border-radius: 0.5rem;
       list-style: none;
+      overflow-y: auto;
       background-color: variable.$ds-gray-000;
       .dark & {
         border-color: variable.$ds-gray-700;
@@ -167,6 +152,7 @@
       bottom: auto;
       left: 50%;
       right: auto;
+      max-height: 72vh;
       transform: translate(-50%, -50%);
     }
   }
@@ -182,12 +168,6 @@
         border-color: variable.$ds-red-300;
       }
     }
-    & > p {
-      color: variable.$ds-red-400;
-      .dark & {
-        color: variable.$ds-red-300;
-      }
-    }
   }
   &--warn {
     & .ds-select__input > input {
@@ -198,12 +178,6 @@
         border-color: variable.$ds-yellow-300;
       }
     }
-    & > p {
-      color: variable.$ds-yellow-400;
-      .dark & {
-        color: variable.$ds-yellow-300;
-      }
-    }
   }
   &--success {
     & .ds-select__input > input {
@@ -214,12 +188,6 @@
         border-color: variable.$ds-green-300;
       }
     }
-    & > p {
-      color: variable.$ds-green-400;
-      .dark & {
-        color: variable.$ds-green-300;
-      }
-    }
   }
 
   &--round-xs {
@@ -250,8 +218,5 @@
         font-size: variable.$ds-font-size-400;
       }
     }
-    & > p {
-      margin: 1rem 0px 0px;
-    }
   }
 }
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,6 +1,7 @@
 import React from 'react'
 import { cn } from '@attraction/utils'
 import { Label } from '../label'
+import { InputDescription } from '../input-description'
 import { textInputVariants, variants } from './TextInput.style'
 
 type TextInputVariant = typeof variants
@@ -47,13 +48,11 @@ const TextInput = React.forwardRef<HTMLInputElement, TextProps>(
         className,
       )}
       style={style}>
-      {label && (
-        <Label htmlFor={props.id} required={props.required}>
-          {label}
-        </Label>
-      )}
+      <Label htmlFor={props.id} required={props.required}>
+        {label}
+      </Label>
       <input ref={ref} type="text" {...props} />
-      {description && <p>{description}</p>}
+      <InputDescription>{description}</InputDescription>
     </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
@@ -75,23 +75,6 @@
     border-radius: 9999px;
   }
 
-  & > p {
-    display: block;
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    margin: 0.75rem 0px 0px;
-    padding: 0px 0.25rem;
-    font-size: variable.$ds-font-size-300;
-    font-weight: variable.$ds-font-weight-regular;
-    color: variable.$ds-gray-500;
-    line-height: variable.$ds-leading-normal;
-    word-break: keep-all;
-    .dark & {
-      color: variable.$ds-gray-400;
-    }
-  }
-
   &--danger {
     & > input {
       &,
@@ -103,12 +86,6 @@
         border-color: variable.$ds-red-300;
       }
     }
-    & > p {
-      color: variable.$ds-red-400;
-      .dark & {
-        color: variable.$ds-red-300;
-      }
-    }
   }
   &--warn {
     & > input {
@@ -119,12 +96,6 @@
         border-color: variable.$ds-yellow-300;
       }
     }
-    & > p {
-      color: variable.$ds-yellow-400;
-      .dark & {
-        color: variable.$ds-yellow-300;
-      }
-    }
   }
   &--success {
     & > input {
@@ -135,21 +106,12 @@
         border-color: variable.$ds-green-300;
       }
     }
-    & > p {
-      color: variable.$ds-green-400;
-      .dark & {
-        color: variable.$ds-green-300;
-      }
-    }
   }
 
   &--size-lg {
     & > input {
       height: 3rem;
       font-size: variable.$ds-font-size-400;
     }
-    & > p {
-      margin: 1rem 0px 0px;
-    }
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as InputDescription } from './InputDescription'