[Feat] FormInput 수정 & 로그인, 회원가입 폼 컴포넌트 제작

[yoorli]

📝 변경 사항

💡 components/shared/form-input/index.tsx

• PasswordToggleButton 구조 수정
• FormInput 구조 수정
  • props 변경 : type = 'text', id는 inputprops로만 받음
  • required : 기본 true, 기본 prop으로 주면 input도 같이 바뀜(label의 reauired랑 동일하게 됨)

사용 방법

const Example = () => {
return (
  <FormInput
    labelName='이메일'
    hintMessage='올바른 이메일 형식을 입력해주세요.'
    inputProps={{
      type: 'email',
      placeholder: '[email protected]',
    }}
  />
);

💡 components/shared/search-bar/index.tsx

• value/onChange props 유무에 따라 제어/비제어 패턴 모두 지원하도록 로직 수정

  사용 방법 - 비제어

  const SearchPage = () => {
  const handleSearch = (keyword: string) => {
    // 검색 요청
  };
  
  return (
    <SearchBar
      placeholder='검색어를 입력하세요'
      onSearch={handleSearch}
    />
  );

  사용 방법 - 제어

  const SearchPage = () => {
  const [keyword, setKeyword] = useState('');
  
  const handleSearch = (value: string) => {
    // 검색 요청
  };
  
  return (
    <SearchBar
      value={keyword}
      onChange={setKeyword}
      onSearch={handleSearch}
      placeholder='검색어를 입력하세요'
    />
  );

💡 components/pages/login/login-form/index.tsx
💡 components/pages/signup/signup-form/index.tsx
💡 lib/schema/auth.ts

• LoginForm, SignupForm 컴포넌트 신규 추가
• loginSchema, signupSchema 스키마 정의 및 폼 연동

---

🔗 관련 이슈

Closes #43

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch yoolri-feat/input

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎨 Storybook Report

✨ Story가 변경되었습니다

Chromatic에서 비주얼 변경사항을 확인하세요.

Status	Storybook	Build Log	Updated (UTC)
✅ Ready	View Storybook	View Build	2025-12-05 04:20:16

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-05 04:19:20

📉 #85을 main에 병합하면 coverage가 5.32% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main      #85       +/-   ##
===========================================
- Coverage   38.76%   33.44%    -5.32%     
===========================================
  Files          75       80        +5     
  Lines        2079     2410      +331     
  Branches      157      162        +5     
===========================================
  Hits          806      806         0     
+ Misses       1273     1604      +331     

영향받은 파일

✅ 이 PR로 영향받은 파일이 없습니다

수정된 모든 파일이 현재 coverage를 유지했습니다.

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-05 04:20:25

[Chiman2937]

수고하셨습니다!!

[Chiman2937]

getHintMessage가 에러메시지를 처리하는 유틸함수니까, 더 간단하게 이렇게 처리할 수 있을 것 같아요

Suggested change

	const {
	meta: { errors, isTouched },
	} = field.state;
	const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
	const hintMessage = getHintMessage(field);

그러면 아래처럼 isTouched랑 errors를 전부 field에서 뽑을 수 있어서 JSX 리턴문을 좀 더 간소화 시킬 수 있게 돼요!

const getHintMessage = (field: AnyFieldAPI) => {
  const errors = field.state.meta.errors
  ...
};

[Chiman2937]

오 void라는게 있는지 몰랐네요 좋은 것 같습니다

[Chiman2937]

기본 primary 버튼에 border 없었던 것 같은데 맞다면 border-none은 지우면 좋을 것 같습니다!

[yoorli]

이상하게 제 화면에서 border이 생겨있더라구요,,,, 원인을 찾는 중이니까 찾아내면 바로 수정하겠습니다!