Feat/156/review list #158

HaeJungg · 2024-11-21T04:31:23Z

🔖 Issue Ticket

#156

✍️ Description

리뷰 탭 페이지 안보이는 문제 수정
나의 리뷰 리스트 패치
맥에서 스토리북 안되는 문제 수정

✅ Checklist

PR

Branch Convention 확인

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

Test

로컬 작동 확인

Summary by CodeRabbit

릴리스 노트

새로운 기능
- 사용자 리뷰를 가져오는 기능 추가: getMyReviews 및 deleteReview API 메서드 도입.
- 리뷰 목록을 동적으로 가져오는 MyReviewPage 컴포넌트 개선, 로딩 및 오류 상태 관리 기능 추가.
- 파일 업로드 시 오류 처리 개선: 알림에서 토스트 알림으로 변경.
- 리뷰 카드 목록 컴포넌트의 데이터 구조 변경 및 페이지네이션 지원.
- 새로운 날짜 포맷 함수 formatCompactDateTime24H 도입.
버그 수정
- 리뷰 카드 삭제 기능 추가 및 사용자 피드백 향상.
문서화
- 리뷰 데이터 구조 변경 및 페이지네이션 지원.
스타일
- Tailwind CSS 구성 업데이트: 새로운 유틸리티 클래스 및 기존 클래스 수정.

coderabbitai · 2024-11-21T04:31:36Z

Walkthrough

이 변경 사항은 src/_apis/review/my-review-apis.ts 파일에 두 개의 새로운 API 함수인 getMyReviews와 deleteReview를 추가합니다. getMyReviews는 페이지와 크기를 매개변수로 받아 사용자 리뷰를 가져오는 URL을 생성하고, deleteReview는 리뷰 ID를 사용하여 특정 리뷰를 삭제하는 URL을 생성합니다. 또한, 여러 컴포넌트에서 리뷰 데이터를 처리하는 방식이 변경되었으며, 오류 처리 및 사용자 피드백 개선을 위한 다양한 수정이 포함되어 있습니다.

Changes

파일 경로	변경 요약
`src/_apis/review/my-review-apis.ts`	- `getMyReviews(page: number, size: number): Promise<MyReviewResponse>` 함수 추가 - `deleteReview(reviewId: number): Promise<void>` 함수 추가
`src/_queries/review/my-review-queries.ts`	- `useGetMyReviewsQuery({ size: number })` 함수 추가
`src/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx`	- `reviews.map` 함수 주석 처리, 리뷰 카드 렌더링 비활성화
`src/app/(crew)/my-page/_components/profile-card/container.tsx`	- 파일 업로드 오류 처리 방식 변경: alert에서 toast로 변경
`src/app/(crew)/my-page/_components/review-tabs.tsx`	- 여러 import 문 제거 및 `useInfiniteScroll` 관련 코드 주석 처리
`src/app/(crew)/my-page/layout.tsx`	- `MyPage` 컴포넌트에 `children` prop 추가
`src/app/(crew)/my-page/my-review/page.tsx`	- `useGetMyReviewsQuery` 훅 사용, 로딩 및 오류 처리 추가
`src/app/(crew)/my-page/page.tsx`	- `redirect` 호출 후 `null` 반환 추가
`src/app/api/mock-api/review.ts`	- `fetchCrewReviewData`, `fetchMyReviewData` 함수 삭제
`src/components/common/review-list/review-card-list.stories.tsx`	- import 문 업데이트 및 `MyReviewCardList` 스토리 수정
`src/components/common/review-list/review-card-list.tsx`	- `ReviewCardListProps` 인터페이스 수정 및 데이터 처리 로직 변경
`src/components/common/review-list/review-card.tsx`	- 리뷰 삭제 기능 추가 및 사용자 피드백 개선
`src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx`	- `formatDateWithYear` 함수 삭제 및 `formatCompactDateTime24H` 함수로 대체
`src/mock/review-data.ts`	- `MyReviewData` 구조 변경, 페이지네이션 지원
`src/types/review.d.ts`	- `ReviewInformResponse` 인터페이스 제거 및 `MyReviewResponse` 인터페이스 추가
`src/utils/format-date.ts`	- `formatCompactDateTime24H(dateString: string): string` 함수 추가
`tailwind.config.ts`	- Tailwind CSS 설정 확장, 새로운 유틸리티 클래스 추가 및 기존 클래스 수정

Possibly related PRs

Feat/CR-63/ReviewingModal #68: 리뷰 제출을 위한 폼을 도입하는 ReviewingModal PR과 관련된 API 함수 추가.
Feat/67/mypage #76: 사용자 리뷰 표시 방식을 포함한 MyPage 기능과 관련.
Feat/138/profile card #140: 로딩 및 오류 상태 개선을 위한 GatheringListSection 컴포넌트 변경.
Feat/139/gathering card UI #151: 모임 상세 정보를 개선하기 위한 GatheringDetailModalPresenter 컴포넌트 수정.
Feat/116/reviewable gathering list api #154: 리뷰 가능한 모임 목록 API 도입과 관련된 변경 사항.

Suggested labels

api, fix, refactor

Suggested reviewers

yulrang
minkyung5x5
Rangbyeolang

🐇 변화의 길을 뛰어넘어,

리뷰 카드가 새로워져요!

삭제 버튼도 추가되어,

사용자 피드백이 더 좋아져요!

함께하는 모임, 더 즐거워요! 🎉

Warning

Rate limit exceeded

@HaeJungg has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 16 minutes and 57 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between cb19454 and 6c368ca.

Warning

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

🔧 eslint

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

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

Oops! Something went wrong! :(

ESLint: 8.57.1

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

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

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

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

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

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

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

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

CodeRabbit Commands (Invoked using PR comments)

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

Other keywords and placeholders

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

CodeRabbit Configuration File (`.coderabbit.yaml`)

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

Documentation and Community

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

github-actions · 2024-11-21T04:33:53Z

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

coderabbitai

Actionable comments posted: 12

🧹 Outside diff range and nitpick comments (16)

src/_queries/review/my-review-queries.ts (1)
4-12: 타입 안전성 개선을 위한 제안

반환 타입을 명시적으로 지정하면 타입 안전성이 향상될 것 같습니다.
-export function useGetMyReviewsQuery({ size }: { size: number }) {
+export function useGetMyReviewsQuery({ size }: { size: number }): {
+  queryKey: ['myReviews'];
+  queryFn: ({ pageParam }: { pageParam?: number }) => Promise<MyReviewResponse>;
+  getNextPageParam: (lastPage: MyReviewResponse, allPages: MyReviewResponse[]) => number | undefined;
+} {
src/components/common/review-list/review-card-list.stories.tsx (1)
19-22: 리팩토링 제안: refetch 함수 구현 개선

빈 함수를 전달하는 대신 실제 동작을 모사하는 mock 함수를 사용하는 것이 좋습니다. 또한 Story 타입 정의를 인라인으로 작성하는 것보다 별도의 타입 파일로 분리하는 것을 고려해보세요.

다음과 같이 개선해보세요:
-type Story = StoryObj<typeof ReviewCardList>;
+import { ReviewCardListStoryType } from './review-card-list.stories.types';
+type Story = ReviewCardListStoryType;

 export const MyReviewCardList: Story = {
-  render: () => <ReviewCardList data={MyReviewData} refetch={() => {}} />,
+  render: () => (
+    <ReviewCardList
+      data={MyReviewData}
+      refetch={() => {
+        console.log('Mocked refetch called');
+        return Promise.resolve();
+      }}
+    />
+  ),
 };
src/types/review.d.ts (2)
6-8: API 응답 타입에 에러 처리를 위한 필드 추가를 고려해보세요.

현재 구조는 성공 케이스만 처리하고 있습니다. API 오류 처리를 위해 다음과 같은 필드들의 추가를 제안드립니다:
 export interface ApiResponse<T> {
   data: T;
+  error?: {
+    code: string;
+    message: string;
+  };
+  status: 'success' | 'error';
 }
1-8: 응답 구조의 일관성 개선이 필요합니다.

MyReviewResponse와 CrewReviewInformResponse가 서로 다른 구조를 가지고 있어 일관성이 떨어집니다. ApiResponse를 활용하여 다음과 같이 통일된 구조로 개선하는 것을 추천드립니다:
export interface PaginatedResponse<T> {
  content: T[];
  hasNext: boolean;
  totalItems: number;
}

// MyReviewResponse 사용 예시
type MyReviewResponse = ApiResponse<PaginatedResponse<MyReview>>;

// CrewReviewResponse 사용 예시
type CrewReviewResponse = ApiResponse<PaginatedResponse<CrewReview>>;
src/app/(crew)/my-page/my-review/page.tsx (1)
10-14: 페이지 크기 상수를 별도 파일로 분리하는 것이 좋습니다.

페이지 크기(size)를 상수 파일로 분리하면 다른 컴포넌트에서도 재사용할 수 있으며, 일관성 있는 값 관리가 가능합니다.
+// src/constants/pagination.ts
+export const REVIEW_PAGE_SIZE = 6;

-  const size = 6;
+  const size = REVIEW_PAGE_SIZE;
src/components/common/review-list/review-card-list.tsx (3)
6-11: 인터페이스에 JSDoc 문서를 추가하는 것이 좋습니다

인터페이스의 목적과 각 프로퍼티의 역할을 명확히 하기 위해 문서화를 추가하면 좋을 것 같습니다.

다음과 같이 JSDoc을 추가해보세요:
+/**
+ * 리뷰 카드 리스트 컴포넌트의 프로퍼티
+ * @property {InfiniteData<{content: MyReview[]; hasNext: boolean;}>} data - 페이지네이션된 리뷰 데이터
+ * @property {() => void} refetch - 데이터를 다시 불러오는 함수
+ */
interface ReviewCardListProps {
  data: InfiniteData<{
    content: MyReview[];
    hasNext: boolean;
  }>;
  refetch: () => void;
}
15-15: 데이터 변환 로직의 타입 안전성 개선이 필요합니다

현재 구현은 작동하지만, 타입 안전성을 높이기 위해 타입 가드를 추가하는 것이 좋습니다.

다음과 같이 개선해보세요:
-const reviewDataList = data.pages.flatMap((page) => page.content || []);
+const reviewDataList = data.pages.flatMap((page) => 
+  Array.isArray(page.content) ? page.content : []
+);
14-14: 컴포넌트에 에러 처리와 로딩 상태 처리가 필요합니다

현재 구현에는 에러 상태나 로딩 상태에 대한 처리가 없습니다. 사용자 경험 향상을 위해 이러한 상태들을 처리하는 것이 좋습니다.

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

에러 바운더리 추가

로딩 상태 처리

데이터 검증 로직 추가

예시 구현:
export default function ReviewCardList({ data, refetch }: ReviewCardListProps) {
  if (!data) {
    return <div role="alert">데이터를 불러오는 중 오류가 발생했습니다.</div>;
  }

  try {
    const reviewDataList = data.pages.flatMap((page) => page.content || []);
    // ... 나머지 구현
  } catch (error) {
    console.error('리뷰 데이터 처리 중 오류 발생:', error);
    return <div role="alert">리뷰를 표시하는 중 문제가 발생했습니다.</div>;
  }
}
src/utils/format-date.ts (1)
43-55: 구현이 깔끔하고 일관성이 있습니다!

코드가 잘 구조화되어 있고 기존 함수들과 일관된 패턴을 따르고 있습니다. 다만, 반환 형식에 대한 JSDoc 주석을 추가하면 더 좋을 것 같습니다.
+/**
+ * 날짜 문자열을 "MM월 DD일・HH:MM" 형식으로 변환합니다.
+ * @param dateString - ISO 8601 형식의 날짜 문자열
+ * @returns "MM월 DD일・HH:MM" 형식의 문자열
+ * @example
+ * formatCompactDateTime24H("2024-01-01T15:30:00")
+ * // 반환값: "01월 01일・15:30"
+ */
 export function formatCompactDateTime24H(dateString: string): string {
src/app/(crew)/my-page/_components/profile-card/container.tsx (1)
53-53: 파일 크기 제한을 상수로 분리하는 것이 좋겠습니다.

5MB 제한을 매직 넘버로 하드코딩하는 대신 의미 있는 이름의 상수로 분리하면 유지보수성이 향상될 것 같습니다.

다음과 같이 변경하는 것을 제안드립니다:
+const MAX_PROFILE_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
+
 export default function ProfileCard() {
   // ...
   input.onchange = async (event) => {
     const file = (event.target as HTMLInputElement)?.files?.[0];
     if (file) {
-      if (file.size > 5 * 1024 * 1024) {
+      if (file.size > MAX_PROFILE_IMAGE_SIZE) {
         toast.error('5MB 이하의 파일만 업로드 가능합니다.');
         return;
       }
src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx (1)
61-61: 날짜 표시에 대한 접근성 개선 제안

스크린 리더 사용자를 위해 날짜 정보에 적절한 ARIA 레이블을 추가하는 것이 좋습니다.
-          <div className="text-sm font-medium text-gray-700">{formatDate}</div>
+          <div className="text-sm font-medium text-gray-700" aria-label={`모임 일시: ${formatDate}`}>{formatDate}</div>
src/mock/review-data.ts (2)
216-295: 날짜 형식 통일 및 테스트 데이터 품질 개선 필요

다음과 같은 개선이 필요합니다:

createdAt 날짜 형식이 일관되지 않습니다:

대부분: 2024-10-31T10:09:12.306+09:00

278줄: 2024-10-31T00:56

테스트 데이터의 품질:

"크루크루크루..." 같은 반복적인 이름

"어느동"과 같은 임시 위치 데이터

더 현실적인 테스트 데이터로 개선하는 것을 추천드립니다:
-          crewName: '크루크루크루크루크루크루',
-          gatheringName: '모임모임모임약속약속약속',
-          gatheringLocation: '어느동',
+          crewName: '서울 독서 모임',
+          gatheringName: '11월 독서 토론회',
+          gatheringLocation: '강남구 역삼동',
242-267: 페이지네이션 구조에 대한 문서화 필요

페이지네이션 구현에 대한 설명이 부족합니다:

hasNext 플래그의 사용 목적

빈 pageParams 배열의 용도

페이지 크기 제한 여부

파일 상단에 다음과 같은 주석 추가를 제안드립니다:
/**
 * 페이지네이션 구조 설명:
 * - content: 페이지당 리뷰 목록
 * - hasNext: 다음 페이지 존재 여부
 * - pageParams: 무한 스크롤 구현을 위한 페이지 파라미터
 * 
 * @example
 * // 페이지네이션 사용 예시
 * const { pages, pageParams } = MyReviewData;
 * const hasNextPage = pages[currentPage].hasNext;
 */
src/components/common/review-list/review-card.tsx (3)
55-63: 에러 처리 로깅 추가 제안

handleDelete 함수에서 에러 발생 시 토스트 메시지 외에도 에러를 콘솔에 로그로 남겨 디버깅이 용이하도록 하면 좋겠습니다.

다음과 같이 수정할 수 있습니다:
} catch (error) {
  toast.error('리뷰 삭제에 실패했습니다.');
+ console.error('리뷰 삭제 중 에러 발생:', error);
}
81-90: crewId 확인 후 버튼 렌더링

isMine이 true여도 crewId가 없는 경우 버튼 클릭 시 예상치 못한 동작이 발생할 수 있습니다. crewId가 존재할 때만 버튼이 렌더링되도록 조건을 추가하는 것이 좋습니다.
- {isMine && (
+ {isMine && crewId && (
    <button
      ...
    >
      {crewName}
    </button>
  )}
94-94: 동적 클래스 이름 작성 방식 개선

className 속성에서 삼항 연산자를 사용하여 가독성이 떨어질 수 있습니다. clsx 라이브러리를 활용하여 조건부 클래스 이름을 관리하면 코드의 가독성과 유지보수성이 향상됩니다.

우선 clsx를 임포트해 주세요:
+ import clsx from 'clsx';
그런 다음 className을 다음과 같이 수정합니다:
- className={`flex h-full items-end gap-[15px] ${!isMine ? 'border-b-[2px] border-b-[#F3F4F6] py-4' : 'rounded-[12px] p-6 shadow-bg'} bg-white lg:gap-[40px]`}
+ className={clsx(
+   'flex h-full items-end gap-[15px] bg-white lg:gap-[40px]',
+   {
+     'border-b-[2px] border-b-[#F3F4F6] py-4': !isMine,
+     'rounded-[12px] p-6 shadow-bg': isMine,
+   }
+ )}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between afba481 and 8ba59e2.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (17)

src/_apis/review/my-review-apis.ts (1 hunks)
src/_queries/review/my-review-queries.ts (1 hunks)
src/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx (2 hunks)
src/app/(crew)/my-page/_components/profile-card/container.tsx (1 hunks)
src/app/(crew)/my-page/_components/review-tabs.tsx (0 hunks)
src/app/(crew)/my-page/layout.tsx (1 hunks)
src/app/(crew)/my-page/my-review/page.tsx (1 hunks)
src/app/(crew)/my-page/page.tsx (1 hunks)
src/app/api/mock-api/review.ts (0 hunks)
src/components/common/review-list/review-card-list.stories.tsx (1 hunks)
src/components/common/review-list/review-card-list.tsx (1 hunks)
src/components/common/review-list/review-card.tsx (4 hunks)
src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx (3 hunks)
src/mock/review-data.ts (1 hunks)
src/types/review.d.ts (1 hunks)
src/utils/format-date.ts (1 hunks)
tailwind.config.ts (0 hunks)

💤 Files with no reviewable changes (3)

src/app/(crew)/my-page/_components/review-tabs.tsx
src/app/api/mock-api/review.ts
tailwind.config.ts

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

src/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx

🔇 Additional comments (14)

src/_queries/review/my-review-queries.ts (2)

1-12: 무한 스크롤 구현이 잘 되어있습니다!

React Query의 표준 패턴을 잘 따르고 있으며, 페이지네이션 로직이 깔끔하게 구현되어 있습니다.

8-10: 페이지네이션 로직 검증 필요

현재 구현된 getNextPageParam 로직이 백엔드 API의 페이지네이션 구현과 일치하는지 확인이 필요합니다.

✅ Verification successful

페이지네이션 로직이 올바르게 구현되었습니다

검증 결과 현재 구현된 getNextPageParam 로직이 백엔드 API의 페이지네이션 구현과 일치합니다:

MyReviewResponse 타입은 hasNext 필드를 통해 다음 페이지 존재 여부를 표시
API 호출 시 page와 size 파라미터를 사용하여 페이지네이션 처리
getNextPageParam에서 hasNext가 true일 경우 다음 페이지 번호로 allPages.length를 반환하는 것이 적절함

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 응답 구조 확인을 위해 관련 타입 정의 검색
rg -t typescript "interface.*MyReviewResponse" -A 5

Length of output: 88

Script:

#!/bin/bash
# 타입스크립트 파일에서 MyReviewResponse 타입 정의 검색
rg "MyReviewResponse" -A 5 --type-add 'ts:*.ts' -t ts

# 페이지네이션 관련 타입이나 인터페이스 검색
rg "interface.*Response.*\{" -A 10 --type-add 'ts:*.ts' -t ts

# API 호출 부분 검색
rg "useInfiniteQuery.*MyReview" -B 5 -A 10 --type-add 'ts:*.ts' -t ts

Length of output: 5047

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

4-4: 컴포넌트 시그니처가 적절히 구현되었습니다!

children prop의 타입이 명확하게 지정되어 있으며, React의 레이아웃 컴포넌트 패턴을 잘 따르고 있습니다.

6-13: 레이아웃 구조가 잘 구성되어 있습니다!

반응형 디자인을 위한 적절한 패딩과 컴포넌트 계층 구조가 잘 구현되어 있습니다. ProfileCardContainer, ReviewTabs, 그리고 children 컴포넌트의 배치가 논리적입니다.

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

9-9: 레이아웃 변경의 영향 검토 필요

fullscreen 레이아웃으로 변경됨에 따라 다른 스토리들과의 일관성이 유지되는지 확인해주세요.

다음 스크립트로 다른 스토리의 레이아웃 설정을 확인하세요:

2-2: Mock 데이터 사용이 적절한지 확인 필요

실제 API 응답 형식과 Mock 데이터의 구조가 일치하는지 확인해주세요. 향후 API 응답 구조가 변경될 경우 Mock 데이터도 함께 업데이트되어야 합니다.

다음 스크립트를 실행하여 Mock 데이터 구조를 확인하세요:

✅ Verification successful

Mock 데이터 구조가 API 응답 타입과 일치함을 확인했습니다

MyReviewData의 구조가 MyReviewResponse 인터페이스와 정확히 일치하며, 컴포넌트에서 사용되는 ReviewCardListProps의 타입 정의와도 호환됩니다:

MyReviewResponse는 content: MyReview[]와 hasNext: boolean을 포함
Mock 데이터는 동일한 구조로 pages 배열 내에 content와 hasNext를 포함
MyReview 인터페이스에 정의된 모든 필수 필드(crewId, crewName, gatheringName, id, rate, comment 등)가 Mock 데이터에 올바르게 구현되어 있음

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Mock 데이터와 실제 API 응답 구조 비교

# Mock 데이터 구조 확인
rg -A 10 "export const MyReviewData" src/mock/review-data.ts

# API 타입 정의 확인
rg -A 10 "interface.*Review" "src/**/*.ts*"

Length of output: 412

Script:

#!/bin/bash
# Description: API 타입 정의와 Mock 데이터 구조 비교를 위한 추가 검색

# API 타입 정의 검색 (따옴표 제거)
rg -A 10 "interface.*Review" src

# Review 관련 타입 정의 검색
rg -A 10 "type.*Review" src

# Review 컴포넌트의 Props 타입 확인
ast-grep --pattern 'interface $_ {
  $$$
}' src/components/common/review-list/review-card-list.tsx

Length of output: 17228

src/types/review.d.ts (1)

1-4: 구조가 명확하고 잘 정의되어 있습니다!

페이지네이션을 위한 hasNext 필드와 리뷰 데이터를 위한 content 배열이 잘 구성되어 있습니다.

src/_apis/review/my-review-apis.ts (2)

1-2: 임포트 구문이 깔끔하게 구성되어 있습니다!

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

6-6: API 엔드포인트 사용 현황 확인이 필요합니다.

새로 추가된 API 엔드포인트들이 코드베이스 전체에서 일관되게 사용되는지 확인이 필요합니다.

Also applies to: 19-19

✅ Verification successful

API 엔드포인트가 일관되게 사용되고 있음을 확인했습니다.

코드베이스 분석 결과:

/api/review/memberReviews 엔드포인트는 src/_apis/review/my-review-apis.ts에서 정의되어 src/_queries/review/my-review-queries.ts를 통해 일관되게 사용됨
리뷰 삭제 API /api/review/${reviewId}는 동일한 파일에서 정의되어 src/components/common/review-list/review-card.tsx에서 적절히 사용됨
모든 리뷰 관련 API 호출이 중앙화된 API 클라이언트를 통해 처리되고 있음

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 엔드포인트 사용 현황 확인

echo "리뷰 목록 API 사용 확인:"
rg -l "/api/review/memberReviews\?page="

echo "\n리뷰 삭제 API 사용 확인:"
rg -l "/api/review/\$\{reviewId\}"

Length of output: 203

Script:

#!/bin/bash
# API 엔드포인트 패턴을 더 유연하게 검색

echo "리뷰 관련 API 엔드포인트 사용 확인:"
rg -A 2 "/api/review" 

echo "\n리뷰 관련 URL 상수나 설정 확인:"
rg -A 2 "review.*api|api.*review" --type ts

echo "\nAPI 클라이언트 설정이나 인터페이스 확인:"
fd -e ts -e tsx -x grep -l "api.*review|review.*api" {} \;

Length of output: 2438

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

1-8: 의존성 모듈이 적절하게 구성되어 있습니다.

필요한 모든 의존성이 명확하게 임포트되어 있으며, 클라이언트 컴포넌트 지시자가 올바르게 설정되어 있습니다.

16-22: 로딩 상태 처리가 잘 구현되어 있습니다.

로딩 인디케이터가 화면 중앙에 적절하게 배치되어 있어 사용자 경험이 좋습니다.

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

53-53: 토스트 알림으로의 전환이 적절합니다!

alert 대신 toast.error를 사용한 것은 사용자 경험을 개선하는 좋은 변경사항입니다.

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

5-5: 날짜 포맷팅 유틸리티 함수 사용 승인

공통 유틸리티 함수를 사용하여 날짜 포맷팅 로직을 중앙화한 것은 좋은 접근입니다.

32-32: 날짜 포맷 검증 필요

새로운 포맷팅 함수가 요구사항에 맞는 형식을 제공하는지 확인이 필요합니다.

✅ Verification successful

날짜 포맷팅 구현이 적절함을 확인

formatCompactDateTime24H 함수는 월, 일, 시간, 분을 2자리 숫자로 포맷팅하여 간결한 24시간제 날짜/시간 형식을 제공합니다. 이는 리뷰 가능한 모임 카드에 적합한 형식입니다.

src/utils/format-date.ts에서 구현된 함수는 다음 기능을 제공합니다:
- 월/일은 2자리 숫자로 패딩 처리
- 시간/분은 24시간제로 2자리 숫자 패딩 처리
- ISO 문자열을 파싱하여 일관된 포맷 보장

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 날짜 포맷팅 함수의 구현을 확인

# formatCompactDateTime24H 함수의 구현 확인
ast-grep --pattern 'export function formatCompactDateTime24H($_) {
  $$$
}'

Length of output: 77

Script:

#!/bin/bash
# Search for formatCompactDateTime24H function implementation
rg -A 10 "formatCompactDateTime24H" 

# Search for any test files related to date formatting
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx | xargs rg "formatCompactDateTime24H"

# Search for any documentation or type definitions
rg "formatCompactDateTime24H" -g "*.d.ts"

Length of output: 3745

coderabbitai · 2024-11-21T04:36:23Z

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


 export default function MyPage() {
  redirect('/my-page/reviewable');
+  return null;


🛠️ Refactor suggestion

도달할 수 없는 코드를 제거하세요.

redirect() 함수는 내부적으로 에러를 throw하기 때문에 return null 구문은 절대 실행되지 않습니다. 불필요한 코드이므로 제거하는 것이 좋습니다.

다음과 같이 수정하세요:

export default function MyPage() { redirect('/my-page/reviewable'); - return null; }

📝 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 null;

export default function MyPage() {

redirect('/my-page/reviewable');

}

coderabbitai · 2024-11-21T04:36:23Z

src/_queries/review/my-review-queries.ts

+    queryKey: ['myReviews'],
+    queryFn: ({ pageParam = 0 }: { pageParam?: number }) => getMyReviews(pageParam, size),


🛠️ Refactor suggestion

캐시 키 구조 검토 필요

현재 캐시 키가 ['myReviews']로만 되어있는데, size 파라미터도 캐시 키에 포함하는 것이 좋을 것 같습니다. 페이지 크기가 변경될 때 캐시를 적절히 무효화하기 위함입니다.

- queryKey: ['myReviews'], + queryKey: ['myReviews', size],

📝 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

queryKey: ['myReviews'],

queryFn: ({ pageParam = 0 }: { pageParam?: number }) => getMyReviews(pageParam, size),

queryKey: ['myReviews', size],

queryFn: ({ pageParam = 0 }: { pageParam?: number }) => getMyReviews(pageParam, size),

coderabbitai · 2024-11-21T04:36:23Z

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

      </div>
      <ReviewTabs />
+      <div>{children}</div>
      <div />


🛠️ Refactor suggestion

불필요한 빈 div 요소를 제거해주세요.

마지막 줄의 빈 div 요소는 아무런 역할을 하지 않으므로 제거하는 것이 좋습니다.

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

<div>{children}</div> - <div />

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

coderabbitai · 2024-11-21T04:36:23Z

src/_apis/review/my-review-apis.ts

+// 리뷰 삭제 API
+export function deleteReview(reviewId: number): Promise<void> {
+  const url = `/api/review/${reviewId}`;
+  return fetchApi<void>(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}


🛠️ Refactor suggestion

입력값 검증과 에러 처리가 필요합니다.

리뷰 삭제 API에서 다음 사항들이 보완되면 좋겠습니다:

reviewId의 유효성 검증

에러 처리 로직 추가

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

export function deleteReview(reviewId: number): Promise<void> { + if (!Number.isInteger(reviewId) || reviewId <= 0) { + throw new Error('유효하지 않은 리뷰 ID입니다.'); + } const url = `/api/review/${reviewId}`; return fetchApi<void>(url, { method: 'DELETE', headers: { 'Content-Type': 'application/json', }, - }); + }).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

// 리뷰 삭제 API

export function deleteReview(reviewId: number): Promise<void> {

const url = `/api/review/${reviewId}`;

return fetchApi<void>(url, {

method: 'DELETE',

headers: {

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

},

});

}

// 리뷰 삭제 API

export function deleteReview(reviewId: number): Promise<void> {

if (!Number.isInteger(reviewId) || reviewId <= 0) {

throw new Error('유효하지 않은 리뷰 ID입니다.');

}

const url = `/api/review/${reviewId}`;

return fetchApi<void>(url, {

method: 'DELETE',

headers: {

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

},

}).catch((error) => {

throw new Error(`리뷰 삭제 실패: ${error.message}`);

});

}

coderabbitai · 2024-11-21T04:36:23Z

src/_apis/review/my-review-apis.ts

+export function getMyReviews(page: number, size: number): Promise<MyReviewResponse> {
+  // 최종 반환 타입
+  const url = `/api/review/memberReviews?page=${page}&size=${size}`;
+  return fetchApi<ApiResponse<MyReviewResponse>>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => {
+    return response.data;
+  });
+}


🛠️ Refactor suggestion

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

현재 구현에서는 API 호출 실패 시의 에러 처리가 누락되어 있습니다. 사용자 경험 향상을 위해 에러 처리를 추가하는 것이 좋겠습니다.

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

export function getMyReviews(page: number, size: number): Promise<MyReviewResponse> { - // 최종 반환 타입 + // 페이지네이션된 사용자 리뷰 목록을 조회합니다. + // @param page 조회할 페이지 번호 (0부터 시작) + // @param size 페이지당 항목 수 + // @throws Error API 호출 실패 시 const url = `/api/review/memberReviews?page=${page}&size=${size}`; return fetchApi<ApiResponse<MyReviewResponse>>(url, { method: 'GET', headers: { 'Content-Type': 'application/json', }, }).then((response) => { 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 function getMyReviews(page: number, size: number): Promise<MyReviewResponse> {

// 최종 반환 타입

const url = `/api/review/memberReviews?page=${page}&size=${size}`;

return fetchApi<ApiResponse<MyReviewResponse>>(url, {

method: 'GET',

headers: {

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

},

}).then((response) => {

return response.data;

});

}

export function getMyReviews(page: number, size: number): Promise<MyReviewResponse> {

// 페이지네이션된 사용자 리뷰 목록을 조회합니다.

// @param page 조회할 페이지 번호 (0부터 시작)

// @param size 페이지당 항목 수

// @throws Error API 호출 실패 시

const url = `/api/review/memberReviews?page=${page}&size=${size}`;

return fetchApi<ApiResponse<MyReviewResponse>>(url, {

method: 'GET',

headers: {

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

},

}).then((response) => {

return response.data;

}).catch((error) => {

throw new Error(`리뷰 목록 조회 실패: ${error.message}`);

});

}

coderabbitai · 2024-11-21T04:36:24Z

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

+  if (error) {
+    toast.error('리뷰를 불러오는 중 문제가 발생했습니다.');
+    return null;
+  }


🛠️ Refactor suggestion

에러 처리를 개선할 수 있습니다.

현재 구현된 에러 처리에 다음 기능을 추가하면 좋을 것 같습니다:

재시도 메커니즘

구체적인 에러 메시지 표시

에러 발생 시 대체 UI 제공

- if (error) { - toast.error('리뷰를 불러오는 중 문제가 발생했습니다.'); - return null; - } + if (error) { + const errorMessage = error instanceof Error + ? error.message + : '리뷰를 불러오는 중 문제가 발생했습니다.'; + + return ( + <div className="flex flex-col items-center justify-center gap-4"> + <p className="text-red-500">{errorMessage}</p> + <button + onClick={() => refetch()} + className="rounded bg-blue-500 px-4 py-2 text-white" + > + 다시 시도 + </button> + </div> + ); + }

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

coderabbitai · 2024-11-21T04:36:24Z

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

+  return (
+    <div>
+      <ReviewCardList data={data ?? { pages: [], pageParams: [] }} refetch={refetch} />
+      {isFetchingNextPage && (
+        <div className="mt-4 flex items-center justify-center">
+          <Loader />
+        </div>
+      )}
+      <div ref={ref} className="h-[1px]" />
+    </div>
+  );


🛠️ Refactor suggestion

빈 상태 처리가 필요합니다.

데이터가 없는 경우에 대한 UI 처리가 누락되어 있습니다. 사용자에게 적절한 메시지를 보여주는 것이 좋습니다.

return ( <div> + {data?.pages[0]?.content?.length === 0 ? ( + <div className="flex h-40 items-center justify-center"> + <p className="text-gray-500">작성한 리뷰가 없습니다.</p> + </div> + ) : ( <ReviewCardList data={data ?? { pages: [], pageParams: [] }} refetch={refetch} /> + )} {isFetchingNextPage && ( <div className="mt-4 flex items-center justify-center"> <Loader /> </div> )} <div ref={ref} className="h-[1px]" /> </div> );

📝 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 (

<div>

<ReviewCardList data={data ?? { pages: [], pageParams: [] }} refetch={refetch} />

{isFetchingNextPage && (

<div className="mt-4 flex items-center justify-center">

<Loader />

</div>

)}

<div ref={ref} className="h-[1px]" />

</div>

);

return (

<div>

{data?.pages[0]?.content?.length === 0 ? (

<div className="flex h-40 items-center justify-center">

<p className="text-gray-500">작성한 리뷰가 없습니다.</p>

</div>

) : (

<ReviewCardList data={data ?? { pages: [], pageParams: [] }} refetch={refetch} />

)}

{isFetchingNextPage && (

<div className="mt-4 flex items-center justify-center">

<Loader />

</div>

)}

<div ref={ref} className="h-[1px]" />

</div>

);

coderabbitai · 2024-11-21T04:36:24Z

src/components/common/review-list/review-card-list.tsx

+  // 데이터가 없을 경우 처리
+  if (!reviewDataList.length) {
+    return (
+      <div className="flex justify-center py-10">
+        <p className="text-xl font-semibold">남긴 리뷰가 없습니다</p>
+        <p className="text-lg font-semibold">크루에 가입하고 약속을 잡아보세요!</p>
+      </div>
+    );
+  }


🛠️ Refactor suggestion

빈 상태 UI의 재사용성과 접근성 개선이 필요합니다

현재 구현은 기능적으로는 문제가 없지만, 다음과 같은 개선사항이 있습니다:

텍스트가 하드코딩되어 있어 재사용이 어렵습니다

메시지가 두 개의 p 태그로 나뉘어 있어 스크린 리더 사용자에게 혼란을 줄 수 있습니다

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

- <div className="flex justify-center py-10"> - <p className="text-xl font-semibold">남긴 리뷰가 없습니다</p> - <p className="text-lg font-semibold">크루에 가입하고 약속을 잡아보세요!</p> - </div> + <div className="flex flex-col items-center py-10" role="alert" aria-label="리뷰 없음 안내"> + <strong className="text-xl mb-2">남긴 리뷰가 없습니다</strong> + <span className="text-lg">크루에 가입하고 약속을 잡아보세요!</span> + </div>

📝 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 (!reviewDataList.length) {

return (

<div className="flex justify-center py-10">

<p className="text-xl font-semibold">남긴 리뷰가 없습니다</p>

<p className="text-lg font-semibold">크루에 가입하고 약속을 잡아보세요!</p>

</div>

);

}

// 데이터가 없을 경우 처리

if (!reviewDataList.length) {

return (

<div className="flex flex-col items-center py-10" role="alert" aria-label="리뷰 없음 안내">

<strong className="text-xl mb-2">남긴 리뷰가 없습니다</strong>

<span className="text-lg">크루에 가입하고 약속을 잡아보세요!</span>

</div>

);

}

coderabbitai · 2024-11-21T04:36:24Z

src/components/common/review-list/review-card.tsx

+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (clickable && crewId) {
+      e.stopPropagation();
+      router.push(`/detail/crew/${crewId}`);
+    }


🛠️ Refactor suggestion

이벤트 전파 중지 위치 개선

handleClick 함수에서 e.stopPropagation()이 clickable과 crewId가 있는 경우에만 호출되고 있습니다. 이벤트 전파 중지는 항상 필요한 경우가 많으므로, 함수의 첫 부분으로 이동하여 항상 호출되도록 수정하는 것이 좋습니다.

const handleClick = (e: React.MouseEvent<HTMLElement>) => { + e.stopPropagation(); if (clickable && crewId) { - e.stopPropagation(); router.push(`/detail/crew/${crewId}`); } };

📝 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 handleClick = (e: React.MouseEvent<HTMLElement>) => {

if (clickable && crewId) {

e.stopPropagation();

router.push(`/detail/crew/${crewId}`);

}

const handleClick = (e: React.MouseEvent<HTMLElement>) => {

e.stopPropagation();

if (clickable && crewId) {

router.push(`/detail/crew/${crewId}`);

}

coderabbitai · 2024-11-21T04:36:24Z

src/components/common/review-list/review-card.tsx

+          onClick={(e) => {
+            e.stopPropagation();
+            handleClick(e);
+          }}


🛠️ Refactor suggestion

이벤트 전파 중지 중복 제거

onClick 핸들러와 handleClick 함수에서 e.stopPropagation()이 중복으로 호출되고 있습니다. 중복을 제거하여 코드의 간결성과 유지보수성을 높이는 것이 좋습니다.

onClick 핸들러에서 e.stopPropagation()을 제거하고 handleClick 함수에서만 처리하도록 수정해주세요:

- onClick={(e) => { - e.stopPropagation(); - handleClick(e); - }} + onClick={handleClick}

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

github-actions · 2024-11-21T04:42:21Z

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

coderabbitai

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)

src/components/common/review-list/review-card.tsx (2)
66-70: 라우팅 로직 개선이 필요합니다.

현재 구현은 몇 가지 개선이 필요합니다:

템플릿 리터럴을 사용하여 URL을 더 명확하게 표현할 수 있습니다.

라우팅 경로가 하드코딩되어 있어 유지보수가 어려울 수 있습니다.

다음과 같이 개선해보세요:
-      router.push(`/crew/detail/${crewId}`);
+      const CREW_DETAIL_PATH = `/crew/detail/${crewId}` as const;
+      router.push(CREW_DETAIL_PATH);
Line range hint 117-122: 이벤트 전파 중지 로직 개선이 필요합니다.

삭제 버튼의 이벤트 전파 중지 로직이 인라인으로 구현되어 있어 가독성이 떨어집니다.

다음과 같이 개선해보세요:
+ const handleDeleteClick = (e: React.MouseEvent<HTMLElement>) => {
+   e.stopPropagation();
+   openConfirmDeleteModal();
+ };

 <Button
   className="btn-outlined flex-shrink-0 p-[6px_14px] text-base font-semibold"
-  onClick={(e) => {
-    e.stopPropagation();
-    openConfirmDeleteModal();
-  }}
+  onClick={handleDeleteClick}
 >

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 8ba59e2 and cb19454.

📒 Files selected for processing (1)

src/components/common/review-list/review-card.tsx (4 hunks)

🔇 Additional comments (2)

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

4-4: 인터페이스 변경이 적절히 이루어졌습니다.

필수 속성인 id와 refetch가 추가되었고, crewId가 선택적 속성으로 변경된 것이 적절합니다. 새로운 기능을 위한 의존성도 올바르게 추가되었습니다.

Also applies to: 7-7, 9-9, 25-25, 28-31

55-63: 에러 처리가 잘 구현되었습니다.

삭제 기능의 성공/실패에 대한 사용자 피드백이 적절히 구현되어 있으며, 에러 처리도 잘 되어 있습니다.

coderabbitai · 2024-11-21T04:44:31Z

src/components/common/review-list/review-card.tsx

+        <button
+          type="button"
+          className="mb-3 flex w-fit items-center gap-2 text-xl font-semibold text-gray-800"
+          onClick={handleClick}
+        >
+          {crewName}
+        </button>


🛠️ Refactor suggestion

접근성 개선이 필요합니다.

버튼 구현에 다음 개선사항을 제안합니다:

aria-label 추가

키보드 접근성 개선

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

<button type="button" - className="mb-3 flex w-fit items-center gap-2 text-xl font-semibold text-gray-800" + className="mb-3 flex w-fit items-center gap-2 text-xl font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500" + aria-label={`${crewName} 상세 보기`} onClick={handleClick} > {crewName} </button>

📝 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

<button

type="button"

className="mb-3 flex w-fit items-center gap-2 text-xl font-semibold text-gray-800"

onClick={handleClick}

>

{crewName}

</button>

<button

type="button"

className="mb-3 flex w-fit items-center gap-2 text-xl font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"

aria-label={`${crewName} 상세 보기`}

onClick={handleClick}

>

{crewName}

</button>

github-actions · 2024-11-21T04:46:24Z

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

coderabbitai

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

src/app/(crew)/my-page/my-review/page.tsx (2)
10-14: 페이지 크기를 상수 파일로 분리하는 것이 좋습니다.

하드코딩된 size 값을 상수 파일로 분리하면 유지보수성이 향상됩니다.

다음과 같이 변경하는 것을 제안합니다:
+// src/constants/pagination.ts
+export const REVIEW_PAGE_SIZE = 6;

// src/app/(crew)/my-page/my-review/page.tsx
-  const size = 6;
+  const size = REVIEW_PAGE_SIZE;
31-31: 타입 안전성을 개선할 수 있습니다.

data prop의 기본값에 대한 타입 안전성을 강화하면 좋을 것 같습니다.

다음과 같이 변경하는 것을 제안합니다:
-      <ReviewCardList data={data ?? { pages: [], pageParams: [] }} refetch={refetch} />
+      <ReviewCardList 
+        data={data ?? { pages: [{ content: [], hasNext: false }], pageParams: [] }} 
+        refetch={refetch} 
+      />

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between cb19454 and 6c368ca.

📒 Files selected for processing (1)

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

🔇 Additional comments (2)

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

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

필요한 모든 의존성이 적절하게 임포트되어 있습니다.

16-22: 로딩 상태 처리가 잘 구현되어 있습니다!

사용자 경험을 고려한 적절한 로딩 인디케이터 구현입니다.

ChoYenii

수고 많으셨습니다!

yulrang

수고하셨습니다~!

HaeJungg added 12 commits November 21, 2024 09:17

🚑 fix: npm i changed

f9bbb8e

🚑 fix: 페이지 랜더링 안되는 문제 수정

37d9d12

🚑 fix: 맥 스토리북위해 esbuild설치

1b2142a

💄 design: fontweignt삭제

1a1e0e3

🐛 fix: 포멧 데이터 디자인에 맞게 수정

53c7303

🐛 fix: 타입 수정

a0eed32

🐛 fix: 스토리북 목데이터 수정

f130c0c

💄 design: 디자인에 맞게 날짜 수정

717d967

✨ feat: 나의리뷰, 리뷰 삭제하기 추가

47625b5

🐛 fix: 토스트로 변경

780a561

✨ feat: 나의 리뷰 리스트 무한스크롤 구현, 데이터 연결

6a25e38

📝 docs: 사용하지 않는 파일 삭제, 주석처리

8ba59e2

HaeJungg self-assigned this Nov 21, 2024

HaeJungg linked an issue Nov 21, 2024 that may be closed by this pull request

나의 리뷰리스트 추가 #156

Closed

1 task

coderabbitai bot reviewed Nov 21, 2024

View reviewed changes

🚑 fix: 중복 코드 삭제, 이동경로 수정

cb19454

💄 design: 마진 추가

6c368ca

coderabbitai bot reviewed Nov 21, 2024

View reviewed changes

CodeitFESI4-Team1 deleted a comment from coderabbitai bot Nov 21, 2024

coderabbitai bot reviewed Nov 21, 2024

View reviewed changes

ChoYenii approved these changes Nov 21, 2024

View reviewed changes

yulrang approved these changes Nov 21, 2024

View reviewed changes

HaeJungg merged commit 3a512b6 into develop Nov 21, 2024
3 checks passed

This was referenced Nov 22, 2024

Feat/135/not found 디자인 수정 #167

Merged

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

Merged

This was referenced Nov 22, 2024

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

Merged

Fix/168/stories docs #175

Merged

Fix/170/storybook build err #176

Merged

		queryKey: ['myReviews'],
		queryFn: ({ pageParam = 0 }: { pageParam?: number }) => getMyReviews(pageParam, size),

Feat/156/review list #158

Feat/156/review list #158

Uh oh!

Conversation

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

Uh oh!

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Rate limit exceeded

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

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 21, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 21, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

ChoYenii left a comment

Choose a reason for hiding this comment

Uh oh!

yulrang left a comment

HaeJungg commented Nov 21, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 21, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)