Feat/103/detail page get

[HaeJungg]

🔖 Issue Ticket

#103

✍️ Description

디테일 페이지 get으로 요청 되는 부분 추가했습니다!

• 디테일 카드
• 약속 리스트
• 약속 디테일 데이터
  파일이 너무 많아져서 다른 요청은 다른 브렌치에 추가하겠습니다!
  디테일 페이지 수정사항은 어차피 디자인이 바뀌면 다시 작업해야하기때문에,,, 나중에 수정하겠습니다!

어제 줌으로 전달했지만 fetch api에 baseUrl을 추가하고, next config rewrite 부분을 삭제했습니다!

✅ Checklist

PR

• Branch Convention 확인

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

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

Test

• 로컬 작동 확인

Summary by CodeRabbit

• 새로운 기능
  • DetailCrewSection 및 GatheringListSection 컴포넌트 추가로 크루 및 모임 세부정보 표시 기능 향상.
  • useGetCrewDetailQuery, useGetGatheringDetailQuery, useGetGatheringListQuery 훅 추가로 데이터 패칭 및 캐싱 간소화.
• 변경 사항
  • API 호출 및 응답 처리 방식 개선으로 데이터 처리 유연성 증가.
  • GatheringCardCarousel 및 GatheringCard 컴포넌트에 crewId 프로퍼티 추가.
• 버그 수정
  • 에러 처리 로직 개선으로 사용자에게 더 명확한 피드백 제공.

[coderabbitai]

Walkthrough

next.config.mjs 파일에서 URL 재작성 기능이 제거되었으며, 대신 CORS 설정과 이미지 소스 유연성을 강조하고 있습니다. API 호출을 위한 여러 함수의 시그니처가 수정되어 동적 엔드포인트를 사용하고, 새로운 비동기 함수가 추가되었습니다. React Query를 활용한 커스텀 훅이 도입되어 데이터 패칭이 개선되었으며, 여러 컴포넌트가 새롭게 구성되었습니다. 전반적으로 API 요청 처리 및 오류 관리가 강화되었습니다.

Changes

파일 경로	변경 요약
next.config.mjs	rewrites 함수 제거, CORS 설정 강조, 이미지 소스 패턴 수정
src/_apis/detail/get-crew-detail.ts	getCrewDetail 함수 시그니처 수정, 동적 API 엔드포인트 사용
src/_apis/detail/get-gathering-detail.ts	새로운 GetGatheringDetail 함수 추가, 동적 API 엔드포인트 사용
src/_apis/detail/get-gathering-list.ts	getGatheringList 함수 시그니처 수정, 동적 API 엔드포인트 사용
src/_queries/detail/crew-detail-queries.ts	새로운 useGetCrewDetailQuery 훅 추가
src/_queries/detail/gathering-detail-queries.ts	새로운 useGetGatheringDetailQuery 훅 추가
src/_queries/detail/gathering-list-queries.ts	새로운 useGetGatheringListQuery 훅 추가
src/app/(crew)/crew/detail/[id]/_components/detail-crew-section.tsx	새로운 DetailCrewSection 컴포넌트 추가
src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx	새로운 GatheringListSection 컴포넌트 추가
src/app/(crew)/crew/detail/[id]/page.tsx	CrewDetailPage 컴포넌트 수정, 새로운 섹션으로 재구성
src/components/common/crew-list/detail-crew-card.stories.tsx	Storybook 구성 수정, DetailCrewCard로 이름 변경
src/components/common/crew-list/detail-crew-card.tsx	DetailCrewCardProps 인터페이스 수정, 데이터 구조 변경
src/components/common/gathering-card/container.tsx	GatheringCard 컴포넌트에서 API 호출을 쿼리 기반 접근으로 변경
src/components/common/gathering-card/gathering-card.stories.tsx	React Query 통합, Storybook 구성 수정
src/components/common/gathering-card/presenter.tsx	cn 유틸리티 함수의 import 경로 수정
src/components/gathering-list/gathering-card-carousel.tsx	crewId 추가, 레이아웃 및 스타일 수정
src/components/gathering-list/gathering-carousel.stories.tsx	React Query 통합, Storybook 구성 수정
src/components/gathering-list/gathering-list.tsx	카드 렌더링 로직 일시적으로 주석 처리
src/utils/api.ts	ApiError 클래스 및 fetchApi 함수 수정, API 요청 처리 및 오류 관리 개선
.gitignore	.env 항목 추가

Possibly related PRs

• Feat/101/login signup api #106: 이 PR은 next.config.mjs에서 새로운 rewrites 메서드를 도입하여, 주 PR의 구성 파일 변경과 직접적으로 관련이 있습니다.

Suggested labels

pages

Suggested reviewers

• yulrang
• Rangbyeolang
• minkyung5x5

🐰 변화의 바람이 불어와
새로운 길을 열어주네,
데이터도 이제는 쾌적하게,
쿼리로 쉽게 찾아가네.
크루와 모임의 이야기를,
함께 나누는 즐거움이여!
🥕✨

---

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-vaulzkyegj.chromatic.com/

[coderabbitai]

Actionable comments posted: 11

🧹 Outside diff range and nitpick comments (18)

src/_queries/detail/crew-detail-queries.ts (1)

4-9: 커스텀 훅의 개선 사항을 제안드립니다.

현재 구현은 기본적인 기능을 잘 수행하고 있지만, 다음과 같은 개선사항들을 고려해보시면 좋을 것 같습니다:

1. 타입 안전성 강화
2. 캐싱 전략 최적화
3. 에러 처리 개선

다음과 같이 수정해보시는 것은 어떨까요?:

+import { CrewDetailResponse } from '@/src/types/crew';
+
-export function useGetCrewDetailQuery(id: number) {
+export function useGetCrewDetailQuery(id: number) {
+  if (!id) {
+    throw new Error('크루 ID가 필요합니다');
+  }
+
   return useQuery({
     queryKey: ['crewDetail', id],
     queryFn: () => getCrewDetail(id),
+    staleTime: 5 * 60 * 1000, // 5분
+    retry: 1,
+    select: (data: CrewDetailResponse) => {
+      return data;
+    },
   });
 }

src/_queries/detail/gathering-detail-queries.ts (1)

4-9: 에러 처리와 로딩 상태 관리를 개선하면 좋을 것 같습니다.

현재 구현은 기본적인 기능은 잘 동작하지만, 다음과 같은 개선사항을 고려해보시면 좋을 것 같습니다:

1. 쿼리 옵션에 에러 재시도 설정 추가
2. 캐시 시간 설정
3. 스톨 타임 설정

다음과 같이 수정해보시는 건 어떨까요?:

 export function useGetGatheringDetailQuery(crewId: number, gatheringId: number) {
   return useQuery({
     queryKey: ['gatheringDetail', crewId, gatheringId],
     queryFn: () => GetGatheringDetail(crewId, gatheringId),
+    retry: 1,
+    staleTime: 5 * 60 * 1000, // 5분
+    cacheTime: 30 * 60 * 1000, // 30분
   });
 }

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

5-11: 커스텀 훅이 잘 구현되었으나, 몇 가지 개선사항을 제안드립니다.

React Query를 활용한 구현이 잘 되어있습니다. 다만 다음과 같은 개선사항들을 고려해보시면 좋을 것 같습니다:

1. JSDoc 문서화 추가
2. 에러 처리 강화
3. 재시도(retry) 로직 설정 고려

다음과 같이 개선해보시는 건 어떨까요?:

+/**
+ * 모임 목록을 조회하는 쿼리 훅
+ * @param id 크루 ID
+ * @returns 모임 목록 쿼리 결과
+ */
 export function useGetGatheringListQuery(id: number) {
   return useQuery<GatheringType[], Error>({
     queryKey: ['gatheringList', id],
     queryFn: () => getGatheringList(id),
     enabled: !!id,
+    retry: 1,
+    onError: (error) => {
+      console.error('모임 목록 조회 실패:', error);
+    },
   });
 }

src/_apis/detail/get-gathering-list.ts (1)

13-13: 응답 데이터 처리 개선이 필요합니다.

데이터가 없는 경우에 대한 처리가 필요합니다. 다음과 같은 개선을 제안드립니다:

-  return response.data;
+  if (!response.data) {
+    throw new Error('모임 데이터를 찾을 수 없습니다.');
+  }
+  return response.data;

src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (1)

10-20: 사용자 경험 개선을 위한 리팩토링 제안

현재 구현은 기능적으로는 문제가 없으나, 다음과 같은 개선사항을 제안드립니다:

1. 로딩 상태에 단순 텍스트 대신 스켈레톤 UI나 스피너를 사용
2. 에러 메시지를 사용자 친화적으로 수정
3. 데이터 없음 상태에 더 자세한 안내 메시지 추가

다음과 같이 수정하는 것을 제안드립니다:

-  if (isLoading) return <p>로딩 중...</p>;
+  if (isLoading) return <LoadingSkeleton />;

-  if (error) return <p>데이터를 불러오는 데 실패했습니다: {error.message}</p>;
+  if (error) return (
+    <ErrorMessage
+      message="모임 목록을 불러오는 중 문제가 발생했습니다."
+      suggestion="잠시 후 다시 시도해 주세요."
+    />
+  );

-  if (!gatheringList || gatheringList.length === 0) return <p>데이터가 없습니다.</p>;
+  if (!gatheringList || gatheringList.length === 0) return (
+    <EmptyState
+      message="아직 등록된 모임이 없습니다."
+      suggestion="새로운 모임을 만들어보세요!"
+    />
+  );

src/app/(crew)/crew/detail/[id]/_components/detail-crew-section.tsx (4)

7-9: 인터페이스에 JSDoc 문서를 추가하는 것이 좋습니다.

인터페이스의 목적과 id 프로퍼티의 용도를 명확히 설명하는 문서를 추가하면 코드의 가독성이 향상될 것 같습니다.

+/**
+ * 크루 상세 정보 섹션의 프로퍼티
+ * @property {number} id - 조회할 크루의 고유 식별자
+ */
 interface DetailCrewSectionProps {
   id: number;
 }

---

11-13: 에러 바운더리 통합을 고려해보세요.

컴포넌트 수준에서 에러를 잡아내고 처리하는 것도 좋지만, 에러 바운더리를 사용하면 더 체계적인 에러 처리가 가능할 것 같습니다.

---

14-15: 로딩 상태 UI를 개선해주세요.

단순한 텍스트 대신 스켈레톤 UI나 로딩 스피너를 사용하면 사용자 경험이 향상될 것 같습니다.

-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <DetailCrewCardSkeleton />;

---

32-34: 불필요한 주석을 제거해주세요.

조건부 렌더링 로직이 명확하여 주석이 없어도 코드의 의도를 이해할 수 있습니다.

-  // data가 있을 때만 DetailCrewCard를 렌더링
   return data ? <DetailCrewCard data={data} /> : null;

src/app/(crew)/crew/detail/[id]/page.tsx (3)

1-9: 사용하지 않는 import 문을 제거해주세요

CrewReviewSection 컴포넌트가 주석 처리되어 있으므로 해당 import 문도 제거하는 것이 좋습니다.

import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
import CreateGathering from './_components/create-gathering';
import DetailCrewSection from './_components/detail-crew-section';
import GatheringListSection from './_components/gathering-list-section';
-import CrewReviewSection from './_components/review-section';

---

1-2: 사용하지 않는 import 문들을 정리해주세요

getGatheringList와 CreateGathering은 현재 코드에서 사용되지 않고 있습니다.

-import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
-import CreateGathering from './_components/create-gathering';

---

26-26: TODO 및 주석 처리된 코드에 대한 추적이 필요합니다

CreateGathering 컴포넌트와 리뷰 섹션이 주석 처리되어 있습니다. 이러한 미완성 기능들을 추적하기 위한 이슈 생성이 필요해 보입니다.

이러한 TODO 항목들을 추적하기 위한 GitHub 이슈를 생성해드릴까요?

Also applies to: 33-39

src/components/common/crew-list/detail-crew-card.stories.tsx (1)

15-39: 데이터 유효성 검증 추가를 고려해주세요.

data 객체로 props를 구조화한 것은 좋은 개선이지만, 다음 사항들을 고려해보시면 좋겠습니다:

1. 필수 필드에 대한 타입 검증
2. 숫자 필드(participantCount, totalCount 등)의 유효 범위 검증
3. imageUrl과 profileImageUrl의 유효성 검증

예시 코드:

interface CrewMember {
  id: number;
  nickname: string;
  profileImageUrl: string;
}

interface DetailCrewData {
  id: number;
  title: string;
  mainLocation: string;
  subLocation: string;
  participantCount: number;
  totalCount: number;
  confirmed: boolean;
  imageUrl: string;
  totalGatheringCount: number;
  crewMembers: CrewMember[];
}

// 유효성 검증 함수
const validateDetailCrewData = (data: DetailCrewData): boolean => {
  return (
    data.participantCount <= data.totalCount &&
    data.participantCount >= 0 &&
    data.totalCount > 0
  );
};

src/components/common/gathering-card/gathering-card.stories.tsx (2)

28-34: QueryClient 기본 설정 추가를 고려해보세요.

Storybook 환경에서의 더 나은 테스트를 위해 QueryClient의 기본 설정을 추가하는 것이 좋습니다.

다음과 같이 수정해보세요:

- const queryClient = new QueryClient();
+ const queryClient = new QueryClient({
+   defaultOptions: {
+     queries: {
+       retry: false,
+       cacheTime: 0,
+     },
+   },
+ });

---

43-43: 테스트 데이터의 날짜를 더 현실적으로 설정하는 것이 좋습니다.

현재 설정된 2024년 날짜들은 너무 먼 미래의 날짜입니다. 스토리북에서 다양한 시나리오를 테스트하기 위해서는 더 현실적인 날짜 범위를 사용하는 것이 좋습니다.

다음과 같은 날짜 범위를 고려해보세요:

• 가까운 미래 (1-2주 이내)
• 당일
• 전날
• 다음 달

예시:

- dateTime: '2024-11-30T00:30',
+ dateTime: '2023-12-20T00:30',

Also applies to: 57-57

src/components/gathering-list/gathering-card-carousel.tsx (1)

Line range hint 109-122: 인디케이터 스타일링 개선이 필요합니다.

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

1. 하드코딩된 색상 값을 Tailwind 색상 토큰으로 교체
2. 가능하다면 인디케이터의 크기도 디자인 토큰으로 관리

-              backgroundColor:
-                i === Math.floor(currentIndex / slidesToShow) ? '#3b82f6' : '#dbeafe',
+              backgroundColor:
+                i === Math.floor(currentIndex / slidesToShow) ? 'rgb(var(--color-primary))' : 'rgb(var(--color-secondary))',

src/components/common/crew-list/detail-crew-card.tsx (2)

Line range hint 137-143: TODO 주석에 대한 후속 조치가 필요합니다.

주석으로 표시된 captain과 crew 관련 로직이 아직 구현되지 않았습니다. 이는 사용자 권한에 따른 중요한 기능으로 보입니다.

이 기능 구현을 위한 코드를 생성하거나 GitHub 이슈를 생성하는 것을 도와드릴까요?

---

Line range hint 137-143: 확인 상태 표시 로직이 개선되었습니다.

confirmed 상태에 따른 조건부 렌더링이 잘 구현되어 있습니다. 하지만 접근성 향상을 위해 몇 가지 개선사항을 제안드립니다.

다음과 같이 aria-label을 추가하여 스크린 리더 지원을 개선할 수 있습니다:

-              {confirmed && (
-                <span className="flex items-center gap-[1px] text-blue-600">
-                  <Image src={Check} alt="확인" width={24} height={24} />
-                  <span className="text-sm font-medium"> 개설 확정</span>
-                </span>
-              )}
+              {confirmed && (
+                <span className="flex items-center gap-[1px] text-blue-600" aria-label="크루 개설이 확정되었습니다">
+                  <Image src={Check} alt="확정 상태 아이콘" width={24} height={24} />
+                  <span className="text-sm font-medium"> 개설 확정</span>
+                </span>
+              )}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 7c0c126 and 608fe12.

📒 Files selected for processing (20)

• .env (1 hunks)
• next.config.mjs (0 hunks)
• src/_apis/detail/get-crew-detail.ts (1 hunks)
• src/_apis/detail/get-gathering-detail.ts (1 hunks)
• src/_apis/detail/get-gathering-list.ts (1 hunks)
• src/_queries/detail/crew-detail-queries.ts (1 hunks)
• src/_queries/detail/gathering-detail-queries.ts (1 hunks)
• src/_queries/detail/gathering-list-queries.ts (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/detail-crew-section.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/page.tsx (1 hunks)
• src/components/common/crew-list/detail-crew-card.stories.tsx (2 hunks)
• src/components/common/crew-list/detail-crew-card.tsx (2 hunks)
• src/components/common/gathering-card/container.tsx (3 hunks)
• src/components/common/gathering-card/gathering-card.stories.tsx (3 hunks)
• src/components/common/gathering-card/presenter.tsx (1 hunks)
• src/components/gathering-list/gathering-card-carousel.tsx (5 hunks)
• src/components/gathering-list/gathering-carousel.stories.tsx (3 hunks)
• src/components/gathering-list/gathering-list.tsx (2 hunks)
• src/utils/api.ts (2 hunks)

💤 Files with no reviewable changes (1)

• next.config.mjs

✅ Files skipped from review due to trivial changes (3)

• .env
• src/components/common/gathering-card/presenter.tsx
• src/components/gathering-list/gathering-list.tsx

🔇 Additional comments (27)

src/_queries/detail/crew-detail-queries.ts (1)

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

필요한 의존성들이 명확하게 정의되어 있습니다.

src/_queries/detail/gathering-detail-queries.ts (2)

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

React Query와 API 함수가 적절하게 임포트되어 있습니다.

---

6-6: 쿼리 키가 적절하게 구성되었습니다.

쿼리 키가 계층적으로 잘 구성되어 있어 캐시 무효화나 관리가 용이할 것으로 보입니다.

src/_apis/detail/get-crew-detail.ts (1)

7-12: fetchApi 타입 정의가 명확합니다.

응답 데이터의 타입을 제네릭을 통해 명확하게 정의한 것이 좋습니다.

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

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

타입스크립트 타입과 필수 라이브러리들이 적절하게 임포트되어 있습니다.

src/_apis/detail/get-gathering-list.ts (1)

4-4: 함수 시그니처가 적절히 수정되었습니다!

타입 안정성이 잘 유지되었으며, 매개변수 이름이 명확합니다.

src/_apis/detail/get-gathering-detail.ts (1)

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

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

src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (2)

1-9: 코드 구조가 깔끔하고 타입이 잘 정의되어 있습니다!

'use client' 지시문과 필요한 import문이 잘 구성되어 있으며, Props 인터페이스가 명확하게 정의되어 있습니다.

---

11-11: 쿼리 훅 구현 확인이 필요합니다

useGetGatheringListQuery 훅의 구현을 확인하여 다음 사항들이 적절히 처리되고 있는지 검증이 필요합니다:

1. 잘못된 id 파라미터에 대한 처리
2. 네트워크 오류 처리

✅ Verification successful

쿼리 훅 구현 확인 완료

useGetGatheringListQuery 훅이 올바르게 구현되었으며, 에러 처리와 id 파라미터의 사용이 적절하게 처리되고 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify query hook implementation

# Check query hook implementation
ast-grep --pattern 'export function useGetGatheringListQuery($_) {
  $$$
}'

# Check error handling in the hook
rg -A 5 "useGetGatheringListQuery"

Length of output: 2416

src/utils/api.ts (2)

54-54: ⚠️ Potential issue

반환 타입 변경으로 인한 영향 확인이 필요합니다

응답 데이터를 { data: T } 형태로 감싸는 변경은 기존 API를 사용하는 모든 컴포넌트에 영향을 줄 수 있습니다.

다음 스크립트로 영향을 받는 코드를 확인해보겠습니다:

#!/bin/bash
# Description: Find all files that use fetchApi

# Search for fetchApi usage
rg "fetchApi[<(]" --type ts --type tsx -l

# Search for response destructuring patterns that might need updates
rg "const \{(?!data\s*[}])|= await fetchApi" --type ts --type tsx

---

38-39: 🛠️ Refactor suggestion

환경 변수 사용 확인이 필요합니다

NEXT_PUBLIC_API_BASE_URL 환경 변수가 누락된 경우 런타임 오류가 발생할 수 있습니다. 환경 변수의 존재 여부를 확인하는 검증 로직을 추가하는 것이 좋겠습니다.

다음과 같이 수정하는 것을 제안드립니다:

-    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}${url}`, fetchOptions);
+    const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+    if (!baseUrl) {
+      throw new Error('NEXT_PUBLIC_API_BASE_URL 환경 변수가 설정되지 않았습니다.');
+    }
+    const response = await fetch(`${baseUrl}${url}`, fetchOptions);

환경 변수가 설정되어 있는지 확인하기 위해 다음 스크립트를 실행합니다:

src/components/gathering-list/gathering-carousel.stories.tsx (3)

2-2: React Query 설정이 적절히 구현되었습니다.

QueryClient 인스턴스가 올바르게 생성되었으며, 필요한 import문이 추가되었습니다.

Also applies to: 42-43

---

51-57: 스토리북 데코레이터 설정이 잘 구현되었습니다.

QueryClientProvider를 통해 React Query 컨텍스트가 적절히 제공되고 있습니다. 이는 컴포넌트가 실제 환경과 유사한 조건에서 테스트될 수 있도록 보장합니다.

---

67-67: crewId prop 추가에 대한 검증이 필요합니다.

crewId가 추가되었지만, 이 값이 실제 API 호출에서 어떻게 사용되는지 확인이 필요합니다.

✅ Verification successful

crewId prop 추가 검증 완료

crewId가 GatheringCardCarouselProps 인터페이스에 추가되었으며, API 호출에서도 올바르게 사용되고 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: crewId 사용 방식 확인

# GatheringCardCarousel 컴포넌트에서 crewId 사용 확인
ast-grep --pattern 'interface GatheringCardCarouselProps {
  $$$
  crewId: $_
  $$$
}'

# API 호출에서 crewId 사용 확인
rg -A 5 "crewId.*gathering" 

Length of output: 1431

src/components/common/crew-list/detail-crew-card.stories.tsx (1)

2-2: 컴포넌트 이름 변경이 적절히 이루어졌습니다!

컴포넌트 이름이 CrewCard에서 DetailCrewCard로 변경되었고, 이에 따라 메타 설정도 일관성 있게 업데이트되었습니다.

Also applies to: 5-6

src/components/common/gathering-card/gathering-card.stories.tsx (1)

2-2: React Query 설정이 올바르게 구현되었습니다!

QueryClient의 설정이 React Query 공식 문서의 권장 사항을 잘 따르고 있습니다.

Also applies to: 5-5

src/components/gathering-list/gathering-card-carousel.tsx (3)

11-13: 인터페이스 변경이 적절합니다!

crewId 프로퍼티가 적절하게 타입이 지정되어 추가되었습니다.

---

15-18: 컴포넌트 시그니처가 올바르게 업데이트되었습니다!

인터페이스 변경사항이 컴포넌트 시그니처에 정확하게 반영되었습니다.

---

77-78: 스타일링 변경사항 검증이 필요합니다.

마진 값이 변경되고 최소 너비가 추가되었습니다. 다음 사항들을 확인해주세요:

• mb-5로의 변경이 전체 레이아웃 간격에 미치는 영향
• 큰 화면에서 lg:min-w-[362px]가 의도한 대로 작동하는지

src/components/common/crew-list/detail-crew-card.tsx (2)

14-25: Props 인터페이스 구조가 개선되었습니다.

데이터 관련 속성들을 하나의 객체로 그룹화한 것은 좋은 접근입니다. 이는 컴포넌트의 유지보수성을 향상시키고 props 전달을 단순화합니다.

---

28-40: 데이터 구조 변경에 따른 적절한 구현입니다.

객체 구조 분해 할당을 통해 필요한 속성들을 명확하게 추출하고 있습니다. 코드의 가독성이 향상되었습니다.

src/components/common/gathering-card/container.tsx (6)

5-6: LGTM!

필요한 모듈들을 정확하게 임포트하고 있습니다.

---

14-14: LGTM!

crewId 속성을 인터페이스에 추가하여 필요한 데이터를 전달할 수 있게 되었습니다.

---

27-27: LGTM!

함수에서 crewId를 정확하게 받아오고 있습니다.

---

31-31: LGTM!

isLiked 상태를 올바르게 초기화하고 있습니다.

---

70-72: LGTM!

openModal 함수가 적절하게 정의되어 있으며, 모달을 열기 위해 제대로 사용되고 있습니다.

---

50-50: 데이터 패칭 로직 확인 필요

useGetGatheringDetailQuery 훅을 사용하여 데이터를 가져오고 있습니다. crewId와 id가 올바르게 전달되고 있는지 확인해주세요.

다음 스크립트를 사용하여 GatheringCard 컴포넌트에 전달되는 crewId와 id의 사용을 확인할 수 있습니다:

[coderabbitai]

💡 Codebase verification

GetGatheringDetail 함수가 구현되어 있지 않습니다.

GetGatheringDetail 함수의 구현을 추가하여 올바른 동작을 보장해주세요.

🔗 Analysis chain

API 함수 구현을 확인해주세요.

GetGatheringDetail 함수의 구현을 확인하여 올바른 타입과 에러 처리가 되어있는지 검증이 필요합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 함수 구현 확인
ast-grep --pattern 'export function GetGatheringDetail($_: number, $_: number) {
  $$$
}'

# 타입 정의 확인
rg -g '*.ts' -g '*.tsx' "interface.*GatheringDetail" -A 10

Length of output: 3807

[coderabbitai]

🛠️ Refactor suggestion

기본 구현이 잘 되어있으나 에러 처리가 필요합니다.

함수의 기본 구현은 잘 되어 있지만, 다음 사항들을 고려해 주시기 바랍니다:

1. API 호출 실패 시 에러 처리가 없습니다.
2. id 파라미터에 대한 유효성 검사가 필요합니다.

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

 export async function getCrewDetail(id: number): Promise<CrewDetail> {
+  if (!Number.isInteger(id) || id <= 0) {
+    throw new Error('유효하지 않은 crew ID입니다.');
+  }
+
   const url = `/api/crews/${id}`;

-  const response = await fetchApi<{ data: CrewDetail }>(url, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-  return response.data;
+  try {
+    const response = await fetchApi<{ data: CrewDetail }>(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(`크루 상세 정보를 가져오는데 실패했습니다: ${error.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

	export async function getCrewDetail(id: number): Promise<CrewDetail> {
	const url = `/api/crews/${id}`;
	const response = await fetchApi<{ data: CrewDetail }>(url, {
	method: 'GET',
	headers: {
	'Content-Type': 'application/json',
	},
	});
	return { data: response[0] };
	return response.data;
	export async function getCrewDetail(id: number): Promise<CrewDetail> {
	if (!Number.isInteger(id) || id <= 0) {
	throw new Error('유효하지 않은 crew ID입니다.');
	}
	const url = `/api/crews/${id}`;
	try {
	const response = await fetchApi<{ data: CrewDetail }>(url, {
	method: 'GET',
	headers: {
	'Content-Type': 'application/json',
	},
	});
	return response.data;
	} catch (error) {
	throw new Error(`크루 상세 정보를 가져오는데 실패했습니다: ${error.message}`);
	}
	}

[coderabbitai]

💡 Codebase verification

API 문서에 해당 엔드포인트가 존재하지 않습니다.

• src/_apis/detail/get-gathering-detail.ts
• src/_apis/detail/get-gathering-list.ts

🔗 Analysis chain

API 엔드포인트 검증이 필요합니다.

잘못된 ID가 전달되었을 때의 에러 처리가 필요할 수 있습니다. API 문서에서 이 엔드포인트의 존재 여부와 응답 형식을 확인해주세요.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 엔드포인트 사용 검증

# 1. API 문서 파일 검색
echo "API 문서 파일 검색 중..."
fd -e md -e yaml -e json "api|swagger|openapi"

# 2. 관련 엔드포인트 사용 검색
echo "엔드포인트 사용 검색 중..."
rg -l "/api/crews/[^/]+/gatherings"

Length of output: 254

[coderabbitai]

🛠️ Refactor suggestion

함수 네이밍 컨벤션 개선이 필요합니다.

함수명이 파스칼 케이스(PascalCase)로 작성되어 있는데, 일반적인 JavaScript/TypeScript 함수 네이밍 컨벤션에 따라 카멜 케이스(camelCase)로 변경하는 것이 좋습니다.

-export async function GetGatheringDetail(
+export async function getGatheringDetail(
   crewId: number,
   gatheringId: number,
): Promise<GatheringDetailType>

📝 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 async function GetGatheringDetail(
	crewId: number,
	gatheringId: number,
	): Promise<GatheringDetailType> {
	export async function getGatheringDetail(
	crewId: number,
	gatheringId: number,
	): Promise<GatheringDetailType> {

[coderabbitai]

⚠️ Potential issue

에러 처리 로직 추가가 필요합니다.

API 호출 시 발생할 수 있는 다양한 에러 상황(네트워크 오류, 서버 오류 등)에 대한 처리가 누락되어 있습니다. 또한 crewId와 gatheringId가 유효하지 않은 경우에 대한 처리도 필요합니다.

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

 export async function getGatheringDetail(
   crewId: number,
   gatheringId: number,
 ): Promise<GatheringDetailType> {
+  if (!crewId || !gatheringId) {
+    throw new Error('Invalid crewId or gatheringId');
+  }
+
   const url = `/api/crews/${crewId}/gatherings/${gatheringId}`;
 
-  const response = await fetchApi<{ data: GatheringDetailType }>(url, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-  return response.data;
+  try {
+    const response = await fetchApi<{ data: GatheringDetailType }>(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`모임 상세 정보를 가져오는데 실패했습니다: ${error.message}`);
+    }
+    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

	const url = `/api/crews/${crewId}/gatherings/${gatheringId}`;
	const response = await fetchApi<{ data: GatheringDetailType }>(url, {
	method: 'GET',
	headers: {
	'Content-Type': 'application/json',
	},
	});
	return response.data;
	}
	export async function getGatheringDetail(
	crewId: number,
	gatheringId: number,
	): Promise<GatheringDetailType> {
	if (!crewId || !gatheringId) {
	throw new Error('Invalid crewId or gatheringId');
	}
	const url = `/api/crews/${crewId}/gatherings/${gatheringId}`;
	try {
	const response = await fetchApi<{ data: GatheringDetailType }>(url, {
	method: 'GET',
	headers: {
	'Content-Type': 'application/json',
	},
	});
	return response.data;
	} catch (error) {
	if (error instanceof Error) {
	throw new Error(`모임 상세 정보를 가져오는데 실패했습니다: ${error.message}`);
	}
	throw new Error('모임 상세 정보를 가져오는데 실패했습니다');
	}
	}

[coderabbitai]

⚠️ Potential issue

에러 처리 로직을 개선해주세요.

현재 에러 처리 로직이 다소 복잡하며, JSON 파싱 시도는 잠재적인 위험이 있습니다. 다음과 같은 개선사항을 제안드립니다:

1. 에러 타입을 명확히 정의
2. JSON 파싱 대신 타입 가드 사용
3. 에러 메시지 상수화

+const ERROR_MESSAGES = {
+  NOT_FOUND: '크루 정보를 찾을 수 없습니다',
+  DEFAULT: '데이터 통신에 실패했습니다',
+} as const;
+
 if (error) {
-    if (error instanceof ApiError) {
-      try {
-        const errorData = JSON.parse(error.message);
-
-        if (errorData.status === 'NOT_FOUND') {
-          return <p>크루 정보를 찾을 수 없습니다</p>;
-        }
-      } catch {
-        return <p>{`Error ${error.status}: ${error.message}`}</p>;
-      }
-    }
-    return <p>데이터 통신에 실패했습니다.</p>;
+  if (error instanceof ApiError && error.status === 404) {
+    return <ErrorMessage message={ERROR_MESSAGES.NOT_FOUND} />;
+  }
+  return <ErrorMessage message={ERROR_MESSAGES.DEFAULT} />;
 }

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

[coderabbitai]

⚠️ Potential issue

id 파라미터 변환 시 유효성 검사가 필요합니다

Number() 변환 시 잘못된 문자열이 들어올 경우 NaN이 반환될 수 있습니다. 유효성 검사를 추가하는 것이 좋습니다.

-  const id = Number(params.id);
+  const id = Number(params.id);
+  if (isNaN(id)) {
+    throw new Error('Invalid crew ID');
+  }

📝 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 default async function CrewDetailPage({ params }: CrewDetailPageProps) {
	const id = Number(params.id);
	export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
	const id = Number(params.id);
	if (isNaN(id)) {
	throw new Error('Invalid crew ID');
	}

[coderabbitai]

💡 Codebase verification

섹션 컴포넌트들의 에러 처리에 문제가 있습니다

• DetailCrewSection 컴포넌트의 에러 처리에 TODO 주석이 남아 있습니다.
• GatheringListSection 컴포넌트의 에러 메시지가 사용자에게 충분한 정보를 제공하지 않을 수 있습니다.

🔗 Analysis chain

섹션 컴포넌트들의 에러 처리 검증이 필요합니다

DetailCrewSection과 GatheringListSection 컴포넌트에 전달되는 id가 유효하지 않을 경우의 에러 처리가 적절히 구현되어 있는지 확인이 필요합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify error handling in section components

# Check DetailCrewSection implementation
ast-grep --pattern 'function DetailCrewSection($_) {
  $$$
}'

# Check GatheringListSection implementation
ast-grep --pattern 'function GatheringListSection($_) {
  $$$
}'

Length of output: 3735

[coderabbitai]

🛠️ Refactor suggestion

테스트 케이스 다양화가 필요합니다.

현재 스토리는 기본 케이스와 미확인 케이스만 다루고 있습니다. 다음과 같은 추가 케이스들을 고려해보세요:

1. 최대 인원이 찬 경우
2. crewMembers가 있는 경우
3. 긴 제목이나 위치 텍스트의 처리
4. 이미지 로딩 실패 상황

예시 코드:

export const FullParticipants: Story = {
  args: {
    data: {
      ...Default.args.data,
      participantCount: 20,
      totalCount: 20,
    },
  },
};

export const WithCrewMembers: Story = {
  args: {
    data: {
      ...Default.args.data,
      crewMembers: [
        {
          id: 1,
          nickname: '매우 긴 닉네임 테스트',
          profileImageUrl: 'invalid-url',
        },
      ],
    },
  },
};

[coderabbitai]

🛠️ Refactor suggestion

에러 처리 로직 개선 필요

현재 에러 메시지를 파싱하여 상태를 확인하고 있으나, error 객체에 이미 필요한 정보가 포함되어 있을 수 있습니다. JSON.parse(error.message) 대신 error.status를 직접 사용하여 에러 처리를 단순화할 수 있습니다. 이렇게 하면 예외 처리 로직을 간소화하고 잠재적인 파싱 오류를 방지할 수 있습니다.

다음과 같이 코드 수정이 가능합니다:

useEffect(() => {
  if (error) {
-    if (error instanceof ApiError) {
-      try {
-        const errorData = JSON.parse(error.message);
-
-        if (errorData.status === 'NOT_FOUND') {
-          Toast({ message: '모임 정보를 찾을 수 없습니다.', type: 'error' });
-        }
-      } catch {
-        Toast({ message: `Error ${error.status}: ${error.message}`, type: 'error' });
-      }
-    } else {
-      Toast({ message: '데이터 통신에 실패했습니다.', type: 'error' });
-    }
+    if (error.status === 404) {
+      Toast({ message: '모임 정보를 찾을 수 없습니다.', type: 'error' });
+    } else {
+      Toast({ message: `Error ${error.status}: ${error.message}`, type: 'error' });
+    }
  }
}, [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

	if (error) {
	if (error instanceof ApiError) {
	try {
	const errorData = JSON.parse(error.message);
	if (opened) {
	fetchGatheringDetail();
	if (errorData.status === 'NOT_FOUND') {
	Toast({ message: '모임 정보를 찾을 수 없습니다.', type: 'error' });
	}
	} catch {
	Toast({ message: `Error ${error.status}: ${error.message}`, type: 'error' });
	}
	} else {
	Toast({ message: '데이터 통신에 실패했습니다.', type: 'error' });
	}
	}
	}, [opened]);
	}, [error]);
	if (error) {
	if (error.status === 404) {
	Toast({ message: '모임 정보를 찾을 수 없습니다.', type: 'error' });
	} else {
	Toast({ message: `Error ${error.status}: ${error.message}`, type: 'error' });
	}
	}
	}, [error]);

[github-actions]

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

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

.gitignore (1)

30-30: 환경 변수 파일이 올바르게 제외되도록 설정되었습니다.

.env 파일을 Git에서 제외하는 것은 보안상 좋은 관행입니다. 하지만 다른 개발자들을 위해 필요한 환경 변수들을 문서화하는 것이 좋습니다.

.env.example 파일을 생성하여 필요한 환경 변수들의 예시를 제공하는 것을 추천드립니다:

+# .env.example
+NEXT_PUBLIC_API_BASE_URL=https://api.example.com

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 608fe12 and cb6c122.

📒 Files selected for processing (1)

• .gitignore (1 hunks)

🔇 Additional comments (1)

.gitignore (1)

30-30: Git 히스토리에서 환경 변수 파일 확인이 필요합니다.

이전에 실수로 커밋된 환경 변수 파일이 있는지 확인이 필요합니다.