Refactor : input components

components/input/Input.tsx

@@ -1,8 +1,19 @@
 import { ComponentProps } from "react";
 import clsx from "clsx";
 
-export function Input({ className, ...props }: ComponentProps<"input">) {
+type InputProps = ComponentProps<"input"> & {
+  inputRef?: React.Ref<HTMLInputElement>;
+};
+
+export function Input({ className, inputRef, ...props }: InputProps) {
   return (
-    <input {...props} className={clsx("border rounded px-3 py-2", className)} />
+    <input
+      ref={inputRef}
+      {...props}
+      className={clsx(
+        "h-[54px] w-full rounded-[16px] border px-[20px] text-sm outline-none",
+        className
+      )}
+    />
   );
 }

components/input/inputfield.tsx

@@ -1,29 +1,44 @@
-import { ReactNode } from "react";
-import { Input } from "./Input";
+import { useId, ReactNode } from "react";
 import clsx from "clsx";
+import { Input } from "./Input";
 
-interface InputFieldProps {
+interface InputFieldProps extends React.ComponentProps<typeof Input> {
   label?: string;
   error?: string;
   helperText?: string;
-  inputProps?: React.ComponentProps<typeof Input>;
   children?: ReactNode;
-  className?: string;
 }
 
 export function InputField({
   label,
   error,
   helperText,
-  inputProps,
   children,
   className,
+  ...props
 }: InputFieldProps) {
+  const id = useId();
+
   return (
-    <div className={clsx("flex flex-col gap-1", className)}>
-      {label && <label className="text-sm font-medium">{label}</label>}
+    <div className="flex w-full flex-col gap-[10px]">
+      {label && (
+        <label htmlFor={id} className="text-[16px] font-medium text-gray-900">
+          {label}
+        </label>
+      )}
 
-      {children ?? <Input {...inputProps} />}
+      {children ?? (
+        <Input
+          id={id}
+          {...props}
+          className={clsx(
+            error
+              ? "border-red-500 focus:ring-red-500"
+              : "border-gray-200 focus:ring-primary-500",
+            className
+          )}
+        />
+      )}
 
       {error ? (
         <p className="text-xs text-red-500">{error}</p>

components/input/passwordinput.tsx

@@ -4,30 +4,31 @@ import { useState } from "react";
 import Image from "next/image";
 import { Input } from "./Input";
 import type { ComponentProps } from "react";
+import clsx from "clsx";
 
-interface PasswordInputProps extends Omit<ComponentProps<"input">, "type"> {
-  className?: string;
-}
+type PasswordInputProps = ComponentProps<typeof Input>;
 
 export function PasswordInput({ className, ...props }: PasswordInputProps) {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div className="relative">
+    <div className="relative w-full">
       <Input
         {...props}
         type={visible ? "text" : "password"}
-        className={`pr-10 ${className ?? ""}`}
+        className={clsx("pr-12", className)}
       />
 
       <button
         type="button"
+        aria-label={visible ? "비밀번호 숨기기" : "비밀번호 표시"}
+        aria-pressed={visible}
         onClick={() => setVisible((v) => !v)}
-        className="absolute right-3 top-1/2 -translate-y-1/2"
+        className="absolute right-4 top-1/2 -translate-y-1/2 focus:outline-none focus:ring-2 focus:ring-primary-500"
       >
         <Image
           src={visible ? "/icon_active_on.svg" : "/icon_active_off.svg"}
-          alt={visible ? "비밀번호 숨기기" : "비밀번호 보기"}
+          alt={visible ? "비밀번호 숨기기 아이콘" : "비밀번호 보기 아이콘"}
           width={20}
           height={20}
         />

components/input/searchinput.tsx

@@ -1,17 +1,16 @@
 import Image from "next/image";
 import { Input } from "./Input";
 import type { ComponentProps } from "react";
+import clsx from "clsx";
 
-interface SearchInputProps extends ComponentProps<"input"> {
-  className?: string;
-}
-
-export function SearchInput({ className, ...props }: SearchInputProps) {
+export function SearchInput({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) {
   return (
-    <div className="relative">
-      <Input {...props} className={`pl-10 ${className ?? ""}`} />
-
-      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2">
+    <div className="relative w-full">
+      <Input {...props} className={clsx("pl-[44px]", className)} />
+      <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2">
         <Image src="/icon_search.svg" alt="검색" width={20} height={20} />
       </span>
     </div>