Feat/101/login signup api #106

minkyung5x5 · 2024-11-12T05:22:09Z

🔖 Issue Ticket

Ticket

✍️ Description

로그인/회원가입 API 연결
폼 에러처리

✅ Checklist

PR

Branch Convention 확인

feat/ 피쳐, fix/ 버그 수정, refactor/ 개선
Base Branch 확인
적절한 Label 지정
Assignee 및 Reviewer 지정

Test

로컬 작동 확인

Summary by CodeRabbit

New Features
- 동적 URL 재작성 기능 추가로 라우팅 능력 향상.
- 사용자 인증 흐름 개선을 위한 새로운 메서드 setUser 도입.
Bug Fixes
- 로그인 및 회원가입 시 오류 처리 로직 개선으로 더 동적인 오류 관리 가능.
Documentation
- API 응답 처리 방식 변경으로 인증 토큰 관리 개선.
Chores
- API 엔드포인트 경로 표준화 및 응답 처리 개선.
- CI 워크플로우에 환경 변수 추가로 빌드 프로세스 개선.

coderabbitai · 2024-11-12T05:22:20Z

Walkthrough

이번 변경 사항은 Next.js 애플리케이션의 라우팅 및 인증 흐름을 개선하는 여러 가지 기능을 포함합니다. next.config.mjs 파일에 비동기 메서드 rewrites가 추가되어 모든 요청을 환경 변수에 기반한 URL로 리다이렉트합니다. API 호출을 위한 엔드포인트가 업데이트되고, 응답 처리 방식이 개선되었습니다. 또한, 로그인 및 회원가입 과정에서의 오류 처리 로직이 강화되었습니다. 전체적으로 API 상호작용 및 상태 관리 방식이 표준화되었습니다.

Changes

파일 경로	변경 요약
`next.config.mjs`	`nextConfig` 객체에 비동기 메서드 `rewrites` 추가, 모든 요청을 `NEXT_PUBLIC_API_BASE_URL`에 기반한 URL로 리다이렉트. `headers` 메서드는 변경 없음.
`src/_apis/auth/auth-apis.tsx`	`signupUser`, `loginUser`, `getUser` 함수의 API 엔드포인트 변경 및 응답 처리 개선. `signupUser`와 `loginUser`는 이제 응답에서 `Authorization` 토큰을 추출하여 반환.
`src/_queries/auth/auth-queries.tsx`	`usePostSignupQuery`, `usePostLoginQuery`에서 `ApiError`의 임포트 경로 변경, `setUser`를 포함한 `useAuthStore` 훅의 구조 변경, 응답 데이터에서 동적으로 토큰을 추출하도록 수정.
`src/app/(auth)/login/page.tsx`	`handleSubmit` 함수의 오류 처리 로직 수정, `404` 상태 코드 처리 제거, `401` 상태에 대한 동적 오류 처리 구현.
`src/app/(auth)/signup/page.tsx`	`handleSubmit`에서 `confirmPassword`를 제외한 데이터 구조 변경, 오류 처리 로직에서 `error.status` 사용으로 수정.
`src/store/use-auth-store.tsx`	`AuthState` 인터페이스의 `login` 메서드 시그니처 변경, 새로운 `setUser` 메서드 추가.
`src/types/auth.ts`	`SignupResponse` 및 `LoginResponse` 인터페이스의 `token` 속성 타입을 `string`에서 `string
`src/utils/api.ts`	`ApiError` 클래스에 `detail` 속성 추가 및 `fetchApi` 함수의 에러 처리 로직 개선. API 요청 시 기본 URL 제거, 응답 처리 방식 수정.
`src/app/(auth)/layout.tsx`	`AuthLayout` 컴포넌트의 레이아웃 구조 및 CSS 클래스 수정. 이미지 컨테이너의 너비 및 패딩 클래스 변경, 자식 컨테이너의 너비 조정.
`.github/workflows/ci.yml`	CI 워크플로우 구성 수정, `build` 작업에 환경 변수 `NEXT_PUBLIC_API_BASE_URL` 추가, 단계 이름 변경 및 캐시 키 패턴 수정.
`src/components/common/header/header.stories.tsx`	`Template` 함수에서 `useAuthStore` 훅에 `setUser` 메서드 추가, `login` 메서드 수정하여 `testToken`만 인수로 받도록 변경.

Suggested labels

api, fix

Suggested reviewers

yulrang
HaeJungg
Rangbyeolang

🐰 변화의 바람이 불어와
새로운 길을 열어주네
URL이 춤추고, 오류는 사라져
인증의 문이 활짝 열려
모두 함께 손잡고 나아가자! 🌟

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/_queries/auth/auth-queries.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't determine the plugin "react-hooks" uniquely.

/node_modules/eslint-plugin-react-hooks/index.js (loaded in ".eslintrc.js")
/node_modules/eslint-config-next/node_modules/eslint-plugin-react-hooks/index.js (loaded in ".eslintrc.js » eslint-config-next/core-web-vitals » /node_modules/eslint-config-next/index.js » plugin:react-hooks/recommended")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2024-11-12T05:24:21Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-hkxashooej.chromatic.com/

coderabbitai

Actionable comments posted: 5

🧹 Outside diff range and nitpick comments (6)

src/types/auth.ts (1)
Line range hint 1-24: 인터페이스에 JSDoc 주석 추가 권장

각 인터페이스의 목적과 속성에 대한 설명을 JSDoc 형식으로 추가하면 코드의 가독성과 유지보수성이 향상될 것 같습니다.

예시:
+/**
+ * 회원가입 응답 인터페이스
+ * @property {string | null} token - 인증 성공 시 JWT 토큰, 실패 시 null
+ */
 export interface SignupResponse {
   token: string | null;
 }

+/**
+ * 회원가입 요청 인터페이스
+ * @property {string} nickname - 사용자 닉네임
+ * @property {string} email - 사용자 이메일
+ * @property {string} password - 사용자 비밀번호
+ */
 export interface SignupRequest {
   nickname: string;
   email: string;
   password: string;
 }
src/store/use-auth-store.tsx (1)
20-24: 토큰 유효성 검사 추가를 고려해주세요

현재 구현은 기능적으로는 문제가 없으나, 다음과 같은 개선사항을 제안드립니다:
-      login: (token) =>
+      login: (token: string) =>
+        if (!token) {
+          throw new Error('토큰이 필요합니다');
+        }
         set({
           isAuth: true,
           token,
         }),
또한 setUser 메서드에도 유사한 검증을 추가하면 좋을 것 같습니다:
-      setUser: (user: User) => set((state) => ({ ...state, user })),
+      setUser: (user: User) => {
+        if (!user) {
+          throw new Error('사용자 정보가 필요합니다');
+        }
+        set((state) => ({ ...state, user }));
+      },
Also applies to: 31-31
src/app/(auth)/signup/page.tsx (2)
Line range hint 11-11: 컴포넌트 이름이 기능과 일치하지 않습니다

회원가입 페이지를 담당하는 컴포넌트의 이름이 LoginPage로 되어있어 혼란을 야기할 수 있습니다. 컴포넌트의 실제 기능과 일치하도록 이름을 변경하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:
-export default function LoginPage() {
+export default function SignupPage() {
19-23: 성공 처리 로직 검토가 필요합니다

회원가입 성공 시 바로 메인 페이지('/')로 이동하기 전에 사용자에게 성공 메시지를 표시하거나, 로그인 페이지로 리다이렉션 하는 것이 더 나은 사용자 경험을 제공할 수 있습니다.

다음과 같은 개선을 제안합니다:
 postSignup(requestData, {
   onSuccess: () => {
-    router.push('/');
+    // 토스트 메시지 표시
+    toast.success('회원가입이 완료되었습니다. 로그인해 주세요.');
+    // 로그인 페이지로 리다이렉션
+    router.push('/login');
   },
   onError: (error) => {
src/utils/api.ts (2)
4-14: ApiError 클래스 구현이 잘 되었습니다!

validation 에러를 처리하기 위한 구조가 잘 설계되었습니다. 다만, 클래스와 메서드에 대한 JSDoc 문서화를 추가하면 좋을 것 같습니다.

다음과 같이 문서화를 추가해보세요:
+/**
+ * API 요청 중 발생하는 에러를 처리하기 위한 클래스
+ * @property {number} status - HTTP 상태 코드
+ * @property {Object} detail - 유효성 검사 에러 상세 정보
+ */
 export class ApiError extends Error {
   detail: { validationErrors: Record<string, string> } = { validationErrors: {} };

+  /**
+   * @param {number} status - HTTP 상태 코드
+   * @param {string} message - 에러 메시지
+   * @param {Object} detail - 유효성 검사 에러 상세 정보
+   */
   constructor(
     public status: number,
     message: string,
     detail?: { validationErrors: Record<string, string> },
   ) {
38-54: 에러 처리 로직이 개선되었습니다만, 에러 메시지를 더 명확하게 만들어보세요.

전반적인 구현이 잘 되었습니다. 다만, 에러 메시지 처리를 더 구체적으로 개선하면 좋을 것 같습니다.

다음과 같이 개선해보세요:
       try {
         const { status, message, ...detail } = await response.json();
-        errorMessage = message || `HTTP error! status: ${response.status}`;
+        errorMessage = message || `서버 에러가 발생했습니다. (상태 코드: ${response.status})`;
         errorDetail = detail;
       } catch {
-        errorMessage = `HTTP error! status: ${response.status}`;
+        errorMessage = `서버 응답을 처리하는 중 에러가 발생했습니다. (상태 코드: ${response.status})`;
       }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 5bb737f and ad5a1db.

📒 Files selected for processing (8)

next.config.mjs (1 hunks)
src/_apis/auth/auth-apis.tsx (1 hunks)
src/_queries/auth/auth-queries.tsx (1 hunks)
src/app/(auth)/login/page.tsx (1 hunks)
src/app/(auth)/signup/page.tsx (1 hunks)
src/store/use-auth-store.tsx (3 hunks)
src/types/auth.ts (2 hunks)
src/utils/api.ts (2 hunks)

🔇 Additional comments (12)

src/types/auth.ts (1)

2-2: 토큰 타입 변경이 적절합니다

string | null 타입으로 변경한 것은 인증 실패 시나리오를 더 명확하게 처리할 수 있게 해주며, API 응답 처리를 개선하는데 도움이 됩니다.

Also applies to: 12-12

src/store/use-auth-store.tsx (2)

9-9: 인터페이스 변경이 잘 이루어졌습니다!

토큰과 사용자 정보 관리를 분리한 것은 좋은 설계 결정입니다. 이를 통해:

토큰 기반 인증과 사용자 정보 관리를 독립적으로 수행할 수 있습니다
API 응답 처리 시 더 유연한 상태 관리가 가능해집니다

Also applies to: 11-11

Line range hint 34-41: 영구 저장소 설정이 적절합니다

세션 스토리지 사용과 저장할 상태 필드 선택이 보안적으로 적절합니다. 특히:

세션 스토리지는 인증 데이터에 적합한 선택입니다
필요한 상태만 선별적으로 저장되고 있습니다

next.config.mjs (2)

33-40: 보안 및 구성 관련 검토 필요

모든 경로를 외부 API로 리다이렉션하는 현재 구현 방식에 대해 몇 가지 고려사항이 있습니다:

/:path* 패턴은 모든 요청을 외부 API로 전달하므로 보안상 위험할 수 있습니다.
환경 변수가 없을 경우의 대체 로직(fallback)이 필요합니다.

다음과 같은 개선을 제안드립니다:

  async rewrites() {
+   const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+   if (!apiBaseUrl) {
+     throw new Error('NEXT_PUBLIC_API_BASE_URL is not defined');
+   }
    return [
      {
-       source: '/:path*',
+       source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
      },
    ];
  },

33-40: CORS 설정과의 연관성 검토 필요

현재 headers()와 rewrites() 메서드가 동일한 환경 변수를 사용하고 있습니다. CORS 설정이 리다이렉션된 요청에도 올바르게 적용되는지 확인이 필요합니다.

src/_apis/auth/auth-apis.tsx (1)

Line range hint 31-36: 인증 토큰이 요청 헤더에 포함되어야 합니다

사용자 정보를 조회하는 보호된 엔드포인트에 접근하기 위해서는 인증 토큰이 필요합니다.

다음과 같이 수정을 제안합니다:

  return fetchApi<{ data: User }>('/auths/user', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
+     'Authorization': `Bearer ${token}`, // 저장된 토큰을 사용
    },
  });

src/app/(auth)/login/page.tsx (2)

22-28: 서버 응답 구조 검증 필요

현재 구현은 서버에서 특정 형태의 에러 응답을 가정하고 있습니다. 서버 응답 구조가 변경될 경우 클라이언트 코드가 깨질 수 있습니다.

서버의 에러 응답 구조를 확인하기 위해 다음 스크립트를 실행해주세요:

#!/bin/bash
# Description: API 에러 응답 구조 확인

# API 관련 타입 정의 검색
rg -t typescript "interface.*ApiError|type.*ApiError" 

# 에러 처리 관련 유틸리티 함수 검색
rg -t typescript "function.*handleError|function.*createError"

22-28: 일관된 에러 처리 패턴 적용 필요

로그인 페이지의 에러 처리 패턴이 다른 인증 관련 페이지들과 일관성이 있는지 확인이 필요합니다.

다른 인증 페이지들의 에러 처리 패턴을 확인하기 위해 다음 스크립트를 실행해주세요:

src/app/(auth)/signup/page.tsx (1)

17-18: 데이터 구조 개선이 잘 이루어졌습니다

confirmPassword를 API 요청 데이터에서 제외하는 처리가 깔끔하게 구현되었습니다. 스프레드 연산자를 사용한 구조 분해가 가독성이 좋습니다.

src/_queries/auth/auth-queries.tsx (2)

4-4: 커스텀 ApiError 타입으로의 마이그레이션이 적절합니다.

로컬 유틸리티에서 ApiError를 임포트하도록 변경한 것은 에러 처리를 더 체계적으로 관리할 수 있게 해줍니다.

10-10: 토큰 처리 및 상태 관리 로직 검토가 필요합니다.

토큰 처리와 사용자 상태 관리가 분리되어 개선되었으나, 다음 사항들을 고려해주세요:

토큰이 없는 경우의 처리가 필요할 수 있습니다
상태 업데이트 실패 시의 에러 처리가 필요합니다

다음과 같이 개선하는 것을 제안드립니다:

  onSuccess: async (response) => {
    const token = response.data.token?.replace(/^Bearer\s/, '');
-   if (token) await login(token);
+   if (!token) {
+     throw new Error('토큰이 없습니다');
+   }
+   
+   try {
+     await login(token);
+     const user: User = await queryClient.fetchQuery(getUserQuery());
+     setUser(user);
+   } catch (error) {
+     console.error('사용자 상태 업데이트 실패:', error);
+     throw error;
+   }
-   const user: User = await queryClient.fetchQuery(getUserQuery());
-   setUser(user);
  },

Also applies to: 15-19

src/utils/api.ts (1)

38-38: API 기본 URL 설정이 제거된 것이 의도된 변경인지 확인해주세요.

기존 base URL 연결이 제거되었습니다. 모든 API 호출 부분에서 완전한 URL을 사용하고 있는지 확인이 필요합니다.

다음 스크립트로 API URL 사용을 확인해보세요:

✅ Verification successful

Let me search for fetch calls and URL construction patterns to verify the API URL usage.

API URL 설정이 의도적으로 변경되었습니다.

코드 분석 결과, fetchApi 함수는 상대 경로를 사용하여 API를 호출하고 있으며, 모든 API 호출이 일관된 방식으로 구현되어 있습니다. 각 API 엔드포인트(/auths/signup, /crews, /crewDetail 등)가 상대 경로로 올바르게 지정되어 있어 base URL 설정 제거는 의도된 변경으로 보입니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 호출 패턴 검색
rg "fetchApi\(" -A 2

Length of output: 22

Script:

#!/bin/bash
# API URL 패턴 검색
rg "fetch\(" -A 2

# URL 문자열 패턴 검색
rg "const url = " -A 1

Length of output: 736

Script:

#!/bin/bash
# API URL 관련 코드 검색
rg -B 3 -A 3 "const response = await fetch"

# API 관련 설정 파일 검색
fd -e ts -e js -e json "config|env|constant" --exec cat {}

Length of output: 8314

Script:

#!/bin/bash
# API 관련 설정 및 구현 파일 검색
cat src/utils/api.ts

# fetchApi 함수 사용 패턴 검색
rg "fetchApi<" -B 2 -A 2

Length of output: 4847

coderabbitai · 2024-11-12T05:29:21Z

src/_apis/auth/auth-apis.tsx

+  return fetchApi<{ data: LoginResponse; headers: Headers }>('/auths/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
+  }).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { data: { token } };


🛠️ Refactor suggestion

코드 중복을 제거하고 오류 처리를 개선해야 합니다

loginUser와 signupUser 함수가 매우 유사한 로직을 가지고 있습니다. 또한 토큰 추출 시 오류 처리가 누락되어 있습니다.

다음과 같은 개선을 제안합니다:

토큰 추출 로직을 공통 함수로 분리:

const extractAuthToken = (headers: Headers) => { const token = headers.get('Authorization'); if (!token) { throw new Error('인증 토큰이 없습니다'); } return token; };

각 함수에서 공통 함수 사용:

}).then((response) => { - const token = response.headers.get('Authorization'); + const token = extractAuthToken(response.headers); return { data: { token } }; });

coderabbitai · 2024-11-12T05:29:22Z

src/_apis/auth/auth-apis.tsx

+  return fetchApi<{ data: SignupResponse; headers: Headers }>('/auths/signup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
+  }).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { data: { token } };


⚠️ Potential issue

토큰 추출 시 오류 처리 로직이 필요합니다

현재 구현에서는 다음과 같은 잠재적인 문제가 있습니다:

Authorization 헤더가 없는 경우에 대한 처리가 없습니다

응답 데이터의 유효성 검증이 없습니다

다음과 같이 개선하는 것을 제안합니다:

}).then((response) => { const token = response.headers.get('Authorization'); + if (!token) { + throw new Error('인증 토큰이 없습니다'); + } return { data: { token } }; });

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

return fetchApi<{ data: SignupResponse; headers: Headers }>('/auths/signup', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify(data),

}).then((response) => {

const token = response.headers.get('Authorization');

return { data: { token } };

return fetchApi<{ data: SignupResponse; headers: Headers }>('/auths/signup', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify(data),

}).then((response) => {

const token = response.headers.get('Authorization');

if (!token) {

throw new Error('인증 토큰이 없습니다');

}

return { data: { token } };

coderabbitai · 2024-11-12T05:29:22Z

src/app/(auth)/login/page.tsx

+        if (error.status === 401) {
+          const { validationErrors } = error.detail;
+          Object.keys(validationErrors).forEach((key) => {
+            setError(key as 'email' | 'password', {
+              type: 'manual',
+              message: validationErrors[key],
+            });


🛠️ Refactor suggestion

에러 처리 구현에 대한 개선 제안

현재 구현은 다음과 같은 잠재적인 문제가 있습니다:

error.detail이 존재하지 않을 경우 런타임 에러가 발생할 수 있습니다

validationErrors가 없는 경우에 대한 처리가 누락되었습니다

예상치 못한 필드명이 들어올 경우 타입 안정성이 보장되지 않습니다

다음과 같이 개선하는 것을 제안드립니다:

if (error.status === 401) { - const { validationErrors } = error.detail; - Object.keys(validationErrors).forEach((key) => { - setError(key as 'email' | 'password', { - type: 'manual', - message: validationErrors[key], - }); - }); + const validationErrors = error.detail?.validationErrors; + if (validationErrors) { + (Object.entries(validationErrors) as [keyof LoginFormValues, string][]).forEach( + ([field, message]) => { + setError(field, { + type: 'manual', + message, + }); + } + ); + } else { + setError('password', { + type: 'manual', + message: '로그인에 실패했습니다. 다시 시도해 주세요.', + }); + } }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

if (error.status === 401) {

const { validationErrors } = error.detail;

Object.keys(validationErrors).forEach((key) => {

setError(key as 'email' | 'password', {

type: 'manual',

message: validationErrors[key],

});

if (error.status === 401) {

const validationErrors = error.detail?.validationErrors;

if (validationErrors) {

(Object.entries(validationErrors) as [keyof LoginFormValues, string][]).forEach(

([field, message]) => {

setError(field, {

type: 'manual',

message,

});

}

);

} else {

setError('password', {

type: 'manual',

message: '로그인에 실패했습니다. 다시 시도해 주세요.',

});

}

}

coderabbitai · 2024-11-12T05:29:22Z

src/app/(auth)/signup/page.tsx

+        if (error.status === 400) {
+          const { validationErrors } = error.detail;
+          Object.keys(validationErrors).forEach((key) => {
+            setError(key as 'email', {
+              type: 'manual',
+              message: validationErrors[key],
+            });
+          });


🛠️ Refactor suggestion

에러 처리 로직 개선이 필요합니다

현재 구현된 에러 처리에 몇 가지 개선이 필요합니다:

타입 안전성: key as 'email' 타입 단언은 위험할 수 있습니다

에러 메시지 처리: 서버 응답이 예상과 다를 경우의 처리가 없습니다

사용자 피드백: 일반적인 서버 오류에 대한 처리가 누락되었습니다

다음과 같이 개선하는 것을 제안합니다:

if (error.status === 400) { const { validationErrors } = error.detail; - Object.keys(validationErrors).forEach((key) => { - setError(key as 'email', { - type: 'manual', - message: validationErrors[key], - }); - }); + try { + Object.entries(validationErrors).forEach(([key, message]) => { + if (key in formMethods.getValues()) { + setError(key as keyof SignupFormValues, { + type: 'manual', + message: String(message), + }); + } + }); + } catch (e) { + console.error('유효성 검사 에러 처리 중 문제가 발생했습니다:', e); + setError('root', { + type: 'manual', + message: '회원가입 처리 중 문제가 발생했습니다. 다시 시도해 주세요.', + }); + } +} else { + setError('root', { + type: 'manual', + message: '서버 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.', + }); }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

if (error.status === 400) {

const { validationErrors } = error.detail;

Object.keys(validationErrors).forEach((key) => {

setError(key as 'email', {

type: 'manual',

message: validationErrors[key],

});

});

if (error.status === 400) {

const { validationErrors } = error.detail;

try {

Object.entries(validationErrors).forEach(([key, message]) => {

if (key in formMethods.getValues()) {

setError(key as keyof SignupFormValues, {

type: 'manual',

message: String(message),

});

}

});

} catch (e) {

console.error('유효성 검사 에러 처리 중 문제가 발생했습니다:', e);

setError('root', {

type: 'manual',

message: '회원가입 처리 중 문제가 발생했습니다. 다시 시도해 주세요.',

});

}

} else {

setError('root', {

type: 'manual',

message: '서버 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',

});

}

coderabbitai · 2024-11-12T05:29:22Z

src/_queries/auth/auth-queries.tsx

 export function usePostLoginQuery() {
  const queryClient = useQueryClient();
-  const { login } = useAuthStore();
+  const { login, setUser } = useAuthStore();


🛠️ Refactor suggestion

인증 로직 중복 개선이 필요합니다.

로그인과 회원가입에서 동일한 토큰 처리 및 사용자 상태 관리 로직이 반복됩니다.

다음과 같이 공통 로직을 분리하는 것을 제안드립니다:

// 공통 유틸리티 함수 async function handleAuthSuccess( response: { data: { token?: string } }, queryClient: QueryClient, login: (token: string) => Promise<void>, setUser: (user: User) => void ) { const token = response.data.token?.replace(/^Bearer\s/, ''); if (!token) { throw new Error('토큰이 없습니다'); } try { await login(token); const user: User = await queryClient.fetchQuery(getUserQuery()); setUser(user); } catch (error) { console.error('사용자 상태 업데이트 실패:', error); throw error; } } // 사용 예시 onSuccess: (response) => handleAuthSuccess(response, queryClient, login, setUser)

Also applies to: 31-35

github-actions · 2024-11-12T05:31:52Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-vybrpdfwrb.chromatic.com/

coderabbitai

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (1)

src/app/(auth)/layout.tsx (1)
33-33: 컨텐츠 영역의 반응형 디자인이 개선되었습니다.

너비와 여백 조정이 적절하게 이루어졌습니다. 다만, 사용자 경험을 더욱 향상시키기 위해 작은 화면에서의 여백도 고려해보시면 좋을 것 같습니다.
-<div className="mt-6 w-full md:mt-12 md:w-2/3 lg:w-1/2">{children}</div>
+<div className="mx-auto mt-6 w-full max-w-md md:mt-12 md:w-2/3 lg:w-1/2">{children}</div>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between ad5a1db and ebe4eff.

📒 Files selected for processing (1)

src/app/(auth)/layout.tsx (1 hunks)

🔇 Additional comments (1)

src/app/(auth)/layout.tsx (1)

22-24: 이미지 컨테이너의 반응형 레이아웃이 개선되었습니다.

중간 크기(md) 이상의 화면에서 일관된 50% 너비를 유지하도록 변경된 것이 적절해 보입니다.

coderabbitai · 2024-11-12T05:33:47Z

src/app/(auth)/layout.tsx

          <Image src={Auth} alt="auth" />
        </div>
-        <div className="flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center md:p-8 lg:w-1/3 lg:p-20">
+        <div className="md:p-8lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center">


⚠️ Potential issue

패딩 클래스 구문 오류를 수정해야 합니다.

Tailwind CSS 클래스 사이에 공백이 누락되어 있어 큰 화면에서 패딩이 적용되지 않습니다.

-<div className="md:p-8lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center"> +<div className="md:p-8 lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<div className="md:p-8lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center">

<div className="md:p-8 lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center">

github-actions · 2024-11-12T06:38:31Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-bdrdxnootl.chromatic.com/

github-actions · 2024-11-12T06:41:29Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-nranmpgqjr.chromatic.com/

coderabbitai

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)

.github/workflows/ci.yml (1)
80-81: 환경 변수 설정이 적절히 구성되었습니다.

빌드 단계에서 API 기본 URL을 환경 변수로 설정한 것은 적절합니다. GitHub Secrets를 통해 안전하게 관리되고 있습니다.

워크플로우 파일에 환경 변수의 용도와 형식에 대한 간단한 주석을 추가하면 좋을 것 같습니다:
 env:
+          # API 엔드포인트의 기본 URL (예: https://api.example.com)
           NEXT_PUBLIC_API_BASE_URL: ${{secrets.NEXT_PUBLIC_API_BASE_URL}}
src/components/common/header/header.stories.tsx (1)
Line range hint 25-30: 테스트 데이터 관리 개선이 필요합니다.

테스트 데이터가 컴포넌트 내부에 하드코딩되어 있습니다. 이는 유지보수성과 재사용성 측면에서 개선이 필요합니다.

다음과 같이 별도의 테스트 데이터 파일을 생성하여 관리하는 것을 제안드립니다:
// src/__mocks__/auth-test-data.ts
export const TEST_AUTH_DATA = {
  token: 'test token',
  user: {
    id: 1,
    nickname: '크루크루',
    email: 'john@example.com',
    profileImageUrl: 'https://image.file',
  },
};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between ebe4eff and 541da83.

📒 Files selected for processing (5)

.github/workflows/ci.yml (1 hunks)
src/_queries/auth/auth-queries.tsx (2 hunks)
src/app/(auth)/layout.tsx (1 hunks)
src/app/(auth)/login/page.tsx (1 hunks)
src/components/common/header/header.stories.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

src/_queries/auth/auth-queries.tsx
src/app/(auth)/layout.tsx
src/app/(auth)/login/page.tsx

coderabbitai · 2024-11-12T06:47:20Z

src/components/common/header/header.stories.tsx

 export default meta;
 function Template() {
-  const { isAuth, login, logout } = useAuthStore();
+  const { isAuth, login, logout, setUser } = useAuthStore();


⚠️ Potential issue

인증 로직 개선이 필요합니다.

로그인 프로세스가 두 단계로 분리되어 있어 잠재적인 문제가 발생할 수 있습니다. login과 setUser 호출 사이에 경쟁 상태가 발생할 수 있으며, 이는 사용자 상태가 일시적으로 불일치하는 상황을 초래할 수 있습니다.

다음과 같이 개선하는 것을 제안드립니다:

- login(testToken); - setUser(testUser); + await login(testToken); + await setUser(testUser);

또는 더 나은 방법으로, 인증 로직을 하나의 함수로 통합하는 것을 고려해보세요:

- login(testToken); - setUser(testUser); + await loginWithUser(testToken, testUser);

Also applies to: 37-38

ChoYenii

수고 많으셨습니다!!

yulrang

동작 확인했습니다~ 수고하셨어요!!
env api 안붙이는걸로 통일합시당~~

Feat/101/login signup api

minkyung5x5 added 6 commits November 12, 2024 10:36

✨ Feat: 로그인 API

7343b4b

✨ Feat: signup API

950aefe

✨ Feat: 로그인 에러처리

e92d30f

🐛 fix: console.log 삭제

efea2dd

Merge branch 'develop' into Feat/101/login-signup-api

90b90c0

🐛 fix: 로그인 에러처리 수정

ad5a1db

minkyung5x5 linked an issue Nov 12, 2024 that may be closed by this pull request

로그인/회원가입 API 연결 #101

Closed

coderabbitai bot reviewed Nov 12, 2024

View reviewed changes

💄 Style: auth layout 수정

ebe4eff

coderabbitai bot reviewed Nov 12, 2024

View reviewed changes

minkyung5x5 added 3 commits November 12, 2024 15:28

♻️ refactor: 로그인/회원가입 중복코드 리팩토링

41be5f2

🐛 fix: 로그인 에러처리 변경에 따른 수정

25feb82

🐛 fix: build error 수정

5b4097e

🐛 fix: header storybook 수정

541da83

coderabbitai bot reviewed Nov 12, 2024

View reviewed changes

ChoYenii approved these changes Nov 12, 2024

View reviewed changes

yulrang approved these changes Nov 12, 2024

View reviewed changes

minkyung5x5 merged commit f3be409 into develop Nov 12, 2024
2 checks passed

This was referenced Nov 12, 2024

Feat/98/crew api 연결 #104

Merged

Feat/103/detail page get #108

Closed

Feat/101/login signup api #112

Closed

HaeJungg pushed a commit that referenced this pull request Nov 13, 2024

Merge pull request #106 from CodeitFESI4-Team1/Feat/101/login-signup-api

6aab92e

Feat/101/login signup api

This was referenced Nov 13, 2024

DetailPage api 연결 #114

Merged

Feat/98/crew api 연결 : 제가올린것중 이것먼저 리뷰 부탁드립니다~! #113

Merged

Feat/105/my crew api 연결 #109

Merged

This was referenced Nov 13, 2024

Feat/107/my gathering api #117

Merged

로그인/회원가입 API #122

Merged

Feat/121/liked api #123

Merged

Feat/125/my page profile #134

Merged

Feat/128/edit crew api 연결 #129

Merged

Feat/118/auth api #137

Merged

This was referenced Nov 22, 2024

Fix/youl bug fix : 로고, 파비콘 교체, 헤더 스타일 변경 #171

Merged

Fix/170/storybook build err #176

Merged

	<div className="md:p-8lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center">
	<div className="md:p-8 lg:p-20 flex h-full w-full flex-col items-center bg-white p-6 md:w-1/2 md:justify-center">

Feat/101/login signup api #106

Feat/101/login signup api #106

Uh oh!

Conversation

minkyung5x5 commented Nov 12, 2024 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔖 Issue Ticket

✍️ Description

✅ Checklist

PR

Test

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

github-actions bot commented Nov 12, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 12, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 12, 2024

Uh oh!

github-actions bot commented Nov 12, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

Uh oh!

ChoYenii left a comment

Choose a reason for hiding this comment

Uh oh!

yulrang left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

minkyung5x5 commented Nov 12, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 12, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)