FC-DEV-FinalProject / FinalProject_2VEN_FE

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

[Feat] 로그인 실제 api 연동 ( #147) #186

Closed clara-shin closed 3 days ago

clara-shin commented 3 days ago

🚀 풀 리퀘스트 제안

📋 작업 내용

로그인 실제 api 연결 성공

🔧 변경 사항

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

📸 스크린샷 (선택 사항)

수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부해 주세요.

📄 기타

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

Sourcery에 의한 요약

로그인 기능을 실제 API와 통합하여 모의 구현을 대체합니다. API 클라이언트에 요청 및 응답 인터셉터를 개선하여 더 나은 로깅, 토큰 관리 및 오류 처리를 제공합니다. 애플리케이션 전반에 걸쳐 역할 문자열을 표준화하기 위한 역할 포맷팅 유틸리티 함수를 추가합니다.

새로운 기능:

개선 사항:

Original summary in English ## Summary by Sourcery Integrate the login functionality with the actual API, replacing mock implementations. Enhance the API client with improved request and response interceptors for better logging, token management, and error handling. Add utility functions for role formatting to standardize role strings across the application. New Features: - Integrate the login functionality with the actual API, replacing mock implementations. Enhancements: - Improve request and response interceptors in the API client to handle logging, token management, and error handling more effectively. - Add utility functions for role formatting to standardize role strings across the application.
sourcery-ai[bot] commented 3 days ago

리뷰어 가이드 by Sourcery

이 PR은 로그인 기능을 위한 실제 API 통합을 구현합니다. 변경 사항에는 API 클라이언트 구성 설정, 적절한 오류 처리 구현, 인증 토큰 관리 추가, 백엔드 형식에 맞춘 사용자 역할 처리 업데이트가 포함됩니다.

로그인 API 요청 및 응답에 대한 시퀀스 다이어그램

sequenceDiagram
    actor User
    participant SignInPage
    participant apiClient
    participant Backend

    User->>SignInPage: 로그인 폼 제출
    SignInPage->>apiClient: POST /api/auth/login
    apiClient->>Backend: 로그인 요청 전송
    Backend-->>apiClient: 토큰 및 사용자 데이터와 함께 응답 반환
    apiClient-->>SignInPage: 응답 수신
    SignInPage-->>User: 성공 시 홈 페이지로 이동

인증 유형에 대한 업데이트된 클래스 다이어그램

classDiagram
    class User {
        +string member_id
        +string email
        +string nickname
        +UserRole role
    }
    class SigninResponse {
        +string status
        +string message
        +AuthData data
    }
    class AuthData {
        +string token
        +User user
    }
    class ApiResponse {
        +T data
        +string message
        +string status
    }
    class BackendSigninResponse {
        +string member_id
        +string email
        +string nickname
        +string role
        +string message
        +string status
    }
    UserRole <|-- User
    SigninResponse o-- AuthData
    ApiResponse <|-- BackendSigninResponse

파일 수준 변경 사항

변경 사항 세부 사항 파일
적절한 인증 및 오류 처리를 통해 API 클라이언트 구성
  • 기본 URL 구성 및 CORS 자격 증명 지원 추가
  • JWT 토큰 처리를 통한 요청 인터셉터 구현
  • 다양한 HTTP 상태 코드에 대한 포괄적인 오류 처리 추가
  • 개발 모드 요청 로깅 추가
src/api/apiClient.ts
적절한 오류 처리 및 타입 안전성을 갖춘 인증 API 구현 강화
  • 백엔드 응답 타입 인터페이스 추가
  • Authorization 헤더에서 토큰 추출 구현
  • 상세한 오류 로깅 및 처리 추가
  • 백엔드 형식에 맞춘 사용자 데이터 매핑 업데이트
src/api/auth.ts
src/hooks/mutations/useAuthMutation.ts
백엔드 형식에 맞춘 사용자 역할 처리 업데이트
  • memberid 타입을 숫자에서 문자열로 변경
  • 역할 접두사 처리 유틸리티 추가
  • 'ROLE' 접두사를 포함하도록 역할 타입 업데이트
  • 새로운 역할 형식에 맞춰 약관 컨테이너 수정
src/types/auth.ts
src/types/route.ts
src/utils/auth.ts
src/components/terms/TermsContainer.tsx
개발을 위한 API 프록시 구성 추가
  • 프로덕션 API로 요청을 전달하도록 프록시 구성
  • HTTPS 보안 설정 추가
vite.config.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 real API integration for the login functionality. The changes include setting up API client configuration, implementing proper error handling, adding authentication token management, and updating the user role handling to match the backend's format. #### Sequence diagram for login API request and response ```mermaid sequenceDiagram actor User participant SignInPage participant apiClient participant Backend User->>SignInPage: Submit login form SignInPage->>apiClient: POST /api/auth/login apiClient->>Backend: Send login request Backend-->>apiClient: Return response with token and user data apiClient-->>SignInPage: Response received SignInPage-->>User: Navigate to home page on success ``` #### Updated class diagram for auth types ```mermaid classDiagram class User { +string member_id +string email +string nickname +UserRole role } class SigninResponse { +string status +string message +AuthData data } class AuthData { +string token +User user } class ApiResponse { +T data +string message +string status } class BackendSigninResponse { +string member_id +string email +string nickname +string role +string message +string status } UserRole <|-- User SigninResponse o-- AuthData ApiResponse <|-- BackendSigninResponse ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Configured API client with proper authentication and error handling |
  • Added base URL configuration and CORS credentials support
  • Implemented request interceptor with JWT token handling
  • Added comprehensive error handling for different HTTP status codes
  • Added development mode request logging
| `src/api/apiClient.ts` | | Enhanced authentication API implementation with proper error handling and type safety |
  • Added backend response type interface
  • Implemented token extraction from Authorization header
  • Added detailed error logging and handling
  • Updated user data mapping to match backend format
| `src/api/auth.ts`
`src/hooks/mutations/useAuthMutation.ts` | | Updated user role handling to match backend format |
  • Changed member_id type from number to string
  • Added role prefix handling utilities
  • Updated role type to include 'ROLE_' prefix
  • Modified terms container to work with new role format
| `src/types/auth.ts`
`src/types/route.ts`
`src/utils/auth.ts`
`src/components/terms/TermsContainer.tsx` | | Added API proxy configuration for development |
  • Configured proxy to forward requests to production API
  • Added HTTPS security settings
| `vite.config.ts` | ### Possibly linked issues - **#147**: PR connects login to API, addressing issue's JWT token-based authentication. - **#147**: The PR integrates the actual API for the JWT-based login authentication described in the issue. ---
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 3 days ago

Deploy Preview for sysmetics ready!

Name Link
Latest commit e79230d65e0e987007d9ae3029e3729b4816461a
Latest deploy log https://app.netlify.com/sites/sysmetics/deploys/67404f8f06ec1700083e6bc9
Deploy Preview https://deploy-preview-186--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.