sourcery-ai[bot]
commented
3 days ago 리뷰어 가이드 by Sourcery
이 PR은 테스트를 위한 MSW(Mock Service Worker)를 사용한 로그인 기능을 구현합니다. 구현에는 사용자 인증, 폼 검증, 오류 처리 및 Zustand를 사용한 상태 관리가 포함됩니다. API 클라이언트는 환경 기반 구성을 통해 MSW와 실제 API 환경을 모두 지원하도록 수정되었습니다.
MSW를 사용한 로그인 프로세스의 시퀀스 다이어그램
sequenceDiagram
actor User
participant SignInPage
participant useSignin
participant apiClient
participant MSW
User->>SignInPage: 이메일과 비밀번호 입력
SignInPage->>useSignin: useSignin 훅 호출
useSignin->>apiClient: POST /api/members/login
alt MSW 활성화됨
apiClient->>MSW: 요청 가로채기
MSW-->>apiClient: 모의 응답
else MSW 비활성화됨
apiClient->>RealAPI: 요청 전달
RealAPI-->>apiClient: 실제 응답
end
apiClient-->>useSignin: 응답 반환
useSignin-->>SignInPage: 응답 처리
SignInPage-->>User: 성공 또는 오류 메시지 표시인증 유형에 대한 업데이트된 클래스 다이어그램
classDiagram
class User {
+int member_id
+string email
+string nickname
+UserRole role
}
class SigninRequest {
+string email
+string password
}
class SigninResponse {
+string status
+string message
+SigninData data
}
class SigninData {
+string token
+User user
}
class UserRole {
<<enumeration>>
INVESTOR
TRADER
ADMIN
}
SigninResponse --> SigninData
SigninData --> User
User --> UserRoleauthStore에 대한 업데이트된 클래스 다이어그램
classDiagram
class AuthStore {
+string token
+User user
+setAuth(token: string, user: User)
+signout()
}
class User {
+int member_id
+string email
+string nickname
+UserRole role
}
AuthStore --> User파일 수준 변경 사항
| 변경 사항 | 세부 사항 | 파일 |
|---|---|---|
| 폼 검증 및 오류 처리를 통한 로그인 기능 구현 |
|
src/pages/auth/SignInPage.tsxsrc/utils/validation.ts |
| 인증 API 엔드포인트 모킹을 위한 MSW 설정 |
|
src/mocks/handlers/auth.handlers.tssrc/api/apiEndpoints.tssrc/mocks/mockEndpoints.ts |
| 인증 상태 관리 구현 |
|
src/stores/authStore.tssrc/pages/HomePage.tsx |
| MSW와 실제 API 환경을 모두 지원하도록 API 클라이언트 수정 |
|
src/api/apiClient.tssrc/api/auth.ts |
관련 있을 수 있는 이슈
- #145: PR은 MSW 및 API 통합을 통한 JWT 기반 로그인 구현으로 문제를 해결합니다.
팁 및 명령어
#### 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 login functionality with MSW (Mock Service Worker) for testing. The implementation includes user authentication, form validation, error handling, and state management using Zustand. The API client was modified to support both MSW and real API environments through environment-based configuration. #### Sequence diagram for login process with MSW ```mermaid sequenceDiagram actor User participant SignInPage participant useSignin participant apiClient participant MSW User->>SignInPage: Enter email and password SignInPage->>useSignin: Call useSignin hook useSignin->>apiClient: POST /api/members/login alt MSW enabled apiClient->>MSW: Intercept request MSW-->>apiClient: Mock response else MSW disabled apiClient->>RealAPI: Forward request RealAPI-->>apiClient: Real response end apiClient-->>useSignin: Return response useSignin-->>SignInPage: Handle response SignInPage-->>User: Show success or error message ``` #### Updated class diagram for authentication types ```mermaid classDiagram class User { +int member_id +string email +string nickname +UserRole role } class SigninRequest { +string email +string password } class SigninResponse { +string status +string message +SigninData data } class SigninData { +string token +User user } class UserRole { <- Added email and password validation with real-time error feedback
- Implemented form submission with validation checks
- Added login button disable state when required fields are empty
- Added error message display and clearing functionality
`src/utils/validation.ts` | | Set up MSW for mocking authentication API endpoints |
- Created mock user data with different roles
- Implemented mock login handler with authentication logic
- Added logging for debugging API interactions
`src/api/apiEndpoints.ts`
`src/mocks/mockEndpoints.ts` | | Implemented authentication state management |
- Created auth store using Zustand with persistence
- Added user and token management
- Implemented authentication-based navigation
`src/pages/HomePage.tsx` | | Modified API client to support both MSW and real API environments |
- Added environment-based baseURL configuration
- Implemented authentication token interceptor
- Added request/response interceptors structure
`src/api/auth.ts` | ### Possibly linked issues - **#145**: PR addresses the issue by implementing JWT-based login with MSW and API integration. ---
netlify[bot]
clara-shin
🚀 풀 리퀘스트 제안
📋 작업 내용
✅ MSW는 브라우저에서 작동하며,
현재 도메인(localhost:3000)에 대한 요청만 가로챌 수 있음✅ MSW가 활성화되어 있을 때는 baseURL을 빈 문자열로 설정하여 모든 요청이 현재 도메인(localhost:3000)으로 가도록 함 ✅ _✨APIENDPOINTS만 사용✨ -> 개발 환경에서는 MSW가 요청을 가로채서 처리하고, 프로덕션 환경에서는 실제 API로 요청이 전송
기능구현
🔧 변경 사항
주요 변경 사항을 요약해 주세요.
📸 스크린샷 (선택 사항)
수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부해 주세요.
📄 기타
추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.
Sourcery에 의한 요약
테스트를 위한 MSW로 로그인 기능을 구현하고, API 클라이언트를 리팩토링하여 다양한 환경을 처리하며, SignInPage에서 이메일 및 비밀번호 입력에 대한 유효성 검사를 추가합니다.
새로운 기능:
개선 사항:
테스트:
Original summary in English
## Summary by Sourcery Implement login functionality with MSW for testing, refactor API client to handle different environments, and add validation for email and password inputs on the SignInPage. New Features: - Implement login functionality with MSW for testing, including user data type specification and authStore creation. Enhancements: - Refactor API client to distinguish between MSW and real API using baseURL settings, ensuring requests are correctly routed based on environment. Tests: - Add test code for login functionality using MSW to simulate server responses.