Refactor : input components

[Greensod-96]

🎯 작업 내용

• 공통 Input 컴포넌트 구조 정리 및 리팩토링
• InputField, PasswordInput, SearchInput 역할 분리 및 책임 명확화
• 중복된 스타일 제거 및 공통 스타일 통합
• props 구조 단순화로 사용성 개선

✅ 체크리스트

• 코드 리뷰 요청
• 테스트 완료
• 문서 업데이트

📸 스크린샷 (선택사항)

(필요 시 화면 캡처 첨부)

💬 추가 설명

• 기존에 분산되어 있던 Input 관련 스타일과 로직을 공통 Input 컴포넌트 기준으로 정리했습니다.
• 불필요한 props(className 등)를 제거하고, 사용 시 일관된 인터페이스를 유지하도록 개선했습니다.
• 역할별 컴포넌트 분리를 통해 확장성과 유지보수성을 높였습니다.
• 향후 새로운 입력 컴포넌트 추가 시에도 일관된 구조로 확장 가능하도록 설계했습니다.

[seongihun]

/gemini-code-assist 코드 리뷰

[gemini-code-assist]

Code Review

전반적으로 Input 컴포넌트들을 리팩토링하여 구조를 정리하고 재사용성을 높인 좋은 PR입니다. 특히 InputField에서 useId를 사용하여 접근성을 개선하고, PasswordInput에 aria 속성을 추가한 점이 인상적입니다. 코드 전반에 걸쳐 일관된 구조를 적용하려는 노력이 돋보입니다.

다만, 몇 가지 개선점을 제안합니다.

• Input 컴포넌트는 forwardRef를 사용하도록 리팩토링하여 React의 표준 ref 전달 방식을 따르는 것이 좋습니다.
• InputField 컴포넌트가 children prop을 받을 때, id나 에러 스타일링과 같은 중요한 props를 전달하지 않는 심각한 버그가 있어 수정을 제안했습니다.
• PasswordInput의 아이콘 alt 텍스트를 제거하여 스크린 리더 사용자에게 중복된 정보가 읽히지 않도록 개선할 수 있습니다.

자세한 내용은 각 파일에 남긴 코멘트를 참고해주세요.

[gemini-code-assist]

children prop을 사용할 때, id, ...props 및 에러 상태에 따른 className이 children으로 전달되지 않아 label과 input의 연결이 끊어지고 에러 스타일링 및 react-hook-form 연동이 동작하지 않는 문제가 있습니다. 이는 접근성과 컴포넌트의 핵심 기능을 저해하는 심각한 문제입니다. React.cloneElement를 사용하여 children에게 필요한 props를 주입해야 합니다. 또한 import { useId, ReactNode, cloneElement } from "react";와 같이 cloneElement를 import해야 합니다.

      {children ? (
        cloneElement(children as React.ReactElement, {
          id,
          ...props,
          className: clsx(
            error
              ? "border-red-500 focus:ring-red-500"
              : "border-gray-200 focus:ring-primary-500",
            (children as React.ReactElement).props.className,
            className
          ),
        })
      ) : (
        <Input
          id={id}
          {...props}
          className={clsx(
            error
              ? "border-red-500 focus:ring-red-500"
              : "border-gray-200 focus:ring-primary-500",
            className
          )}
        />
      )}

[gemini-code-assist]

inputRef prop을 사용하는 대신 React.forwardRef를 사용하여 ref를 직접 전달하는 것이 더 일반적인 React 패턴이며, 컴포넌트의 재사용성과 가독성을 높입니다. 이렇게 하면 부모 컴포넌트에서 useRef를 사용할 때 더 직관적으로 ref를 전달할 수 있습니다. import { ComponentProps, forwardRef } from "react";와 같이 forwardRef를 import해야 합니다.

Suggested change

	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
	)}
	/>
	);
	}
	export const Input = forwardRef<HTMLInputElement, ComponentProps<"input">>(
	({ className, ...props }, ref) => {
	return (
	<input
	ref={ref}
	{...props}
	className={clsx(
	"h-[54px] w-full rounded-[16px] border px-[20px] text-sm outline-none",
	className
	)}
	/>
	);
	}
	);
	Input.displayName = "Input";

[gemini-code-assist]

버튼에 aria-label이 이미 "비밀번호 숨기기" / "비밀번호 표시"로 명확하게 설정되어 있으므로, 내부에 있는 아이콘은 스크린 리더 사용자에게 중복된 정보를 제공할 수 있습니다. 이런 경우, 장식용 이미지로 취급하여 alt 속성을 빈 문자열("")로 설정하는 것이 접근성 모범 사례입니다. 이렇게 하면 스크린 리더가 아이콘을 불필요하게 읽지 않게 됩니다.

Suggested change

	alt={visible ? "비밀번호 숨기기 아이콘" : "비밀번호 보기 아이콘"}
	alt=""