Feat/116/reviewable gathering list api #154

ChoYenii · 2024-11-20T08:28:22Z

🔖 Issue Ticket

Ticket

✍️ Description

리뷰 가능한 모임 목록을 조회하는 api 요청 함수를 작성하고,
기존의 목록 컴포넌트 수정했습니다.

그리고 기존에 writable로 시작하는 타입이나 컴포넌트를 reviewable로 수정했는데 conflict 날 것 같아 두렵슴니다

✅ Checklist

PR

Branch Convention 확인

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

Test

로컬 작동 확인

Summary by CodeRabbit

New Features
- 새로운 설정 "git.ignoreLimitWarning": true가 추가되었습니다.
- ReviewableGatheringCardList 컴포넌트가 추가되어 리뷰 가능한 모임을 표시합니다.
- DetailCrewCard 컴포넌트가 추가되어 크루의 상세 정보를 표시합니다.
- useInfiniteScroll 훅이 추가되어 무한 스크롤 기능을 지원합니다.
Bug Fixes
- Profile 컴포넌트에 priority 프로퍼티가 추가되어 이미지 우선순위를 설정할 수 있습니다.
Refactor
- WritableGatheringCard가 ReviewableGatheringCard로 이름이 변경되었습니다.
- ReviewingModal에 gatheringId 프로퍼티가 추가되었습니다.
Chores
- 여러 의존성의 버전이 업데이트되었습니다.

coderabbitai · 2024-11-20T08:28:31Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

이 변경 사항은 여러 파일에서 설정, 의존성, 컴포넌트 및 타입 정의에 대한 수정 및 추가를 포함합니다. .vscode/settings.json 파일에 Git 경고를 무시하는 새로운 설정이 추가되었고, package.json의 의존성이 업데이트되었습니다. 새로운 비동기 함수와 훅이 추가되어 리뷰 가능한 모임을 가져오는 기능이 구현되었으며, 여러 컴포넌트의 구조와 속성이 수정되었습니다. 또한, 몇몇 파일이 삭제되고 새로운 파일이 추가되었습니다.

Changes

파일 경로	변경 요약
`.vscode/settings.json`	새로운 설정 추가: `"git.ignoreLimitWarning": true`
`package.json`	의존성 버전 업데이트: `@tanstack/react-query` `^5.59.16` → `^5.60.5`, `next` `14.2.15` → `^14.2.15`, `react` `^18` → `^18.3.1`, `react-dom` `^18` → `^18.3.1`
`src/_apis/gathering/reviewable-gathering.ts`	새로운 비동기 함수 추가: `getReviewableGatherings(pageable: PageableTypes)`
`src/_queries/my-gathering/reviewable-gathering-list.tsx`	새로운 함수 추가: `useGetReviewableQuery({ pageable }: { pageable: PageableTypes })`
`src/app/(crew)/api/mock-api/writable-gathering.ts`	함수 삭제: `fetchWritableGatheringData(page: number, limit: number)`
`src/app/(crew)/my-page/_components/profile-card/presenter.tsx`	`Profile` 컴포넌트에 `priority` prop 추가
`src/app/(crew)/my-page/_components/review-tabs.tsx`	여러 새로운 import 추가 및 `handleTabClick` 함수 수정
`src/app/(crew)/my-page/reviewable/page.tsx`	함수 삭제: `ReviewableGatheringsPage`, 새로운 함수 추가: `ReviewableTab`
`src/components/common/crew-list/crew-card.tsx`	`Image` 컴포넌트의 `objectFit` 속성 수정
`src/components/common/crew-list/detail-crew-card.tsx`	새로운 컴포넌트 추가: `DetailCrewCard`
`src/components/common/gathering-card/presenter.tsx`	`Image` 컴포넌트의 속성 수정
`src/components/common/profile/index.tsx`	`ProfileProps` 인터페이스에 `priority` 속성 추가
`src/components/common/writable-gathering-card/writable-gathering-card-list.stories.tsx`	파일 삭제
`src/components/common/writable-gathering-card/writable-gathering-card-list.tsx`	컴포넌트 삭제: `WritableGatheringCardList`
`src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list.tsx`	새로운 컴포넌트 추가: `ReviewableGatheringCardList`
`src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx`	컴포넌트 이름 변경: `WritableGatheringCard` → `ReviewableGatheringCard`
`src/components/my-page/reviewing-modal/reviewing-modal.tsx`	`ReviewingModalProps` 인터페이스에 `gatheringId` 속성 추가
`src/hooks/use-infinite-scroll.ts`	새로운 훅 추가: `useInfiniteScroll`
`src/mock/writable-gathering-data.ts`	파일 삭제
`src/types/reviewable-gathering-card.d.ts`	타입 이름 변경 및 속성 수정

Suggested labels

refactor, fix

Suggested reviewers

yulrang
minkyung5x5
HaeJungg

🐇 변화의 바람이 불어와
새로운 설정과 기능이 가득해
프로필에 우선순위 추가되고
리뷰 카드가 새롭게 태어나네!
모두 함께 즐거운 모임을 위해
달려가자, 기쁜 마음으로! 🌼

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-20T08:30:39Z

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

coderabbitai

Actionable comments posted: 13

🧹 Outside diff range and nitpick comments (18)

src/types/reviewable-gathering-card.d.ts (2)
Line range hint 6-14: 필드 설명 주석을 모든 속성에 추가하면 좋겠습니다.

현재 일부 필드에만 한글 주석이 있습니다. 모든 필드에 대한 설명을 추가하면 타입의 사용성이 향상될 것 같습니다.

다음과 같이 모든 필드에 주석을 추가하는 것을 제안합니다:
 export type ReviewableGatheringCardInform = {
   id: number; // 약속 ID
   title: string; // 약속 이름
-  dateTime: string;
+  dateTime: string; // 약속 날짜 및 시간
-  location: string;
+  location: string; // 약속 장소
-  currentCount: number;
+  currentCount: number; // 현재 참가자 수
-  totalCount: number;
+  totalCount: number; // 전체 참가자 수
-  imageUrl: string;
+  imageUrl: string; // 모임 대표 이미지 URL
-  participants: ParticipantType[];
+  participants: ParticipantType[]; // 참가자 목록
 };
Line range hint 16-20: 참가자 타입에 대한 설명 주석이 필요합니다.

ParticipantType의 각 필드에 대한 설명을 추가하면 좋겠습니다.

다음과 같이 주석을 추가하는 것을 제안합니다:
 export type ParticipantType = {
-  id: number;
+  id: number; // 참가자 고유 ID
-  profileImageUrl?: string;
+  profileImageUrl?: string; // 참가자 프로필 이미지 URL (선택사항)
-  nickname: string;
+  nickname: string; // 참가자 닉네임
 };
src/_apis/gathering/reviewable-gathering.ts (1)
10-12: 에러 처리 개선 필요

현재 에러 메시지가 너무 일반적입니다. API 응답의 구체적인 에러 정보를 포함하면 디버깅에 도움이 될 것 같습니다.

다음과 같이 수정하는 것을 제안드립니다:
  if (!response.data) {
-   throw new Error('Failed to get reviewable gatherings');
+   throw new Error(`Failed to get reviewable gatherings: ${JSON.stringify(response)}`);
  }
src/hooks/use-infinite-scroll.ts (4)
Line range hint 6-13: 제네릭 타입과 매개변수 정의가 명확합니다.

타입 안전성이 잘 보장되어 있으며, 필요한 매개변수들이 적절하게 정의되어 있습니다. 다만, 타입 문서화를 위한 JSDoc 주석 추가를 고려해보시면 좋을 것 같습니다.

다음과 같이 JSDoc 주석을 추가하는 것을 제안드립니다:
+/**
+ * 무한 스크롤 기능을 구현하는 커스텀 훅
+ * @template TData - 페이지 데이터의 타입
+ * @param {Object} params - 훅 파라미터
+ * @param {string[]} params.queryKey - React Query 캐시 키
+ * @param {Function} params.queryFn - 데이터를 가져오는 함수
+ * @param {Function} params.getNextPageParam - 다음 페이지 파라미터를 결정하는 함수
+ */
export const useInfiniteScroll = <TData>({
Line range hint 21-24: Intersection Observer 설정의 threshold 값 검토가 필요합니다.

threshold가 1로 설정되어 있어 요소가 100% 보여야만 감지됩니다. 이는 사용자 경험 측면에서 너무 늦은 시점일 수 있습니다.

다음과 같이 수정하는 것을 제안드립니다:
const { ref, inView } = useInView({
-  threshold: 1,
+  threshold: 0.5, // 요소가 50% 보일 때 감지
+  rootMargin: '100px', // 뷰포트 하단 100px 전에 미리 감지
});
Line range hint 25-27: 무한 스크롤 로직이 간결하게 구현되었습니다.

조건문이 명확하고 이해하기 쉽게 작성되었습니다. 다만, 에러 처리나 재시도 로직이 없는 점이 우려됩니다.

다음과 같은 에러 처리 로직 추가를 제안드립니다:
-if (inView && hasNextPage && !isFetchingNextPage) {
-  fetchNextPage();
+if (inView && hasNextPage && !isFetchingNextPage) {
+  fetchNextPage().catch((error) => {
+    console.error('Failed to fetch next page:', error);
+    // 필요한 경우 에러 처리 로직 추가
+  });
}
Line range hint 29-29: 반환값에 타입 명시가 필요합니다.

반환 객체의 타입을 명시적으로 정의하면 타입 안전성이 향상될 것 같습니다.

다음과 같이 수정하는 것을 제안드립니다:
-return { data, error, isLoading, ref, isFetchingNextPage, refetch };
+type InfiniteScrollResult<T> = {
+  data: InfiniteData<T> | undefined;
+  error: Error | null;
+  isLoading: boolean;
+  ref: (node?: Element | null) => void;
+  isFetchingNextPage: boolean;
+  refetch: () => Promise<void>;
+};
+
+return {
+  data,
+  error,
+  isLoading,
+  ref,
+  isFetchingNextPage,
+  refetch,
+} as InfiniteScrollResult<TData>;
src/_queries/my-gathering/reviewable-gathering-list.tsx (1)
13-17: 에러 처리를 더 구체적으로 개선해 주세요

현재 에러 처리가 너무 일반적입니다. API 응답의 구체적인 에러 케이스를 처리하는 것이 좋겠습니다.
-        if (response === undefined || response === null) {
-          throw new Error('약속 목록을 불러오는 데 실패했습니다.');
-        }
-        return response;
+        if (!response?.data) {
+          throw new Error('약속 목록 데이터가 존재하지 않습니다.');
+        }
+        if (response.error) {
+          throw new Error(`약속 목록 조회 실패: ${response.error.message}`);
+        }
+        return response.data;
src/app/(crew)/my-page/_components/profile-card/presenter.tsx (1)
28-28: priority prop의 목적을 문서화해주세요.

이미지 로딩 우선순위와 관련된 prop이 추가되었습니다. 다른 개발자들의 이해를 돕기 위해 주석으로 설명을 추가하면 좋을 것 같습니다.
-                <Profile editable imageUrl={data?.profileImageUrl ?? ''} priority />
+                {/* 프로필 이미지의 빠른 로딩을 위해 priority prop 사용 */}
+                <Profile editable imageUrl={data?.profileImageUrl ?? ''} priority />
src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list.tsx (2)
9-13: 페이지네이션 설정의 유연성 개선 필요

페이지 크기가 하드코딩되어 있어 화면 크기에 따른 최적화가 어려울 수 있습니다. 환경 설정이나 props로 관리하는 것을 고려해보세요.
+interface ReviewableGatheringCardListProps {
+  pageSize?: number;
+}
+
-export default function ReviewableGatheringCardList() {
+export default function ReviewableGatheringCardList({ pageSize = 6 }: ReviewableGatheringCardListProps) {
   const { data, ref, isFetchingNextPage } = useInfiniteScroll(
     useGetReviewableQuery({
-      pageable: { page: 0, size: 6, sort: ['dateTime,desc'] },
+      pageable: { page: 0, size: pageSize, sort: ['dateTime,desc'] },
     }),
   );
15-18: 빈 상태 확인 로직 단순화 필요

현재 빈 상태 확인 로직이 다소 복잡합니다. 가독성을 높이기 위해 별도의 유틸리티 함수로 분리하는 것을 추천드립니다.
+const isPageEmpty = (page: any) => 
+  Array.isArray(page.content) && page.content.length === 0;
+
 const isDataEmpty =
   !data ||
   data.pages.length === 0 ||
-  data.pages.every((page) => Array.isArray(page.content) && page.content.length === 0);
+  data.pages.every(isPageEmpty);
src/app/(crew)/my-page/_components/review-tabs.tsx (1)
27-27: 라우터 에러 처리 추가 권장

router.push() 호출 시 발생할 수 있는 에러에 대한 처리가 없습니다. 네비게이션 실패 시 사용자에게 적절한 피드백을 제공하기 위해 try-catch 블록 추가를 고려해 주세요.
-      router.push(selectedTab.route);
+      try {
+        await router.push(selectedTab.route);
+      } catch (error) {
+        console.error('페이지 이동 중 오류가 발생했습니다:', error);
+        // 에러 처리 로직 추가
+      }
src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx (4)
1-10: 임포트 구문 그룹화 제안

임포트 구문을 다음과 같이 논리적으로 그룹화하면 코드의 가독성이 향상될 것 같습니다:

React 관련

Next.js 관련

컴포넌트

타입

에셋
'use client';

import { useState } from 'react';
import Image from 'next/image';
+
import Profiles from '@/src/components/common/crew-list/profiles';
import Button from '@/src/components/common/input/button';
import ReviewingModal from '../reviewing-modal/reviewing-modal';
+
import { ParticipantType } from '@/src/types/reviewable-gathering-card';
+
import person from '@/public/assets/icons/person.svg';
Line range hint 11-18: 인터페이스 문서화 추가 제안

인터페이스에 JSDoc 문서를 추가하여 각 프로퍼티의 목적과 사용법을 명확히 설명하면 좋을 것 같습니다.
+/**
+ * 리뷰 가능한 모임 카드의 프로퍼티를 정의하는 인터페이스
+ */
interface ReviewableGatheringCardProps {
+  /** 모임의 고유 식별자 */
  id: number;
+  /** 모임의 이름 */
  gatheringName: string;
+  /** 모임 날짜와 시간 (ISO 문자열) */
  dateTime: string;
+  /** 현재 참여자 수 */
  currentCount: number;
+  /** 총 참여 가능 인원 */
  totalCount: number;
+  /** 모임 대표 이미지 URL */
  imageUrl: string;
+  /** 참여자 목록 */
  participants: ParticipantType[];
}
Line range hint 20-30: 날짜 포맷팅 유틸리티 함수 개선 필요

NOTE 주석에 언급된 대로 이 함수는 추후 통합이 필요해 보입니다.

시간 정보도 처리할 수 있도록 기능을 확장하면 좋을 것 같습니다.

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

src/utils/date.ts와 같은 공통 유틸리티 파일로 이동

시간 포맷팅 기능 추가

국제화(i18n) 지원 고려

공통 유틸리티로의 리팩토링을 도와드릴까요?

Let me generate the final response based on the gathered information.

fill 속성이 있는 Image 컴포넌트에 object-fit 관련 속성 추가 필요

코드베이스 분석 결과, 다른 컴포넌트들의 Image 사용 패턴을 보면 fill 속성과 함께 object-fit 관련 속성을 함께 사용하고 있습니다:

detail-crew-presenter.tsx: objectFit="cover" 속성 사용

file-input/index.tsx: className="object-cover" 사용

scheduled-gathering-card/presenter.tsx: className="object-cover" 사용

crew-card.tsx 및 detail-crew-card.tsx: style={{ objectFit: 'cover' }} 사용

따라서 이미지 비율 유지를 위해 다음과 같이 수정이 필요합니다:
- <Image src={imageUrl} alt={gatheringName} fill />
+ <Image src={imageUrl} alt={gatheringName} fill className="object-cover" />

- <Image alt="참여 인원" src={person} fill />
+ <Image alt="참여 인원" src={person} fill className="object-cover" />
🔗 Analysis chain

Line range hint 32-88: 컴포넌트 구현 개선 사항

모달 상태 관리:

모달 상태를 상위 컴포넌트로 끌어올리는 것이 좋을 것 같습니다.

이렇게 하면 모달 상태를 다른 컴포넌트와 공유하기 쉬워집니다.

이미지 처리:

objectFit 프로퍼티가 제거되었는데, 이미지 비율 유지를 위해 필요할 수 있습니다.

스타일링:

인라인 스타일을 Tailwind 클래스로 추출하면 재사용성이 향상될 것 같습니다.
-<Image src={imageUrl} alt={gatheringName} fill />
+<Image 
+  src={imageUrl} 
+  alt={gatheringName} 
+  fill 
+  className="object-cover"
+/>
이미지 비율 관련 이슈를 확인하기 위해 다음 스크립트를 실행해보겠습니다:
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# 이미지 컴포넌트의 objectFit 사용 패턴 확인
rg -A 2 "<Image.*fill.*>" 
Length of output: 2368
src/components/common/crew-list/detail-crew-card.tsx (2)
13-26: 인터페이스에 JSDoc 문서화 추가 필요

인터페이스의 각 필드에 대한 설명이 없어 다른 개발자들이 컴포넌트를 사용할 때 어려움이 있을 수 있습니다.

다음과 같이 JSDoc을 추가하는 것을 추천드립니다:
+/**
+ * DetailCrewCard 컴포넌트의 props 인터페이스
+ */
 interface DetailCrewCardProps {
   data: {
+    /** 크루의 고유 식별자 */
     id: number;
+    /** 크루의 제목 */
     title: string;
     // ... 나머지 필드에 대한 설명 추가
   };
 }
28-44: 모달 관련 로직을 커스텀 훅으로 분리 권장

모달 상태 관리 로직을 재사용 가능한 커스텀 훅으로 분리하면 코드의 가독성과 재사용성이 향상될 것 같습니다.

다음과 같은 커스텀 훅 생성을 제안드립니다:
function useConfirmationModal() {
  const [opened, { open, close }] = useDisclosure();
  return {
    opened,
    openModal: open,
    closeModal: close
  };
}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 3fa083e and b1c19b7.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (20)

.vscode/settings.json (1 hunks)
package.json (1 hunks)
src/_apis/gathering/reviewable-gathering.ts (1 hunks)
src/_queries/my-gathering/reviewable-gathering-list.tsx (1 hunks)
src/app/(crew)/api/mock-api/writable-gathering.ts (0 hunks)
src/app/(crew)/my-page/_components/profile-card/presenter.tsx (1 hunks)
src/app/(crew)/my-page/_components/review-tabs.tsx (2 hunks)
src/app/(crew)/my-page/reviewable/page.tsx (1 hunks)
src/components/common/crew-list/crew-card.tsx (1 hunks)
src/components/common/crew-list/detail-crew-card.tsx (1 hunks)
src/components/common/gathering-card/presenter.tsx (1 hunks)
src/components/common/profile/index.tsx (3 hunks)
src/components/common/writable-gathering-card/writable-gathering-card-list.stories.tsx (0 hunks)
src/components/common/writable-gathering-card/writable-gathering-card-list.tsx (0 hunks)
src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list.tsx (1 hunks)
src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx (4 hunks)
src/components/my-page/reviewing-modal/reviewing-modal.tsx (1 hunks)
src/hooks/use-infinite-scroll.ts (1 hunks)
src/mock/writable-gathering-data.ts (0 hunks)
src/types/reviewable-gathering-card.d.ts (1 hunks)

💤 Files with no reviewable changes (4)

src/app/(crew)/api/mock-api/writable-gathering.ts
src/components/common/writable-gathering-card/writable-gathering-card-list.stories.tsx
src/components/common/writable-gathering-card/writable-gathering-card-list.tsx
src/mock/writable-gathering-data.ts

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

src/components/common/crew-list/crew-card.tsx
src/components/common/gathering-card/presenter.tsx

🧰 Additional context used

🪛 Biome

src/components/common/profile/index.tsx

[error] 73-73: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🔇 Additional comments (15)

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

1-3: import 경로 별칭(@/src)이 올바르게 구성되어 있는지 확인이 필요합니다.

import 문에서 사용된 '@/src' 경로 별칭이 프로젝트의 tsconfig.json 또는 다른 구성 파일에서 올바르게 설정되어 있는지 확인해주세요.

✅ Verification successful

import 경로 별칭(@/src)이 정상적으로 설정되어 있고 컴포넌트 파일도 올바른 위치에 존재합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify path alias configuration

# Check tsconfig.json for path aliases
echo "Checking tsconfig.json for path aliases..."
cat tsconfig.json | jq '.compilerOptions.paths'

# Check if the imported component exists
echo "Checking if the imported component exists..."
fd -t f "reviewable-gathering-card-list.tsx" src/components/my-page/reviewable-gatherings

Length of output: 953

src/types/reviewable-gathering-card.d.ts (1)

1-3: 응답 타입 정의가 명확하고 적절합니다!

페이지네이션을 위한 hasNext와 데이터를 위한 content 배열이 잘 정의되어 있습니다.

src/hooks/use-infinite-scroll.ts (2)

1-5: 필요한 의존성이 모두 import 되었습니다.

클라이언트 사이드 렌더링을 위한 'use client' 지시문과 필수 라이브러리들이 올바르게 import 되었습니다.

Line range hint 14-20: React Query 설정이 적절하게 구성되었습니다.

초기 페이지 파라미터가 0으로 설정되어 있는데, 이는 백엔드 API의 페이지네이션 구현과 일치하는지 확인이 필요합니다.

다음 스크립트로 API 구현을 확인해보시기 바랍니다:

✅ Verification successful

페이지네이션 구현이 백엔드 API와 일치함이 확인되었습니다

코드베이스 분석 결과, 다음과 같은 이유로 initialPageParam: 0 설정이 적절합니다:

모든 API 호출에서 pageParam = 0을 기본값으로 사용하고 있습니다.
백엔드 API 호출 시 page: pageParam으로 전달되어 일관성이 유지됩니다.
getNextPageParam 구현에서도 0부터 시작하는 페이지 번호 체계를 전제로 동작합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 구현에서 페이지네이션 시작 값 확인
rg -A 5 "page.*param" --type ts

Length of output: 33

Script:

#!/bin/bash
# 페이지네이션 관련 코드 검색을 위한 다양한 패턴 확인
rg -A 5 "getNextPageParam|pageParam|initialPage" --type ts

# API 호출 부분에서 페이지 파라미터 사용 확인
ast-grep --pattern 'queryFn = async ({ pageParam }) => { $$$ }'

# 페이지네이션 관련 타입이나 인터페이스 검색
rg -A 3 "interface.*Page|type.*Page" --type ts

Length of output: 9490

src/_queries/my-gathering/reviewable-gathering-list.tsx (1)

1-6: 코드가 깔끔하고 잘 구성되어 있습니다!

타입 정의와 import 구문이 명확하게 작성되어 있습니다.

src/app/(crew)/my-page/_components/profile-card/presenter.tsx (1)

28-28: Profile 컴포넌트의 priority prop 타입 검증이 필요합니다.

Profile 컴포넌트에 priority prop이 추가되었습니다. 타입 안전성을 위해 타입 정의를 확인해주세요.

✅ Verification successful

Profile 컴포넌트의 priority prop이 올바르게 정의되어 있습니다.

ProfileProps 인터페이스에 priority prop이 boolean 타입으로 정의되어 있어 타입 안전성이 확보되었습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Profile 컴포넌트의 타입 정의 확인

# Profile 컴포넌트의 타입 정의 검색
ast-grep --pattern 'interface ProfileProps {
  $$$
}'

# priority prop이 사용된 다른 곳 검색
rg "priority.*Profile"

Length of output: 611

Script:

#!/bin/bash
# Profile 컴포넌트의 구현부 확인
ast-grep --pattern 'const Profile = ({ $$ }: ProfileProps) => {
  $$$
}'

# Profile 컴포넌트 사용 패턴 검색
rg -A 2 "<Profile.*priority"

Length of output: 424

src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list.tsx (1)

3-6: 타입과 API 응답 일치 여부 확인 필요

ReviewableGatheringCardInformResponse 타입이 API 응답 구조와 일치하는지 확인이 필요합니다.

✅ Verification successful

Let me gather more information about the type definition.

Let me try one more search to find the type definition:

타입 정의가 API 응답과 올바르게 일치함을 확인했습니다

API 응답 타입 ReviewableGatheringCardInformResponse가 다음과 같이 적절하게 정의되어 있습니다:

페이지네이션을 위한 content 배열과 hasNext 필드를 포함
content 배열의 각 항목은 ReviewableGatheringCardInform 타입으로 모든 필수 필드 포함
API 호출 함수 getReviewableGatherings에서 동일한 타입을 사용하여 응답 처리

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 응답 타입과 실제 타입 정의 비교
ast-grep --pattern 'interface ReviewableGatheringCardInformResponse {
  $$$
}'

# API 응답 처리 로직 확인
rg -A 5 'getReviewableGatherings'

Length of output: 3303

Script:

#!/bin/bash
# Check the type definition file
fd reviewable-gathering-card.ts --exec cat {}

# Check the API response handling
rg -A 5 'ReviewableGatheringCardInformResponse' --type typescript

Length of output: 2996

Script:

#!/bin/bash
# Search for the type definition in all files
rg -A 10 'type ReviewableGatheringCardInformResponse' 
rg -A 10 'interface ReviewableGatheringCardInformResponse'

# Check the API response structure in the API file
fd reviewable-gathering.ts --exec cat {}

Length of output: 1491

src/app/(crew)/my-page/_components/review-tabs.tsx (2)

6-13: 사용되지 않는 import 문 확인 필요

현재 주석 처리된 코드로 인해 다음 import 문들이 사용되지 않고 있습니다:

getReviewableGatherings
useInfiniteScroll
fetchMyReviewData
ReviewableGatheringCardList
ReviewInformResponse
ReviewableGatheringCardInformResponse

무한 스크롤 기능을 구현할 계획이 있다면 유지하고, 그렇지 않다면 제거하는 것이 좋습니다.

Line range hint 31-49: 주석 처리된 무한 스크롤 코드 구현 계획 확인 필요

현재 주석 처리된 무한 스크롤 구현 코드가 있습니다. 이 기능의 구현 계획과 일정을 명확히 하고, 다음 중 하나의 조치를 취하는 것이 좋습니다:

기능 구현이 예정되어 있다면:
- TODO 주석을 추가하여 구현 계획을 명시
- 관련 이슈 번호를 주석으로 추가
기능 구현이 불필요하다면:
- 주석 처리된 코드 제거
- 관련 import 문 정리

src/components/common/profile/index.tsx (3)

26-26: 인터페이스에 priority 속성이 잘 추가되었습니다.

priority 속성이 선택적 boolean 타입으로 적절하게 정의되었습니다.

35-35: 기본값 설정이 적절합니다.

priority prop의 기본값을 false로 설정한 것이 적절합니다. 필요한 경우에만 true로 설정하여 최적화할 수 있습니다.

72-75: Image 컴포넌트 속성 변경에 대한 검토가 필요합니다.

Next.js Image 컴포넌트의 속성이 변경되었습니다:

fill과 style={{ objectFit: 'cover' }}로의 변경은 최신 Next.js 버전과 호환됩니다.
priority 속성 추가는 LCP(Largest Contentful Paint) 최적화에 도움이 될 수 있습니다.

하지만 다음 사항을 확인해주세요:

이미지 URL이 없을 때 defaultImage를 사용하는 조건부 렌더링의 성능
priority 속성이 실제로 필요한 페이지에서만 사용되는지 여부

다음 스크립트로 priority 속성의 사용을 확인할 수 있습니다:

✅ Verification successful

Image 컴포넌트 속성 변경이 적절하게 구현되었습니다.

검증 결과:

Profile 컴포넌트는 마이페이지의 프로필 카드(src/app/(crew)/my-page/_components/profile-card/presenter.tsx)에서만 priority 속성이 사용되고 있습니다.
다른 페이지에서는 priority 속성 없이 적절하게 사용되고 있어, LCP 최적화가 필요한 곳에서만 선택적으로 적용되었습니다.
fill과 objectFit: 'cover' 스타일은 프로필 이미지의 일관된 표시를 위해 적절하게 사용되었습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Profile 컴포넌트에서 priority prop이 true로 설정된 곳을 검색

# Test: priority prop이 true로 설정된 곳 검색
rg -l "Profile.*priority.*true"

Length of output: 33

Script:

#!/bin/bash
# 1. Profile 컴포넌트의 사용처 검색
rg -A 3 "<Profile" 

# 2. priority prop이 사용된 모든 Image 컴포넌트 검색
rg -A 2 "Image.*priority.*true"

# 3. Profile 컴포넌트의 전체 구현 확인
fd "profile" --type f --exec cat {}

Length of output: 9737

🧰 Tools

🪛 Biome

[error] 73-73: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

package.json (1)

28-28: @tanstack/react-query 버전 업데이트 검토 필요

react-query의 버전 업데이트(^5.59.16 → ^5.60.5)가 새로운 무한 스크롤 기능과 관련이 있습니다. 업데이트된 버전의 변경 사항을 검토하여 호환성 문제가 없는지 확인해주세요.

✅ Verification successful

@tanstack/react-query 버전 업데이트는 안전해 보입니다

코드베이스 분석 결과, react-query의 기본적인 사용(QueryClient 설정)이 확인되었으며, 현재 구현된 기능들은 버전 업데이트로 인한 영향을 받지 않을 것으로 보입니다. QueryClient 설정에서는 기본적인 staleTime과 에러 처리 로직만 사용하고 있어 ^5.60.5 버전으로의 마이너 업데이트는 안전할 것으로 판단됩니다.

src/components/client-provider.tsx에서 확인된 QueryClient 설정이 새 버전과 호환됩니다.
스토리북 파일들의 기본 QueryClient 인스턴스 생성도 영향받지 않습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check changelog and breaking changes for @tanstack/react-query

# Fetch the changelog between versions
curl -s "https://raw.githubusercontent.com/TanStack/query/main/CHANGELOG.md" | grep -A 10 "5.60.5\|5.59.16"

Length of output: 107

Script:

#!/bin/bash
# Let's check for any usage of @tanstack/react-query features in the codebase
# This will help us understand the impact of the version update

# Search for react-query hooks and features
rg -l "useQuery|useInfiniteQuery|useMutation|useQueryClient" --type ts --type tsx

# Search for QueryClient configuration
ast-grep --pattern 'new QueryClient'

Length of output: 2526

Script:

#!/bin/bash
# Let's check for specific react-query features usage, especially infinite query
# which might be related to the version update

# Search for infinite query usage
rg "useInfiniteQuery" -A 5 --type js --type jsx --type ts

# Search for any query key definitions to understand data fetching patterns
rg "queryKey:" -A 2 --type js --type jsx --type ts

Length of output: 164

.vscode/settings.json (2)

77-77: TypeScript 포맷터 설정이 적절합니다!

JavaScript와 동일하게 Prettier를 사용하도록 설정하여 일관성을 유지하고 있습니다.

78-78: Git 무시 한도 경고 설정에 대해 검토가 필요합니다.

git.ignoreLimitWarning 설정을 추가한 것은 프로젝트에 많은 수의 무시된 파일이 있다는 것을 의미할 수 있습니다. 이는 잠재적인 문제를 나타낼 수 있습니다.

다음 스크립트를 실행하여 .gitignore 파일의 상태를 확인해보세요:

프로젝트 구조를 검토하고 다음 사항을 고려해보시기 바랍니다:

빌드 산출물이 적절히 정리되고 있는지
불필요한 파일이 프로젝트에 포함되어 있지는 않은지
.gitignore 패턴이 너무 광범위하지는 않은지

✅ Verification successful

Git 무시 한도 경고 설정이 적절합니다.

.gitignore 파일을 검토한 결과, 일반적인 Node.js/Next.js 프로젝트에서 사용되는 표준적인 무시 패턴만을 포함하고 있습니다. 현재 무시된 파일이 0개로 확인되어 git.ignoreLimitWarning 설정은 단순히 예방 차원의 설정으로 보입니다.

무시 패턴 목록이 다음과 같이 적절하게 구성되어 있습니다:

의존성 관련: /node_modules, .pnp, .yarn
빌드 산출물: /build, /.next, /out
환경 설정: .env, .env*.local
테스트/디버그 관련: /coverage, npm-debug.log*
Storybook 관련: /storybook-static

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check .gitignore patterns and ignored files count

# Show .gitignore patterns
echo "=== .gitignore 패턴 ==="
cat .gitignore

# Count ignored files
echo -e "\n=== 무시된 파일 수 ==="
git status --ignored | grep -c "ignored"

Length of output: 603

coderabbitai · 2024-11-20T08:33:42Z

src/app/(crew)/my-page/reviewable/page.tsx

+export default function ReviewableTab() {
+  return <ReviewableGatheringCardList />;
 }


🛠️ Refactor suggestion

에러 처리와 로딩 상태 관리가 필요합니다.

현재 구현은 매우 단순하여 다음과 같은 개선사항을 고려해보시기 바랍니다:

에러 바운더리 추가

로딩 상태 처리

폴백 UI 구현

다음과 같이 개선할 수 있습니다:

+import { Suspense, ErrorBoundary } from 'react'; +import LoadingSpinner from '@/src/components/common/loading-spinner'; +import ErrorFallback from '@/src/components/common/error-fallback'; export default function ReviewableTab() { - return <ReviewableGatheringCardList />; + return ( + <ErrorBoundary fallback={<ErrorFallback />}> + <Suspense fallback={<LoadingSpinner />}> + <ReviewableGatheringCardList /> + </Suspense> + </ErrorBoundary> + ); }

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

coderabbitai · 2024-11-20T08:33:42Z

src/_apis/gathering/reviewable-gathering.ts

+import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
+
+export async function getReviewableGatherings(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;


🛠️ Refactor suggestion

sort 매개변수의 기본값 설정 개선 필요

sort 매개변수의 기본값이 ['string']으로 하드코딩되어 있습니다. 이는 실제 정렬 로직과 맞지 않을 수 있습니다.

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

- const { page, size, sort = ['string'] } = pageable; + const { page, size, sort = ['createdAt,desc'] } = pageable;

📝 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 { page, size, sort = ['string'] } = pageable;

const { page, size, sort = ['createdAt,desc'] } = pageable;

coderabbitai · 2024-11-20T08:33:42Z

src/_apis/gathering/reviewable-gathering.ts

+export async function getReviewableGatherings(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;
+  const response: { data: ReviewableGatheringCardInformResponse } = await fetchApi(
+    `/api/gatherings/reviewable?page=${page}&size=${size}&sort=${sort}`,


⚠️ Potential issue

URL 매개변수 인코딩 처리 필요

URL 매개변수가 인코딩되지 않아 특수 문자가 포함된 경우 문제가 발생할 수 있습니다.

다음과 같이 encodeURIComponent를 사용하여 수정하는 것을 제안드립니다:

- `/api/gatherings/reviewable?page=${page}&size=${size}&sort=${sort}`, + `/api/gatherings/reviewable?page=${encodeURIComponent(page)}&size=${encodeURIComponent(size)}&sort=${encodeURIComponent(sort)}`,

📝 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

`/api/gatherings/reviewable?page=${page}&size=${size}&sort=${sort}`,

`/api/gatherings/reviewable?page=${encodeURIComponent(page)}&size=${encodeURIComponent(size)}&sort=${encodeURIComponent(sort)}`,

coderabbitai · 2024-11-20T08:33:42Z

src/components/my-page/reviewing-modal/reviewing-modal.tsx

 }

-export default function ReviewingModal({ opened, close }: ReviewingModalProps) {
+export default function ReviewingModal({ gatheringId, opened, close }: ReviewingModalProps) {


🛠️ Refactor suggestion

ReviewForm에 gatheringId를 전달해야 합니다.

리뷰 작성 시 어떤 모임에 대한 리뷰인지 식별하기 위해 gatheringId가 필요할 것 같습니다. ReviewForm 컴포넌트에 이 값을 전달하는 것이 좋겠습니다.

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

- <ReviewForm onCancel={close} /> + <ReviewForm gatheringId={gatheringId} onCancel={close} />

Also applies to: 34-34

coderabbitai · 2024-11-20T08:33:42Z

src/components/my-page/reviewing-modal/reviewing-modal.tsx

 import ReviewForm from './review-form';

 export interface ReviewingModalProps {
+  gatheringId: number;


💡 Codebase verification

gatheringId를 ReviewForm 컴포넌트에 전달해야 합니다

ReviewForm 컴포넌트에서 리뷰를 제출하기 위해 gatheringId가 필요할 것으로 보입니다. 현재는 onCancel prop만 전달되고 있습니다.

<ReviewForm onCancel={close} /> → <ReviewForm onCancel={close} gatheringId={gatheringId} />로 수정이 필요합니다.

review-form.tsx의 ReviewProps 인터페이스에도 gatheringId: number 타입 정의를 추가해야 합니다.

🔗 Analysis chain

타입 정의가 올바르게 추가되었습니다.

인터페이스에 gatheringId 속성이 추가된 것은 좋습니다. 하지만 현재 컴포넌트에서 이 속성이 사용되지 않고 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash # Description: ReviewForm 컴포넌트에서 gatheringId prop이 필요한지 확인 # ReviewForm 컴포넌트 검색 ast-grep --pattern 'interface ReviewFormProps { $$$ }'

Length of output: 58

Script:

#!/bin/bash # Let's try to find ReviewForm component and its props usage rg "ReviewForm" -A 5 -B 5 # Also search for any file containing ReviewForm in its name fd ReviewForm

Length of output: 2460

coderabbitai · 2024-11-20T08:33:43Z

package.json

+    "next": "^14.2.15",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",


💡 Codebase verification

의존성 버전 불일치 및 호환성 문제 발견

Next.js와 React 버전 간의 호환성 문제가 확인되었습니다:

Next.js 14.2.18은 React ^18.2.0을 peer dependency로 요구하지만, 현재 React ^18.3.1로 설정되어 있습니다

package-lock.json에서 Next.js는 14.2.18 버전으로 고정되어 있으나, package.json에서는 ^14.2.15로 설정되어 있어 일관성이 없습니다

다음과 같이 수정을 권장드립니다:

React와 React DOM 버전을 ^18.2.0으로 다운그레이드

Next.js 버전을 14.2.18로 고정

🔗 Analysis chain

의존성 버전 관리 전략 검토 필요

다음 변경 사항들에 대한 검토가 필요합니다:

next.js: 고정 버전에서 유동적 버전으로 변경 (14.2.15 → ^14.2.15)

react와 react-dom: 더 구체적인 버전으로 업데이트 (^18 → ^18.3.1)

이러한 변경은 예기치 않은 호환성 문제를 일으킬 수 있으므로, 팀의 버전 관리 정책과 일치하는지 확인해주세요.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash # Description: Check for peer dependency requirements # Check next.js peer dependencies curl -s https://registry.npmjs.org/next/14.2.15 | jq '.peerDependencies' # Check if react versions are aligned in other package files fd -e json -e yaml -e yml | xargs grep -l "react.*18.3.1"

Length of output: 301

Script:

#!/bin/bash # Check package-lock.json for react dependencies and their resolved versions cat package-lock.json | jq '.packages | .["node_modules/react"], .["node_modules/react-dom"], .["node_modules/next"]' 2>/dev/null # Check for any direct usage of React 18.3 specific features rg -l "experimental|concurrent|use client" --type js --type jsx --type ts --type tsx # Check the current next.js version in package-lock.json cat package-lock.json | jq '.packages["node_modules/next"].version' 2>/dev/null

Length of output: 2272

coderabbitai · 2024-11-20T08:33:43Z

src/components/common/crew-list/detail-crew-card.tsx

+  const handleConfirmDelete = () => {
+    // TODO : 삭제 로직
+    closeConfirmCancel();
+  };
+
+  const handleConfirmLeaveCrew = () => {
+    // TODO : 탈퇴 로직
+    closeLeaveCrewModal();
+  };


⚠️ Potential issue

미구현된 삭제/탈퇴 로직 구현 필요

삭제와 탈퇴 기능이 아직 구현되지 않았습니다. 에러 처리와 사용자 피드백도 고려해야 합니다.

삭제/탈퇴 로직 구현에 도움이 필요하신가요? GitHub 이슈를 생성해드릴 수 있습니다.

coderabbitai · 2024-11-20T08:33:43Z

src/components/common/crew-list/detail-crew-card.tsx

+      {/* eslint-disable-next-line no-nested-ternary */}
+      {/* //TODO: captin, crew인 경우 로직 수정 */}
+      {/* {isCaptain ? (
+        <Menu trigger="click" position="bottom-end" openDelay={100} closeDelay={400}>
+          <Menu.Target>
+            <div className="top-68 absolute right-6 top-[286px] cursor-pointer md:top-6 lg:top-6">
+              <Image src={KebabIcon} alt="더보기" width={20} height={20} />
+            </div>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item component="a" href={`/crew/detail/${id}/edit`} className="font-pretendard">
+              크루 수정하기
+            </Menu.Item>
+            <Menu.Item
+              type="button"
+              onClick={handleDelete}
+              className="font-pretendard text-red-600"
+            >
+              크루 삭제하기
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      ) : isCrew ? (
+        <Menu trigger="click" position="bottom-end" openDelay={100} closeDelay={400}>
+          <Menu.Target>
+            <div className="top-68 absolute right-6 top-[286px] md:top-6 lg:top-6">
+              <Image src={KebabIcon} alt="더보기" width={20} height={20} />
+            </div>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item type="button" onClick={handleLeaveCrew} className="font-pretendard">
+              크루 탈퇴하기
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      ) : null} */}


⚠️ Potential issue

주석 처리된 코드 정리 필요

주석 처리된 captain/crew 관련 코드가 있습니다. 이는 코드 가독성을 저하시키고 유지보수를 어렵게 만듭니다.

구현이 필요한 경우 TODO 주석만 남기고 나머지는 제거하거나, 필요없는 경우 전체 주석을 제거해주세요.

coderabbitai · 2024-11-20T08:33:43Z

src/components/common/crew-list/detail-crew-card.tsx

+              <span className="text-sm font-medium text-gray-700">최소인원 2명</span>
+              <span className="text-sm font-medium text-gray-700">최대인원 {totalCount}명</span>


🛠️ Refactor suggestion

하드코딩된 값들의 상수화 필요

최소 인원수가 하드코딩되어 있습니다. 이런 값들은 상수로 분리하여 관리하는 것이 좋습니다.

다음과 같이 상수를 추가해주세요:

const CREW_CONSTANTS = { MIN_MEMBERS: 2, // 다른 상수들도 추가 } as const;

coderabbitai · 2024-11-20T08:33:43Z

src/components/common/crew-list/detail-crew-card.tsx

+      <div className="relative h-[270px] w-full md:w-[385px] lg:w-[540px]">
+        <Image fill style={{ objectFit: 'cover' }} alt={title} src={imageUrl} />
+      </div>


🛠️ Refactor suggestion

접근성 개선 필요

이미지에 대한 의미 있는 대체 텍스트가 부족합니다. 또한 이미지가 장식용인 경우에는 명시적으로 표시해야 합니다.

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

-<Image fill style={{ objectFit: 'cover' }} alt={title} src={imageUrl} /> +<Image + fill + style={{ objectFit: 'cover' }} + alt={`${title} 크루의 대표 이미지`} + src={imageUrl} +/>

📝 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="relative h-[270px] w-full md:w-[385px] lg:w-[540px]">

<Image fill style={{ objectFit: 'cover' }} alt={title} src={imageUrl} />

</div>

<div className="relative h-[270px] w-full md:w-[385px] lg:w-[540px]">

<Image

fill

style={{ objectFit: 'cover' }}

alt={`${title} 크루의 대표 이미지`}

src={imageUrl}

/>

</div>

HaeJungg

수고하셨습니다🙌

HaeJungg · 2024-11-20T08:51:13Z

src/components/common/crew-list/detail-crew-card.tsx

요 파일은 지금 없는 파일인데 다시 생겼네요...! 최신화가 덜됐을까요...! 아니면 머지하면서 이전 파일이 살아난거같아요🥲

github-actions · 2024-11-20T09:14:20Z

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

github-actions · 2024-11-20T09:23:06Z

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

yulrang

수고하셨습니다~~~~

조예은 added 7 commits November 14, 2024 15:32

최신화

174771f

✨ Feat: reviewable gathering에 대해 api 연결하는 함수 및 리스트 컴포넌트

559051f

🐛 Fix: 500에러 관련 해결

0bf3acf

✨ Feat: my-review 페이지의 탭 이동 방식 변경 중

4b91e93

🐛 Fix: use client 빠진 컴포넌트 수정

31611ba

🐛 Fix: 리뷰 가능 리스트 렌더링 안 됨 해결

f9de51a

최신화

b1c19b7

ChoYenii linked an issue Nov 20, 2024 that may be closed by this pull request

리뷰 작성 가능 모임 리스트 api 연결 #116

Closed

2 tasks

ChoYenii added the api label Nov 20, 2024

coderabbitai bot reviewed Nov 20, 2024

View reviewed changes

HaeJungg reviewed Nov 20, 2024

View reviewed changes

조예은 added 2 commits November 20, 2024 18:04

🐛 Fix: 리뷰 모달 type 수정+리액트쿼리 버전 수정

3354710

package 수정

5a89e85

HaeJungg self-requested a review November 20, 2024 09:15

HaeJungg approved these changes Nov 20, 2024

View reviewed changes

파일 삭제

c523eab

yulrang approved these changes Nov 20, 2024

View reviewed changes

ChoYenii merged commit afba481 into develop Nov 20, 2024
3 checks passed

This was referenced Nov 21, 2024

Fix/youl bug fix #150

Merged

Feat/156/review list #158

Merged

Feat/147/skeleton : 마이페이지 스켈레톤 추가 #162

Merged

Fix/168/stories docs #175

Merged

	const { page, size, sort = ['string'] } = pageable;
	const { page, size, sort = ['createdAt,desc'] } = pageable;

	`/api/gatherings/reviewable?page=${page}&size=${size}&sort=${sort}`,
	`/api/gatherings/reviewable?page=${encodeURIComponent(page)}&size=${encodeURIComponent(size)}&sort=${encodeURIComponent(sort)}`,

		<span className="text-sm font-medium text-gray-700">최소인원 2명</span>
		<span className="text-sm font-medium text-gray-700">최대인원 {totalCount}명</span>

Feat/116/reviewable gathering list api #154

Feat/116/reviewable gathering list api #154

Uh oh!

Conversation

ChoYenii commented Nov 20, 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 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

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 20, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

HaeJungg left a comment

Choose a reason for hiding this comment

Uh oh!

HaeJungg Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 20, 2024

Uh oh!

github-actions bot commented Nov 20, 2024

Uh oh!

yulrang left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

ChoYenii commented Nov 20, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 20, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)