FC-DEV-FinalProject / FinalProject_2VEN_FE

데브코스 파이널프로젝트 시스메틱 2조 이븐한조 FE 리포지토리
0 stars 1 forks source link

[Feat] 비밀번호 찾기 UI 기능 구현 (#128) #140

Closed clara-shin closed 1 week ago

clara-shin commented 1 week ago

🚀 풀 리퀘스트 제안

📋 작업 내용

🔧 변경 사항

주요 변경 사항을 요약해 주세요.

📸 스크린샷 (선택 사항)

https://github.com/user-attachments/assets/1378424b-bc33-4f46-8808-cb4af544d23a

📄 기타

추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

Sourcery에 의한 요약

이메일 인증 및 코드 검증을 포함한 비밀번호 복구 UI를 구현하고, 오류 처리 및 카운트다운 타이머 기능을 추가합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Implement the password recovery UI, including email verification and code validation, with error handling and countdown timer functionality. New Features: - Implement password recovery UI with email verification and code validation. Enhancements: - Add email and verification code validation functions to improve input handling.
sourcery-ai[bot] commented 1 week ago

리뷰어 가이드 by Sourcery

이 PR은 이메일 인증 및 코드 검증에 중점을 둔 비밀번호 복구 UI 기능을 구현합니다. 구현에는 타이머 기반 인증 코드 입력 시스템, 폼 검증 및 오류 처리가 포함됩니다. 변경 사항은 주로 비밀번호 복구 흐름을 위한 상태 관리, 검증 로직 및 UI 피드백 추가와 관련이 있습니다.

변경 사항이 간단하고 시각적 표현이 필요하지 않으므로 다이어그램이 생성되지 않았습니다.

파일 수준 변경 사항

변경 사항 세부 사항 파일
이메일 인증 흐름을 포함한 비밀번호 복구 페이지 구현
  • 오류 메시지가 포함된 이메일 입력 검증 추가
  • 인증 코드 요청 및 검증 로직 구현
  • 인증 상태 추적을 위한 상태 관리 추가
  • 인증 성공 시 비밀번호 재설정 페이지로의 네비게이션 통합
src/pages/auth/find/FindPasswordPage.tsx
타이머 기능이 있는 인증 입력 컴포넌트 강화
  • 시각적 피드백이 있는 카운트다운 타이머 추가
  • 타이머 재설정 및 비활성화 기능 구현
  • 시간이 부족할 때 타이머 색상 변경 추가
  • 입력 필드의 비활성 상태 처리 추가
src/components/page/signup/VerificationInput.tsx
이메일 및 인증 코드에 대한 검증 유틸리티 추가
  • 이메일 형식 검증 함수 생성
  • 인증 코드 형식 검증 함수 추가
src/utils/validation.ts

관련 문제일 가능성 있음


팁 및 명령어 #### Sourcery와 상호작용하기 - **새로운 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답글을 달아 토론을 계속합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에서 이슈를 생성하도록 Sourcery에 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령을 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화하기 [대시보드](https://app.sourcery.ai)에 액세스하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하세요. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하세요. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.
Original review guide in English ## Reviewer's Guide by Sourcery This PR implements the password recovery UI functionality, focusing on email verification and code validation. The implementation includes a timer-based verification code input system, form validation, and error handling. The changes primarily involve adding state management, validation logic, and UI feedback for the password recovery flow. _No diagrams generated as the changes look simple and do not need a visual representation._ ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented password recovery page with email verification flow |
  • Added email input validation with error messaging
  • Implemented verification code request and validation logic
  • Added state management for tracking verification status
  • Integrated navigation to password reset page on successful verification
| `src/pages/auth/find/FindPasswordPage.tsx` | | Enhanced verification input component with timer functionality |
  • Added countdown timer with visual feedback
  • Implemented timer reset and disable functionality
  • Added color change for timer when time is running low
  • Added disabled state handling for the input field
| `src/components/page/signup/VerificationInput.tsx` | | Added validation utilities for email and verification code |
  • Created email format validation function
  • Added verification code format validation function
| `src/utils/validation.ts` | ### Possibly linked issues - **#128**: The PR implements the password recovery UI as described in the issue, including email verification and error handling. - **#128**: The PR implements email verification and validation, directly addressing the issue's requirements. ---
Tips and commands #### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).
netlify[bot] commented 1 week ago

Deploy Preview for sysmetics ready!

Name Link
Latest commit 8663ec410af2ace95108aa0098e0c62015db8b9a
Latest deploy log https://app.netlify.com/sites/sysmetics/deploys/673af9c1b1ff1c00087488d0
Deploy Preview https://deploy-preview-140--sysmetics.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

clara-shin commented 1 week ago

테스트 용으로 8초 세팅했는데, 현재 공통으로 VerificationInput을 사용하고 있는 AdminVerifyPage에서 에러가 날 거라서 그 부분 fix하고 3분으로 세팅하고, 추후 리팩토링을 통해 이메일 검증로직을 커스텀 훅으로 분리할 예정입니다!