From f8644f5bd738edf2013097106a1f3bb83bc72983 Mon Sep 17 00:00:00 2001
From: ChanLee_KR <cl700120@gmail.com>
Date: Wed, 28 Aug 2024 10:24:37 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20=EC=9D=B8?=
 =?UTF-8?q?=ED=92=8B=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9=20(#ATR-603)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../packages/core/src/components/index.scss   |  1 +
 .../packages/core/src/components/index.ts     |  1 +
 .../input-description/InputDescription.tsx    | 22 ++++++++++
 .../components/input-description/_index.scss  | 42 +++++++++++++++++++
 .../src/components/input-description/index.ts |  1 +
 .../core/src/components/label/Label.tsx       | 17 +++++---
 .../core/src/components/select/Select.tsx     | 11 +++--
 .../core/src/components/select/_index.scss    | 41 ++----------------
 .../src/components/text-input/TextInput.tsx   | 11 +++--
 .../src/components/text-input/_index.scss     | 38 -----------------
 10 files changed, 91 insertions(+), 94 deletions(-)
 create mode 100644 packages/design-system/packages/core/src/components/input-description/InputDescription.tsx
 create mode 100644 packages/design-system/packages/core/src/components/input-description/_index.scss
 create mode 100644 packages/design-system/packages/core/src/components/input-description/index.ts

diff --git a/packages/design-system/packages/core/src/components/index.scss b/packages/design-system/packages/core/src/components/index.scss
index db9e0211..16fcc3ac 100644
--- 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
index ddd76a52..c1988e8d 100644
--- 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
new file mode 100644
index 00000000..4b85e928
--- /dev/null
+++ 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
new file mode 100644
index 00000000..34627ab0
--- /dev/null
+++ 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
new file mode 100644
index 00000000..c0a3eb37
--- /dev/null
+++ 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
index dd29a0b3..324123d8 100644
--- 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
index 03e6aaf9..ea210329 100644
--- 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
index 666b3fd7..e3408f7b 100644
--- 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
index 4a3a50a9..5cc04a63 100644
--- 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
index 5047c648..42b05f7d 100644
--- 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,12 +106,6 @@
         border-color: variable.$ds-green-300;
       }
     }
-    & > p {
-      color: variable.$ds-green-400;
-      .dark & {
-        color: variable.$ds-green-300;
-      }
-    }
   }
 
   &--size-lg {
@@ -148,8 +113,5 @@
       height: 3rem;
       font-size: variable.$ds-font-size-400;
     }
-    & > p {
-      margin: 1rem 0px 0px;
-    }
   }
 }