FC-DEV-FinalProject / FinalProject_2VEN_FE

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

[Feat] 닉네임 중복검사 기능 구현 (msw) #172

Closed clara-shin closed 4 days ago

clara-shin commented 5 days ago

🚀 풀 리퀘스트 제안

📋 작업 내용

텍스트상수 등 추후 리팩토링 예정

🔧 변경 사항

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

📸 스크린샷 (선택 사항)

https://github.com/user-attachments/assets/40b35ece-fa28-4a5e-a5d9-56e0f6e05b42

📄 기타

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

Sourcery에 의한 요약

회원가입 양식에 별명 중복 확인 기능을 구현하여 사용자가 별명 사용 가능 여부를 확인할 수 있도록 합니다. 중복 확인 프로세스를 관리하기 위한 새로운 훅을 도입하고 이 기능을 지원하기 위해 모의 핸들러를 업데이트합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Implement nickname duplication check functionality in the signup form, enabling users to verify nickname availability. Introduce a new hook to manage the duplication check process and update mock handlers to support this feature. New Features: - Implement nickname duplication check feature in the signup form, allowing users to verify if a nickname is already in use before proceeding. Enhancements: - Add a new hook, useNicknameCheck, to handle nickname duplication checks using react-query.
sourcery-ai[bot] commented 5 days ago

리뷰어 가이드 by Sourcery

이 PR은 회원가입 양식에 별명 중복 확인 기능을 구현합니다. 구현에는 실시간 유효성 검사, 테스트를 위한 MSW(Mock Service Worker)와의 API 통합, 유효성 검사 결과에 대한 UI 피드백이 포함됩니다.

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

파일 수준 변경 사항

변경 사항 세부 사항 파일
회원가입 양식 컴포넌트에 별명 유효성 검사 기능 추가
  • 별명 입력 및 유효성 검사 메시지에 대한 상태 관리 추가
  • 실시간 입력 처리 및 유효성 검사 구현
  • 유효성 검사 상태(성공/오류 상태)에 대한 시각적 피드백 추가
  • API와의 별명 중복 확인 통합
  • 성공 메시지를 지우기 위한 blur 이벤트 처리 추가
src/components/page/signup/SignUpForm.tsx
별명 유효성 검사를 위한 새로운 API 엔드포인트 및 클라이언트 함수 생성
  • 별명 확인을 위한 새로운 API 엔드포인트 상수 추가
  • 별명 중복 확인을 위한 API 클라이언트 함수 구현
src/api/apiEndpoints.ts
src/api/auth.ts
별명 유효성 검사를 위한 모의 서비스 워커 핸들러 구현
  • 별명 확인 엔드포인트에 대한 모의 핸들러 생성
  • 현실적인 별명으로 모의 사용자 데이터 업데이트
  • 모의 사용자 데이터베이스에 대한 별명 확인 핸들러 추가
src/mocks/handlers/auth.handlers.ts
src/mocks/handlers/index.ts
별명 유효성 검사를 위한 커스텀 React Query 변이 훅 추가
  • 오류 처리가 포함된 useNicknameCheck 훅 생성
  • react-query를 사용한 변이 함수 구현
src/hooks/mutations/useNicknameCheck.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 a nickname duplication check feature in the signup form. The implementation includes real-time validation, API integration with MSW (Mock Service Worker) for testing, and UI feedback for the validation results. _No diagrams generated as the changes look simple and do not need a visual representation._ ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Added nickname validation functionality to the signup form component |
  • Added state management for nickname input and validation messages
  • Implemented real-time input handling and validation
  • Added visual feedback for validation status (success/error states)
  • Integrated nickname duplication check with API
  • Added blur event handling to clear success messages
| `src/components/page/signup/SignUpForm.tsx` | | Created new API endpoint and client function for nickname validation |
  • Added new API endpoint constant for nickname check
  • Implemented API client function for nickname duplication check
| `src/api/apiEndpoints.ts`
`src/api/auth.ts` | | Implemented mock service worker handler for nickname validation |
  • Created mock handler for nickname check endpoint
  • Updated mock user data with realistic nicknames
  • Added handler to check nickname against mock user database
| `src/mocks/handlers/auth.handlers.ts`
`src/mocks/handlers/index.ts` | | Added custom React Query mutation hook for nickname validation |
  • Created useNicknameCheck hook with error handling
  • Implemented mutation function using react-query
| `src/hooks/mutations/useNicknameCheck.ts` | ### Possibly linked issues - **#1**: The PR implements nickname duplication check using MSW API, directly addressing the issue. - **#1**: PR implements nickname duplication check 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 5 days ago

Deploy Preview for sysmetics ready!

Name Link
Latest commit 479b0e40aa027d7cb8ad21cc093d9ceb5c817973
Latest deploy log https://app.netlify.com/sites/sysmetics/deploys/673eddb6d8b9370008eda284
Deploy Preview https://deploy-preview-172--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.