refactor(member): select, textarea component UI 개선 (#86)

apps/member/src/components/common/Select/Select.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, forwardRef } from 'react';
 
 interface SelectOptions {
   name: string | number;
@@ -11,36 +11,33 @@ interface SelectProps extends ComponentPropsWithRef<'select'> {
   options: readonly SelectOptions[];
 }
 
-const Select = ({
-  options = [],
-  label,
-  className,
-  id,
-  ...rest
-}: SelectProps) => {
-  return (
-    <div className={classNames('flex flex-col h-full', className)}>
-      {label && (
-        <label htmlFor={id} className="mb-1 ml-1 text-xs">
-          {label}
-        </label>
-      )}
-      <select
-        id={id}
-        className="w-full p-2 border rounded-md grow disabled:bg-gray-50"
-        {...rest}
-      >
-        <option disabled value={'none'}>
-          미선택
-        </option>
-        {options.map(({ name, value }) => (
-          <option key={value} value={value}>
-            {name}
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options = [], label, className, id, ...rest }, ref) => {
+    return (
+      <div className={classNames('flex flex-col', className)}>
+        {label && (
+          <label htmlFor={id} className="mb-1 ml-1 text-xs">
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={id}
+          className="w-full p-2 border rounded-md grow disabled:bg-gray-50"
+          {...rest}
+        >
+          <option disabled value={'none'}>
+            미선택
           </option>
-        ))}
-      </select>
-    </div>
-  );
-};
+          {options.map(({ name, value }) => (
+            <option key={value} value={value}>
+              {name}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  },
+);
 
 export default Select;

apps/member/src/components/common/Textarea/Textarea.tsx

@@ -1,55 +1,49 @@
 import classNames from 'classnames';
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, forwardRef } from 'react';
 
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
-  id?: string;
   label?: string;
   value?: string;
-  className?: string;
 }
 
-const Textarea = ({
-  id,
-  label,
-  className,
-  value = '',
-  maxLength,
-  ...rest
-}: TextareaProps) => {
-  const hasValue = value.length > 0;
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ id, label, className, value = '', maxLength, ...rest }, ref) => {
+    const hasValue = value.length > 0;
 
-  return (
-    <div className="relative w-full">
-      {label && (
-        <label htmlFor={id} className="mb-1 ml-1 text-xs">
-          {label}
-        </label>
-      )}
-      <textarea
-        id={id}
-        className={classNames(
-          'border p-2 rounded-lg focus:bg-white outline-none transition-colors',
-          hasValue ? 'bg-white' : 'bg-gray-100',
-          className,
+    return (
+      <div className="relative flex w-full">
+        {label && (
+          <label htmlFor={id} className="mb-1 ml-1 text-xs">
+            {label}
+          </label>
         )}
-        value={value}
-        maxLength={maxLength}
-        {...rest}
-      />
-      {maxLength && (
-        <div
+        <textarea
+          id={id}
+          ref={ref}
           className={classNames(
-            'absolute bottom-4 right-2 bg-white text-xs px-2 rounded-lg boarder font-medium border',
-            {
-              'text-red-500': value.length >= maxLength,
-            },
+            'border p-2 rounded-lg focus:bg-white outline-none transition-colors',
+            hasValue ? 'bg-white' : 'bg-gray-100',
+            className,
           )}
-        >
-          {value.length}/{maxLength}
-        </div>
-      )}
-    </div>
-  );
-};
+          value={value}
+          maxLength={maxLength}
+          {...rest}
+        />
+        {maxLength && (
+          <div
+            className={classNames(
+              'absolute bottom-4 right-2 bg-white text-xs px-2 rounded-lg boarder font-medium border',
+              {
+                'text-red-500': value.length >= maxLength,
+              },
+            )}
+          >
+            {value.length}/{maxLength}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
 
 export default Textarea;