Feat/107/my gathering api

[minkyung5x5]

🔖 Issue Ticket

Ticket

✍️ Description

나의 모임 API 추가
헤더에 찜한약속 추가

✅ Checklist

PR

• Branch Convention 확인

  feat/ 피쳐, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Summary by CodeRabbit

• 새로운 기능

  • 사용자 가입 및 로그인 기능에 대한 API 요청에 타임아웃 및 응답 처리 매개변수 추가.
  • 호스팅된 모임 목록을 가져오는 새로운 API 기능 추가.
  • 참여한 모임 목록을 가져오는 새로운 API 기능 추가.
  • 호스팅된 모임을 표시하는 새 페이지 컴포넌트 추가.
  • 참여한 모임을 표시하는 새 페이지 컴포넌트 추가.
  • 헤더 내비게이션 링크를 동적으로 렌더링하는 기능 개선.
  • 요일을 동적으로 표시하는 기능 개선.

• 버그 수정

  • API 요청의 오류 처리 개선.

• 문서화

  • 날짜 형식을 요청에 맞게 변환하는 새로운 유틸리티 함수 추가.

[coderabbitai]

Walkthrough

이 풀 리퀘스트는 사용자 가입 및 로그인 API 호출을 위한 함수에 타임아웃 및 응답 처리 매개변수를 추가하고, 새로운 호스팅 및 참여 모임 목록을 가져오는 기능을 추가합니다. 또한 기존의 모임 관련 API 및 쿼리 함수가 삭제되거나 수정되었으며, 새로운 페이지 컴포넌트가 추가되었습니다. 전반적으로 API 요청 및 데이터 처리 방식이 개선되었습니다.

Changes

파일 경로	변경 요약
src/_apis/auth/auth-apis.tsx	signupUser 및 loginUser 함수에 타임아웃(5000ms) 및 응답 처리 매개변수 추가. 요청 본문 형식 정리.
src/_apis/gathering/gathering-apis.tsx	getGathering 함수 삭제.
src/_apis/my-gathering/hosted-gathering-list-apis.ts	getHostedGatheringList(startDate: string) 함수 추가.
src/_apis/my-gathering/joined-gathering-list-apis.ts	getJoinedGatheringList(startDate: string) 함수 추가.
src/_queries/gathering/gathering-queries.tsx	useGetGatheringQuery 함수 삭제.
src/_queries/my-gathering/hosted-gathering-list-queries.ts	useGetHostedGatheringListQuery(startDate: string) 함수 추가.
src/_queries/my-gathering/joined-gathering-list-queries.ts	useGetJoinedGatheringListQuery(startDate: string) 함수 추가.
src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx	getDayOfWeek 함수 사용으로 요일 표시 방식 변경.
src/app/(crew)/my-gathering/creation/page.tsx	CreationPage 컴포넌트 삭제.
src/app/(crew)/my-gathering/hosted/page.tsx	MyGatheringHostedPage 컴포넌트 추가.
src/app/(crew)/my-gathering/joined/page.tsx	MyGatheringJoinedPage 컴포넌트 추가.
src/app/(crew)/my-gathering/layout.tsx	myGatheringTabs 배열에서 탭 ID 및 경로 업데이트.
src/app/(crew)/my-gathering/page.tsx	리디렉션 경로 변경: /my-gathering/participation에서 /my-gathering/joined로.
src/app/(crew)/my-gathering/participation/page.tsx	ParticipationPage 컴포넌트 삭제.
src/components/common/header/presenter.tsx	내비게이션 링크 배열 추가 및 렌더링 방식 단순화.
src/utils/api.ts	ApiError 클래스 및 fetchApi 함수 수정, 새로운 매개변수 추가 및 오류 처리 개선.
src/utils/format-date.ts	getDayOfWeek 및 formatDateToRequest 함수 추가.
tailwind.config.ts	높이 유틸리티 13 추가.

Possibly related PRs

• Feat/101/login signup api #106: 이 PR은 signupUser 및 loginUser 함수와 관련된 변경 사항으로, 인증 API 엔드포인트 및 응답 처리를 수정하여 전체 API 상호작용을 향상시킵니다.
• DetailPage api 연결 #114: 이 PR은 세부 페이지에 대한 새로운 API 연결을 도입하며, getCrewDetail 함수를 수정하여 주요 PR의 API 상호작용 및 응답 처리와 일치합니다.

Suggested labels

api, pages

Suggested reviewers

• Rangbyeolang
• HaeJungg
• yulrang

🐰 변화의 순간, 기뻐하며
새로운 모임이 펼쳐지네!
가입과 로그인, 더 빠르게,
함께하는 날들, 즐거움이 가득해! 🌼✨

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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]

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

[coderabbitai]

Actionable comments posted: 12

🧹 Outside diff range and nitpick comments (12)

src/app/(crew)/my-gathering/page.tsx (1)

4-5: 도달할 수 없는 return 문이 있습니다.

redirect 함수 호출 이후의 return null 구문은 실행되지 않습니다. 코드의 명확성을 위해 다음과 같이 수정하는 것이 좋습니다:

-  redirect('/my-gathering/joined');
-  return null;
+  redirect('/my-gathering/joined');

src/_queries/my-gathering/hosted-gathering-list-queries.ts (1)

4-10: 캐싱 설정 추가를 고려해보세요.

성능 최적화를 위해 staleTime과 cacheTime 설정을 추가하는 것이 좋습니다.

 export function useGetHostedGatheringListQuery(startDate: string) {
   return {
     queryKey: ['gatheringDetail', startDate],
     queryFn: () => getHostedGatheringList(startDate),
     select: (data: GatheringCardProps[]) => data,
+    staleTime: 5 * 60 * 1000, // 5분
+    cacheTime: 30 * 60 * 1000, // 30분
   };
 }

src/_queries/my-gathering/joined-gathering-list-queries.ts (1)

6-6: 쿼리 키 구조 개선이 필요합니다.

현재 쿼리 키가 너무 일반적입니다. 더 구체적인 키를 사용하여 캐시 충돌을 방지하는 것이 좋습니다.

-    queryKey: ['gatheringDetail', startDate],
+    queryKey: ['joinedGatheringList', startDate],

src/_apis/my-gathering/hosted-gathering-list-apis.ts (1)

4-12: 성능 최적화를 위한 캐싱 전략 제안

모임 목록 데이터는 자주 변경되지 않을 것으로 예상되므로, React Query의 캐싱 기능을 활용하면 좋을 것 같습니다. 다음과 같은 설정을 고려해보세요:

1. staleTime 설정으로 불필요한 API 호출 감소
2. cacheTime 설정으로 캐시 유지 기간 최적화
3. 필요한 경우 수동 캐시 무효화 로직 추가

src/utils/format-date.ts (2)

22-28: 입력값 유효성 검사 추가 필요

날짜 문자열이 유효하지 않은 경우 처리가 필요합니다. 잘못된 입력값으로 인한 오류를 방지하기 위해 다음과 같은 개선을 제안합니다.

 export function getDayOfWeek(dateString: string) {
   const daysInKorean = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
+  if (!dateString || isNaN(new Date(dateString).getTime())) {
+    throw new Error('유효하지 않은 날짜 형식입니다.');
+  }
   const date = new Date(dateString);
   const dayIndex = date.getDay();

   return daysInKorean[dayIndex];
 }

---

30-36: 입력값 유효성 검사 및 타입 안전성 개선 필요

Date 객체의 유효성을 검사하고 타입 안전성을 높이기 위한 개선이 필요합니다.

-export function formatDateToRequest(date: Date) {
+export function formatDateToRequest(date: Date | null | undefined) {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+    throw new Error('유효한 Date 객체가 필요합니다.');
+  }
+
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');

   return `${year}-${month}-${day}`;
 }

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

5-16: 타임아웃 값의 상수화 필요

하드코딩된 타임아웃 값(5000ms)을 상수로 분리하여 관리하는 것이 좋습니다. 이는 유지보수성을 향상시키고 다른 API 호출과의 일관성을 보장할 수 있습니다.

다음과 같이 상수를 추가하는 것을 제안합니다:

+const AUTH_API_TIMEOUT = 5000;

 export function signupUser(data: SignupRequest): Promise<{ data: SignupResponse }> {
   return fetchApi<{ data: SignupResponse; headers: Headers }>(
     '/auths/signup',
     {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
     },
-    5000,
+    AUTH_API_TIMEOUT,
     true,
   ).then((response) => {

src/app/(crew)/my-gathering/hosted/page.tsx (2)

1-10: 임포트 구문 정리가 필요합니다

임포트 구문을 다음과 같은 순서로 정리하면 코드의 가독성이 향상될 것 같습니다:

1. 외부 라이브러리 (react, @tanstack/react-query)
2. 커스텀 쿼리/API
3. 유틸리티
4. 컴포넌트
5. 타입

'use client';

import { useEffect, useState } from 'react';
import { useQuery } from '@tanstack/react-query';

import { useGetHostedGatheringListQuery } from '@/src/_queries/my-gathering/hosted-gathering-list-queries';

import { formatDateToRequest } from '@/src/utils/format-date';

import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';

import { GatheringCardProps } from '@/src/types/gathering-data';

---

27-35: 접근성 개선이 필요합니다

시맨틱 HTML과 접근성 속성을 추가하여 사용자 경험을 개선할 수 있습니다.

  return (
-   <div>
+   <main role="main" aria-label="내가 주최한 모임">
-     <div className="py-4 md:py-6">
+     <section className="py-4 md:py-6" aria-label="날짜 선택">
        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
-     </div>
+     </section>
      {hostedGatheringList && <GatheringListWithDate gatheringList={hostedGatheringList} />}
-   </div>
+   </main>
  );

src/app/(crew)/my-gathering/joined/page.tsx (1)

19-25: useEffect 최적화 필요

현재 구현된 두 개의 useEffect에 개선이 필요합니다.

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

1. joinedGatheringList 상태는 불필요하므로 제거하고 data를 직접 사용
2. refetch를 의존성 배열에 추가

- useEffect(() => {
-   setJoinedGatheringList(data);
- }, [data]);

  useEffect(() => {
    refetch();
-  }, [selectedDate]);
+  }, [selectedDate, refetch]);

src/components/common/header/presenter.tsx (1)

29-29: 스타일링 상수화를 고려해보세요.

현재 하드코딩된 spacing 값들(space-x-2, space-x-5 등)을 theme 상수나 설정 파일로 분리하면 일관성 있는 디자인 시스템 구축에 도움이 될 것 같습니다.

Also applies to: 31-31

tailwind.config.ts (1)

45-45: 높이 유틸리티 추가가 적절해 보입니다.

height-13 유틸리티의 추가가 기존 패턴을 잘 따르고 있습니다. 다만, 이 특정 높이값(52px)이 어떤 UI 요소를 위해 추가되었는지 주석으로 문서화하면 좋을 것 같습니다.

다음과 같이 주석을 추가하는 것을 제안합니다:

  height: {
    7.5: '30px',
    12.5: '50px',
-   13: '52px',
+   13: '52px', // 모임 관련 UI 컴포넌트의 기본 높이값
    27.5: '110px',
  },

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between a8816c8 and e47db68.

📒 Files selected for processing (18)

• src/_apis/auth/auth-apis.tsx (1 hunks)
• src/_apis/gathering/gathering-apis.tsx (0 hunks)
• src/_apis/my-gathering/hosted-gathering-list-apis.ts (1 hunks)
• src/_apis/my-gathering/joined-gathering-list-apis.ts (1 hunks)
• src/_queries/gathering/gathering-queries.tsx (0 hunks)
• src/_queries/my-gathering/hosted-gathering-list-queries.ts (1 hunks)
• src/_queries/my-gathering/joined-gathering-list-queries.ts (1 hunks)
• src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx (2 hunks)
• src/app/(crew)/my-gathering/creation/page.tsx (0 hunks)
• src/app/(crew)/my-gathering/hosted/page.tsx (1 hunks)
• src/app/(crew)/my-gathering/joined/page.tsx (1 hunks)
• src/app/(crew)/my-gathering/layout.tsx (1 hunks)
• src/app/(crew)/my-gathering/page.tsx (1 hunks)
• src/app/(crew)/my-gathering/participation/page.tsx (0 hunks)
• src/components/common/header/presenter.tsx (1 hunks)
• src/utils/api.ts (2 hunks)
• src/utils/format-date.ts (1 hunks)
• tailwind.config.ts (1 hunks)

💤 Files with no reviewable changes (4)

• src/_apis/gathering/gathering-apis.tsx
• src/_queries/gathering/gathering-queries.tsx
• src/app/(crew)/my-gathering/creation/page.tsx
• src/app/(crew)/my-gathering/participation/page.tsx

🔇 Additional comments (15)

src/app/(crew)/my-gathering/page.tsx (1)

4-4: 리다이렉션 구현이 적절합니다.

Next.js의 redirect 함수를 사용하여 기본 경로에서 '/my-gathering/joined'로 리다이렉션하는 구현이 깔끔합니다.

src/_queries/my-gathering/hosted-gathering-list-queries.ts (1)

4-10: 구현이 깔끔하고 타입이 잘 정의되어 있습니다!

React Query 패턴을 잘 따르고 있으며, 타입스크립트를 적절히 활용하고 있습니다.

src/_queries/my-gathering/joined-gathering-list-queries.ts (1)

1-2: LGTM! 필요한 의존성들이 잘 임포트되어 있습니다.

타입과 API 함수가 적절하게 임포트되어 있습니다.

src/_apis/my-gathering/hosted-gathering-list-apis.ts (1)

1-2: 임포트 구문이 적절히 구성되어 있습니다!

필요한 유틸리티와 타입이 명확하게 임포트되어 있습니다.

src/_apis/my-gathering/joined-gathering-list-apis.ts (2)

1-2: 임포트 구문이 적절합니다!

필요한 유틸리티와 타입을 절대 경로로 올바르게 임포트하고 있습니다.

---

5-5: API 엔드포인트 사용 검증이 필요합니다.

이 API 엔드포인트가 프로젝트 전체에서 일관되게 사용되는지 확인이 필요합니다.

✅ Verification successful

API 엔드포인트 사용이 프로젝트 전체에서 일관되게 확인되었습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 엔드포인트 사용 검증
rg -g '!*.{json,md}' "/api/gatherings/joined" .

Length of output: 165

src/app/(crew)/my-gathering/layout.tsx (2)

8-9: 네이밍이 더 명확해졌습니다! 👍

'participation'에서 'joined'로, 'creation'에서 'hosted'로의 변경은 각 탭의 기능을 더 직관적으로 표현합니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다.

---

8-9: 라우트 변경사항 검증이 필요합니다.

새로운 라우트 경로로의 변경이 다른 컴포넌트나 페이지에 영향을 미칠 수 있습니다.

다음 스크립트로 라우트 참조를 확인해주세요:

✅ Verification successful

라우트 변경사항이 다른 컴포넌트나 페이지에 영향을 미치지 않음을 확인했습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 이전 라우트와 새로운 라우트 참조 검사

echo "이전 라우트 참조 검사:"
rg -l "my-gathering/(participation|creation)"

echo "\n새로운 라우트 구현 확인:"
fd -e tsx -e ts "joined|hosted" src/app/\(crew\)/my-gathering/

Length of output: 192

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

5-34: 인증 관련 타입 안전성 개선 필요

isAuth 파라미터가 추가되었지만, 이에 대한 타입 정의가 명확하지 않습니다. 또한 응답 헤더의 타입 안전성도 개선이 필요합니다.

헤더 타입 사용을 확인하기 위해 다음 스크립트를 실행합니다:

src/app/(crew)/my-gathering/hosted/page.tsx (1)

11-14: 상태 관리가 잘 구현되어 있습니다

날짜 선택과 모임 목록에 대한 상태 관리가 적절하게 구현되어 있으며, 타입 안전성도 잘 고려되어 있습니다.

src/app/(crew)/my-gathering/joined/page.tsx (1)

1-10: 필요한 모든 의존성이 올바르게 임포트되었습니다.

모든 임포트가 적절하게 구성되어 있으며, 불필요한 임포트가 없습니다.

src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx (2)

4-4: 깔끔한 import 구문 구성입니다!

formatDate와 getDayOfWeek 함수를 한 줄로 깔끔하게 import 했습니다.

---

30-32: 요일 표시 개선이 잘 이루어졌습니다!

하드코딩된 요일 대신 getDayOfWeek 함수를 사용하여 동적으로 요일을 표시하도록 개선한 것이 좋습니다. 이는 다음과 같은 장점이 있습니다:

• 유지보수성 향상
• 날짜에 따른 정확한 요일 표시
• 코드 재사용성 증가

src/components/common/header/presenter.tsx (2)

16-20: 네비게이션 링크 구조가 개선되었습니다!

링크 정보를 배열로 분리하여 관리하는 것은 유지보수성을 높이는 좋은 접근 방식입니다.

---

16-51: 네비게이션 경로 검증이 필요합니다.

새로 추가된 경로들이 실제 페이지 컴포넌트와 올바르게 매핑되어 있는지 확인이 필요합니다.

✅ Verification successful

네비게이션 경로가 올바르게 매핑되었습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the existence of page components for each route

# Check for the existence of page components
echo "Checking page components for navigation routes..."
for route in "my-crew" "my-gathering" "my-favorite"; do
  fd -t f "page.tsx" "src/app" | grep -i "${route}"
done

Length of output: 607

[coderabbitai]

🛠️ Refactor suggestion

에러 처리 로직 추가를 검토해주세요.

API 호출 실패 시의 에러 처리가 누락되어 있습니다. queryFn에서 에러를 적절히 처리하는 것이 좋습니다.

-    queryFn: () => getHostedGatheringList(startDate),
+    queryFn: async () => {
+      try {
+        return await getHostedGatheringList(startDate);
+      } catch (error) {
+        console.error('모임 목록을 불러오는데 실패했습니다:', error);
+        throw new Error('모임 목록을 불러오는데 실패했습니다.');
+      }
+    },

📝 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

	queryFn: () => getHostedGatheringList(startDate),
	queryFn: async () => {
	try {
	return await getHostedGatheringList(startDate);
	} catch (error) {
	console.error('모임 목록을 불러오는데 실패했습니다:', error);
	throw new Error('모임 목록을 불러오는데 실패했습니다.');
	}
	},

[coderabbitai]

🛠️ Refactor suggestion

에러 처리 및 타입 안전성 개선이 필요합니다.

1. 에러 처리 설정이 누락되어 있습니다.
2. API 응답 타입이 명시적으로 정의되어 있지 않습니다.
3. select 함수가 데이터를 그대로 반환하므로 불필요합니다.

다음과 같이 개선해보세요:

-export function useGetJoinedGatheringListQuery(startDate: string) {
+export function useGetJoinedGatheringListQuery(startDate: string) {
+  type ApiResponse = GatheringCardProps[];
+
   return {
-    queryKey: ['gatheringDetail', startDate],
+    queryKey: ['joinedGatheringList', startDate],
-    queryFn: () => getJoinedGatheringList(startDate),
+    queryFn: async (): Promise<ApiResponse> => {
+      try {
+        return await getJoinedGatheringList(startDate);
+      } catch (error) {
+        throw new Error(`모임 목록을 가져오는데 실패했습니다: ${error}`);
+      }
+    },
     retry: 1,
     staleTime: 5 * 60 * 1000, // 5분
-    select: (data: GatheringCardProps[]) => data,
   };
 }

📝 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

	export function useGetJoinedGatheringListQuery(startDate: string) {
	return {
	queryKey: ['gatheringDetail', startDate],
	queryFn: () => getJoinedGatheringList(startDate),
	select: (data: GatheringCardProps[]) => data,
	};
	}
	export function useGetJoinedGatheringListQuery(startDate: string) {
	type ApiResponse = GatheringCardProps[];
	return {
	queryKey: ['joinedGatheringList', startDate],
	queryFn: async (): Promise<ApiResponse> => {
	try {
	return await getJoinedGatheringList(startDate);
	} catch (error) {
	throw new Error(`모임 목록을 가져오는데 실패했습니다: ${error}`);
	}
	},
	retry: 1,
	staleTime: 5 * 60 * 1000, // 5분
	};
	}

[coderabbitai]

🛠️ Refactor suggestion

API 구현에 대한 개선 제안

다음 사항들을 고려해 주시기 바랍니다:

1. startDate 매개변수에 대한 유효성 검사가 필요합니다
2. URL 파라미터의 안전한 인코딩이 필요합니다
3. 오류 처리를 보강하면 좋겠습니다

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

-export function getHostedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
-  const url = `/api/gatherings/hosted?startDate=${startDate}`;
+export function getHostedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
+  if (!startDate || !isValidDate(startDate)) {
+    throw new Error('유효하지 않은 날짜 형식입니다');
+  }
+
+  const url = `/api/gatherings/hosted?startDate=${encodeURIComponent(startDate)}`;
+
   return fetchApi<{ data: GatheringCardProps[] }>(url, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
-  }).then((response) => response.data);
+  })
+    .then((response) => response.data)
+    .catch((error) => {
+      console.error('모임 목록을 가져오는 중 오류가 발생했습니다:', error);
+      throw error;
+    });

추가로 날짜 유효성 검사를 위한 헬퍼 함수도 필요합니다:

function isValidDate(dateString: string): boolean {
  const date = new Date(dateString);
  return date instanceof Date && !isNaN(date.getTime());
}

[coderabbitai]

🛠️ Refactor suggestion

API 구현에 대한 몇 가지 개선사항이 필요합니다.

다음 사항들을 고려해주시기 바랍니다:

1. startDate 파라미터에 대한 유효성 검사가 필요합니다.
2. 에러 처리 로직이 누락되어 있습니다.
3. URL 파라미터 구성 시 인코딩이 필요합니다.

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

 export function getJoinedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
+  if (!startDate || !/^\d{4}-\d{2}-\d{2}$/.test(startDate)) {
+    throw new Error('유효하지 않은 날짜 형식입니다.');
+  }
-  const url = `/api/gatherings/joined?startDate=${startDate}`;
+  const url = `/api/gatherings/joined?startDate=${encodeURIComponent(startDate)}`;
   return fetchApi<{ data: GatheringCardProps[] }>(url, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
-  }).then((response) => response.data);
+  }).then((response) => response.data)
+    .catch((error) => {
+      console.error('모임 목록을 가져오는데 실패했습니다:', error);
+      throw error;
+    });
 }

추가로, 응답 타입의 안전성을 위해 zod나 다른 런타임 타입 검증 도구의 사용을 고려해보시기 바랍니다.

📝 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

	export function getJoinedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
	const url = `/api/gatherings/joined?startDate=${startDate}`;
	return fetchApi<{ data: GatheringCardProps[] }>(url, {
	method: 'GET',
	headers: {
	'Content-Type': 'application/json',
	},
	}).then((response) => response.data);
	}
	export function getJoinedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
	if (!startDate || !/^\d{4}-\d{2}-\d{2}$/.test(startDate)) {
	throw new Error('유효하지 않은 날짜 형식입니다.');
	}
	const url = `/api/gatherings/joined?startDate=${encodeURIComponent(startDate)}`;
	return fetchApi<{ data: GatheringCardProps[] }>(url, {
	method: 'GET',
	headers: {
	'Content-Type': 'application/json',
	},
	}).then((response) => response.data)
	.catch((error) => {
	console.error('모임 목록을 가져오는데 실패했습니다:', error);
	throw error;
	});
	}

[coderabbitai]

🛠️ Refactor suggestion

에러 처리 개선 필요

타임아웃이나 네트워크 오류 발생 시 적절한 에러 처리가 필요합니다. 현재는 기본적인 Promise rejection만 처리되고 있습니다.

다음과 같이 에러 처리를 개선하는 것을 제안합니다:

 export function loginUser(data: LoginRequest): Promise<{ data: LoginResponse }> {
   return fetchApi<{ data: LoginResponse; headers: Headers }>(
     '/auths/login',
     {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
     },
     5000,
     true,
-  ).then((response) => {
+  ).then((response) => {
     const token = response.headers.get('Authorization');
+    if (!token) {
+      throw new Error('인증 토큰이 없습니다');
+    }
     return { data: { token } };
+  }).catch((error) => {
+    if (error.name === 'TimeoutError') {
+      throw new Error('로그인 요청 시간이 초과되었습니다');
+    }
+    throw error;
   });
 }

📝 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: LoginResponse; headers: Headers }>(
	'/auths/login',
	{
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(data),
	},
	body: JSON.stringify(data),
	}).then((response) => {
	5000,
	true,
	).then((response) => {
	return fetchApi<{ data: LoginResponse; headers: Headers }>(
	'/auths/login',
	{
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(data),
	},
	5000,
	true,
	).then((response) => {
	const token = response.headers.get('Authorization');
	if (!token) {
	throw new Error('인증 토큰이 없습니다');
	}
	return { data: { token } };
	}).catch((error) => {
	if (error.name === 'TimeoutError') {
	throw new Error('로그인 요청 시간이 초과되었습니다');
	}
	throw error;
	});

[coderabbitai]

🛠️ Refactor suggestion

UI 상태 처리 및 접근성 개선 필요

로딩 상태, 에러 상태 표시 및 접근성 속성이 누락되어 있습니다.

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

  return (
-   <div>
+   <div role="main" aria-label="참여한 모임 목록">
      <div className="py-4 md:py-6">
        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
      </div>
+     {isLoading && <div>로딩 중...</div>}
+     {error && <div role="alert">데이터를 불러오는 중 오류가 발생했습니다: {error.message}</div>}
-     {joinedGatheringList && <GatheringListWithDate gatheringList={joinedGatheringList} />}
+     {!isLoading && !error && data && <GatheringListWithDate gatheringList={data} />}
    </div>
  );

Committable suggestion skipped: line range outside the PR's diff.

[coderabbitai]

🛠️ Refactor suggestion

useQuery 훅 최적화 필요

현재 구현에서 중요한 useQuery 기능들이 누락되어 있습니다.

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

- const { data, refetch } = useQuery(
+ const { data, error, isLoading, refetch } = useQuery(
    useGetJoinedGatheringListQuery(formatDateToRequest(selectedDate)),
+   {
+     retry: 1,
+     onError: (error) => setError(error),
+     staleTime: 5 * 60 * 1000, // 5분
+   }
  );

Committable suggestion skipped: line range outside the PR's diff.

[coderabbitai]

🛠️ Refactor suggestion

타입 안전성 개선 필요

현재 구현은 API 응답을 강제로 T 타입으로 변환하고 있어 런타임 에러가 발생할 수 있습니다. 응답 데이터의 형태를 보장하기 위해 다음과 같은 개선이 필요합니다:

- return { data: await response.json() } as T;
+ const responseData = await response.json();
+ if (!responseData || typeof responseData !== 'object') {
+   throw new ApiError(500, '잘못된 응답 형식');
+ }
+ return { data: responseData } as T;

또한 제네릭 타입 T에 대한 제약 조건을 추가하는 것이 좋습니다:

export async function fetchApi<T extends { data: unknown }>(

[coderabbitai]

⚠️ Potential issue

사용되지 않는 매개변수 발견

isAuth 매개변수가 함수 내부에서 전혀 사용되지 않고 있습니다. 현재 인증은 useAuthStore에서 가져온 토큰을 통해 이미 처리되고 있습니다. 불필요한 매개변수는 제거하는 것이 좋습니다.

export async function fetchApi<T>(
  url: string,
  options: RequestInit = {},
  timeout = 5000,
-  isAuth = false,
): Promise<T> {

📝 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

	isAuth = false,
	isAuth = false,
	```
	↓
	```suggestion

[coderabbitai]

🛠️ Refactor suggestion

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

현재 비인증 상태에서 모든 링크가 /login으로 리다이렉트되는데, 다음과 같은 개선사항을 고려해보세요:

1. 로그인 후 원래 의도했던 페이지로 리다이렉트
2. 비인증 사용자에게는 링크를 비활성화하거나 툴팁으로 안내

예시 코드:

- href={isAuth ? href : '/login'}
+ href={isAuth ? href : `/login?redirect=${encodeURIComponent(href)}`}
+ title={!isAuth ? '로그인이 필요한 서비스입니다' : ''}

📝 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

	{links.map(({ href, label }) => (
	<Link
	key={href}
	href={isAuth ? href : '/login'}
	className={`${pathname.startsWith(href) ? 'text-white' : 'text-blue-300'} ml-4`}
	>
	{label}
	</Link>
	))}
	{links.map(({ href, label }) => (
	<Link
	key={href}
	href={isAuth ? href : `/login?redirect=${encodeURIComponent(href)}`}
	className={`${pathname.startsWith(href) ? 'text-white' : 'text-blue-300'} ml-4`}
	title={!isAuth ? '로그인이 필요한 서비스입니다' : ''}
	>
	{label}
	</Link>
	))}

[github-actions]

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

[yulrang]

로그아웃도 화이팅입니다~~~
수고하셨어요~~

[github-actions]

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

[HaeJungg]

수고하셨습니다!👏