refactor:비제어 컴포넌트로 변경

[seongihun]

🎯 작업 내용

• 구현한 기능 설명
  리베이스 이후 Input 을 사용하는 컴포넌트의 import문을 수정 하였습니다

✅ 체크리스트

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

📸 스크린샷 (선택사항)

💬 추가 설명

[seongihun]

/gemini-code-assist 코드 리뷰

[gemini-code-assist]

Code Review

이번 PR은 제어 컴포넌트를 비제어 컴포넌트로 리팩터링하여 useRef를 사용하도록 변경하는 작업을 주로 다루고 있습니다. 전반적으로 코드의 의도가 명확하며, 불필요한 useExperienceForm 훅을 제거하여 컴포넌트 구조를 간소화한 점이 좋습니다.

몇 가지 개선점을 제안드립니다.

1. 가격 입력 처리 시 NaN이 될 수 있는 경우를 방지하여 데이터의 정확성을 높였습니다.
2. 폼 접근성 향상을 위해 <label>과 <input>을 연결하는 방법을 제안했습니다.

자세한 내용은 각 파일의 주석을 확인해주세요.

[gemini-code-assist]

사용자가 가격 입력 필드에 숫자가 아닌 값(예: 'abc')을 입력하면 Number() 함수가 NaN을 반환할 수 있습니다. NaN은 number 타입이지만, 유효한 가격 값은 아니므로 서버로 전송되기 전에 처리해주는 것이 좋습니다. || 0을 사용하여 NaN일 경우 0으로 대체하도록 수정하는 것을 제안합니다.

Suggested change

	price: Number(priceRef.current?.value ?? 0),
	price: Number(priceRef.current?.value) || 0,

[gemini-code-assist]

웹 접근성을 향상시키기 위해 <label>을 해당 <input> 요소와 연결하는 것이 좋습니다. <label>에 htmlFor 속성을, <input>에 id 속성을 추가하여 연결할 수 있습니다. 이렇게 하면 스크린 리더 사용자가 각 입력 필드의 목적을 더 쉽게 파악할 수 있습니다. 이 패턴을 폼 내의 모든 레이블-입력 쌍에 적용해주세요.

추가적으로, className="border p-3 rounded-xl"이 여러 입력 필드에서 반복되고 있습니다. 코드 유지보수성을 높이기 위해 이 클래스명을 상수로 추출하여 재사용하는 것을 고려해볼 수 있습니다.

Suggested change

	<label>제목</label>
	<Input
	<input
	name="title"
	value={values.title}
	onChange={handleChange}
	defaultValue={initialValues?.title}
	placeholder="제목을 입력해 주세요"
	ref={titleRef}
	className="border p-3 rounded-xl"
	/>
	<label htmlFor="title">제목</label>
	<input
	id="title"
	name="title"
	defaultValue={initialValues?.title}
	placeholder="제목을 입력해 주세요"
	ref={titleRef}
	className="border p-3 rounded-xl"
	/>