[feat] #206 비밀번호 재설정 페이지 구현 / 요청에 따른 응답 처리 분기 / 코드 리뷰 반영

[jjanie00]

🔗 이슈 번호

Closes #206

📋 작업 사항

비밀번호 재설정 폼 제출 및 API 호출

• 비밀번호 재설정 폼 제출 : useSearchParams 로 토큰을 가져와, patchResetPassword( ) 호출
• 요청 성공 : 성공 토스트 메시지 렌더링 및 /login 페이지로 라우팅 처리
• 요청 실패 : 실패 토스트 메시지 렌더링 및 에러 로그 출력
  • 비밀번호 재설정 링크카 만료되었습니다. 다시 요청해주세요. 가 출력되도록 함
• 폼 제출 시점에 formErrors 객체 초기화로 기존의 에러 메시지가 남지 않도록 안전 장치 추가

Suspense 도입으로 CSR bailout 빌드 에러 해결

상위 페이지 컴포넌트에서 props 로 내려주는 방법 사용 시, useSearchParams 를 페이지 컴포넌트에서 사용해야 하기 때문에 클라이언트 컴포넌트로 만들어야 함. 이는 Next.js 의 공식 설계 철학 과 위배되므로 Suspense 를 도입함.

• Suspense 로 비동기 컴포넌트 (폼) 을 감싸 CSR bailout 빌드 에러 해결
• fallback 으로 빈 페이지가 렌더링 되지 않도록 조정
• token 이 null 인 경우에 대해 방어로직 추가 : 유효하지 않은 링크입니다. 다시 시도해주세요. 토스트 메시지

이전 코드 리뷰 반영

• 코드 리뷰 반영 : 비밀번호 재설정 모달 api 요청 실패 시, /signup 라우팅 삭제
  (가입된 사용자가 오타를 내는 상황 고려)
• 디버깅용 콘솔 출력 삭제

기타

• API 함수 주석 개선 : pathResetPassword, patchPassword

📷 스크린샷

2025-05-22.5.50.19.mov

📢 공유 사항

📚 참고 자료

• Missing Suspense boundary with useSearchParams

[github-actions]

✅ Preview Deployment
🔗 https://coworkers-jvreo9ibj-hyeonjirohs-projects.vercel.app

[MINJI121]

고생하셨습니다 해명님~!!

[MySoupRice]

수고하셨습니다!