feat(design-system): Input 컴포넌트 required 설정 시 시각적 표시 추가 (#237)

* feat(design-system): change to make a separate display if the property of the `Input` is `required`

* style(design-system): change required `*` symbol left margin size `ml-1` -> `ml-0.5`

packages/design-system/src/Input/Input.tsx

@@ -8,6 +8,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   labelClassName?: string;
   inputClassName?: string;
   messageClassName?: string;
+  required?: boolean;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -20,6 +21,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       labelClassName,
       inputClassName,
       messageClassName,
+      required,
       ...rest
     },
     ref,
@@ -32,6 +34,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             className={cn('mb-1 ml-1 text-xs', labelClassName)}
           >
             {label}
+            {required && (
+              <span className="font-bol ml-0.5 text-red-400">*</span>
+            )}
           </label>
         )}
         <input
@@ -41,6 +46,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             'outline-clab-primary rounded-lg border p-2',
             inputClassName,
           )}
+          required={required}
           {...rest}
         />
         {message && (