refactor(#93): TextField를 PolymorphicComponent로 리팩토링

Author: wkdtnqls0506

src/components/ui/TextField/TextField.tsx

@@ -1,23 +1,42 @@
-import { type ComponentProps, useId } from "react";
+import { type ElementType, type ReactNode, useId } from "react";
+
+import { type PolymorphicComponentPropsWithRef } from "@/types/polymorphic.types";
 
 import * as styles from "./TextField.css";
 
 type Status = "inactive" | "negative";
 
-export type TextFieldProps = {
-  label?: string;
-  helperText?: string;
-  status?: Status;
-  rightAddon?: React.ReactNode;
-} & ComponentProps<"input">;
+export type TextFieldProps<T extends ElementType> =
+  PolymorphicComponentPropsWithRef<
+    T,
+    {
+      label?: string | ReactNode;
+      helperText?: string;
+      status?: Status;
+      rightAddon?: ReactNode;
+    }
+  >;
 
-export const TextField = ({
+/**
+ * TextField 컴포넌트
+ * @description 기본은 input이지만, as="textarea"처럼 다른 태그로도 변경 가능
+ * @example
+ * ```tsx
+ * <TextField placeholder="기본 input" />
+ * <TextField as="textarea" placeholder="textarea로 사용" rows={4} />
+ * ```
+ */
+export const TextField = <T extends ElementType = "input">({
+  as,
+  className,
   label,
   helperText,
   status = "inactive",
   rightAddon,
+  ref,
   ...props
-}: TextFieldProps) => {
+}: TextFieldProps<T>) => {
+  const Component = as || "input";
   const inputId = useId();
   const helperId = `${inputId}-helper`;
 
@@ -30,10 +49,11 @@ export const TextField = ({
       )}
 
       <div className={styles.inputWrapper}>
-        <input
+        <Component
           id={inputId}
-          className={styles.input({ status })}
-          aria-label={label}
+          ref={ref}
+          className={`${styles.input({ status })} ${className ?? ""}`}
+          aria-label={typeof label === "string" ? label : undefined}
           aria-describedby={helperText ? helperId : undefined}
           {...props}
         />

src/components/ui/TextField/index.ts

@@ -1 +1 @@
-export { TextField } from "./TextField";
+export { TextField, type TextFieldProps } from "./TextField";