Feat/121/liked api

[HaeJungg]

🔖 Issue Ticket

#121

✍️ Description

• 찜하기 관련 api 연결
• 찜한 약속 리스트 코드 리팩토링, 수정

✅ Checklist

PR

• Branch Convention 확인

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

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

Test

• 로컬 작동 확인

Summary by CodeRabbit

릴리스 노트

• 신규 기능

  • 사용자가 모임에 좋아요를 추가하고 제거할 수 있는 기능 추가.
  • 좋아요 목록을 페이지별로 조회할 수 있는 기능 추가.
  • 로그인 모달을 통해 비로그인 사용자에게 로그인 요청.
  • 좋아요 및 좋아요 취소 시 사용자에게 알림을 표시하는 기능 추가.
  • 새로운 LikedList 및 LikedListPresenter 컴포넌트로 사용자 인터페이스 개선.
  • GatheringListSection 컴포넌트에 좋아요 및 좋아요 취소 기능 통합.
  • GatheringCardCarousel 컴포넌트에 사용자 인증 체크 기능 추가.

• 버그 수정

  • 오류 발생 시 사용자에게 적절한 오류 메시지 표시.
  • 로딩 및 오류 상태에 대한 처리 개선.

[coderabbitai]

Walkthrough

이 변경 사항은 사용자의 좋아요 항목을 관리하기 위한 비동기 함수들을 포함하는 liked-apis.ts 파일을 새로 추가합니다. 또한, liked-queries.ts 파일에 좋아요 목록을 가져오는 쿼리 훅을 추가하고, gathering-list-section.tsx 컴포넌트에서 좋아요 및 좋아요 취소 기능을 구현합니다. my-favorite/page.tsx 파일은 좋아요 목록을 표시하도록 수정되며, 여러 컴포넌트와 타입 정의가 변경되어 새로운 좋아요 기능을 지원합니다.

Changes

파일 경로	변경 요약
src/_apis/liked/liked-apis.ts	getLikedList, addLike, removeLike 함수 추가
src/_queries/liked/liked-queries.ts	useGetLikedListQuery 함수 추가
src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx	handleLike, handleUnlike 함수 추가, 로그인 모달 및 오류 처리 추가
src/app/(crew)/my-favorite/page.tsx	GatheringList 대신 LikedList 컴포넌트로 변경
src/app/api/test-api/route.ts	파일 삭제
src/components/common/gathering-card/container.tsx	onLike, onUnlike 속성 추가 및 오류 처리 개선
src/components/common/modal/confirm-modal.tsx	모달 구조 변경 및 close 버튼 동작 수정
src/components/gathering-list/gathering-card-carousel.tsx	onLike, onUnlike, onShowLoginModal 속성 추가
src/components/gathering-list/gathering-list.stories.tsx	LikedListPresenter로 변경, 새로운 액션 핸들러 추가
src/components/gathering-list/gathering-list.tsx	파일 삭제
src/components/gathering-list/liked-list-container.tsx	LikedList 컴포넌트 추가
src/components/gathering-list/liked-list-presenter.tsx	LikedListPresenter 컴포넌트 추가
src/types/gathering-data.d.ts	GatheringDetailType, LikeGatheringType, GatheringResponseType 인터페이스 추가 및 수정

Possibly related PRs

• Hofix/index page : 파일샘플 컴포넌트 수정 #88: GatheringList 컴포넌트의 수정 사항으로, 좋아요 및 모임 목록 관리와 관련이 있습니다.
• Hotfix/로그인하지 않은 사용자 처리 #89: 모임 관련 작업을 수행하기 전 사용자 인증 확인을 도입하여 좋아요 기능과 연결됩니다.
• Feat/96/form #97: 양식 기능을 향상시켜 좋아요 추가 및 제거와 관련이 있을 수 있습니다.
• Feat/98/crew api 연결 #104: 크루 API와 관련된 변경 사항으로, 좋아요 항목과 연결될 수 있습니다.
• Feat/111/gathering api #120: 모임 관련 API를 추가하여 좋아요 모임 관리와 직접적으로 관련이 있습니다.
• Feat/107/my gathering api #117: 모임 참여 관리 API 추가로 좋아요 모임과 관련이 있습니다.
• 로그인/회원가입 API #122: 로그인 및 회원가입 API 구현으로, 좋아요 항목과 간접적으로 관련이 있을 수 있습니다.

Suggested labels

fix

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 3 minutes and 13 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 4317a4c and e82ff4c.

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)/crew/detail/[id]/_components/gathering-list-section.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

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

[github-actions]

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

[github-actions]

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

[coderabbitai]

Actionable comments posted: 10

🧹 Outside diff range and nitpick comments (19)

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

1-1: import 경로 단순화 제안

현재 import 문에서 사용 중인 @/src/components 경로는 @/components로 단순화할 수 있습니다. 이는 코드의 가독성을 향상시키고 경로 관리를 더 용이하게 만들 것입니다.

다음과 같이 변경을 제안합니다:

-import LikedList from '@/src/components/gathering-list/liked-list-container';
+import LikedList from '@/components/gathering-list/liked-list-container';

src/_queries/liked/liked-queries.ts (1)

4-9: 쿼리 구현이 잘 되었으나, 몇 가지 개선사항을 제안드립니다.

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

1. 에러 타입 정의
2. 성능 최적화를 위한 staleTime 설정
3. 페이지네이션 관련 메타데이터 타입 정의

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

+import { UseQueryOptions } from '@tanstack/react-query';
+
+interface LikedListResponse {
+  items: Array<any>; // TODO: 실제 아이템 타입으로 교체
+  meta: {
+    currentPage: number;
+    totalPages: number;
+  };
+}

-export function useGetLikedListQuery(page: number) {
+export function useGetLikedListQuery(
+  page: number,
+  options?: Omit<UseQueryOptions<LikedListResponse, Error>, 'queryKey' | 'queryFn'>
+) {
   return useQuery({
     queryKey: ['likedList', page],
     queryFn: () => getLikedList(page),
+    staleTime: 5 * 60 * 1000, // 5분
+    ...options,
   });
 }

src/_apis/liked/liked-apis.ts (1)

4-15: 페이지 크기를 상수로 분리하는 것이 좋습니다.

현재 페이지 크기가 6으로 하드코딩되어 있습니다. 이를 상수로 분리하면 유지보수성이 향상될 것입니다.

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

+const LIKED_LIST_PAGE_SIZE = 6;
+
 export async function getLikedList(page: number): Promise<GatheringResponseType> {
-  const url = `/api/liked/memberLikes?page=${page}&size=6`;
+  const url = `/api/liked/memberLikes?page=${page}&size=${LIKED_LIST_PAGE_SIZE}`;

src/components/gathering-list/liked-list-container.tsx (2)

3-8: import문을 타입별로 구성하는 것을 추천드립니다.

더 나은 가독성을 위해 import문을 다음과 같이 그룹화하는 것이 좋습니다:

1. React 관련
2. 내부 API/쿼리
3. 유틸리티
4. 컴포넌트

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

import { useState } from 'react';

+// Internal APIs and queries
import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
import { useGetLikedListQuery } from '@/src/_queries/liked/liked-queries';

+// Utilities
import { ApiError } from '@/src/utils/api';

+// Components
import Toast from '@/src/components/common/toast';
import LikedListPresenter from './liked-list-presenter';

---

10-12: 타입 안정성 개선이 필요합니다.

페이지 상태와 데이터에 대한 명시적인 타입 정의가 없습니다.

다음과 같이 타입을 추가하는 것을 추천드립니다:

-export default function LikedList() {
+export default function LikedList(): JSX.Element {
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState<number>(1);

src/components/gathering-list/liked-list-presenter.tsx (3)

6-12: 인터페이스 문서화 개선 제안

인터페이스의 각 프로퍼티에 대한 JSDoc 문서를 추가하면 컴포넌트의 사용성과 유지보수성이 향상될 것 같습니다.

다음과 같이 문서화를 추가해보세요:

 interface LikedListPresenterProps {
+  /** 페이지네이션된 모임 데이터 */
   gatheringData: GatheringResponseType;
+  /** 페이지 변경 시 호출되는 핸들러 */
   onPageChange: (page: number) => void;
+  /** 좋아요 추가 시 호출되는 핸들러 */
   onLike: (gatheringId: number) => void;
+  /** 좋아요 제거 시 호출되는 핸들러 */
   onUnlike: (gatheringId: number) => void;
+  /** 현재 페이지 번호 */
   page: number;
 }

---

23-41: 그리드 레이아웃 관련 개선사항

1. min-height 값이 하드코딩되어 있어 콘텐츠 양에 따라 레이아웃 이슈가 발생할 수 있습니다.
2. GatheringCard의 liked prop이 항상 true로 설정되어 있는데, 이는 불필요해 보입니다. 이미 좋아요 목록이므로 제거해도 될 것 같습니다.

-            liked

---

42-65: 페이지네이션 스타일 구성 개선 제안

현재 Tailwind와 CSS-in-JS가 혼용되어 있어 스타일 관리가 복잡해 보입니다. 스타일 정의를 상수로 분리하면 가독성과 재사용성이 향상될 것 같습니다.

다음과 같이 스타일을 분리해보세요:

const PAGINATION_STYLES = {
  classNames: {
    control: cn(
      'data-[active="true"]:text-blue-500 data-[active="true"]:font-bold',
      'border-none bg-transparent hover:bg-transparent',
    ),
  },
  styles: {
    control: {
      '&[data-active]': {
        backgroundColor: 'transparent',
        fontWeight: 'var(--pagination-active-font-weight)',
        color: 'var(--pagination-active-color)',
        boxShadow: 'none',
      },
    },
  },
} as const;

// 사용시
<Pagination
  total={totalPages}
  value={page}
  onChange={onPageChange}
  {...PAGINATION_STYLES}
  size="sm"
/>

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

31-39: 코드 중복을 제거하고 에러 처리를 통합해 주세요.

좋아요/좋아요 취소 핸들러의 에러 처리 로직이 중복되어 있습니다.

다음과 같이 공통 에러 처리 함수를 만들어 사용하는 것을 제안드립니다:

+const handleApiError = (action: string, error: unknown) => {
+  const baseMessage = action === 'like' ? '찜하기' : '찜하기 해제';
+  if (error instanceof ApiError) {
+    Toast({ 
+      message: `${baseMessage}에 실패했습니다. 잠시 후 다시 시도해 주세요.`,
+      type: 'error' 
+    });
+  } else {
+    Toast({ 
+      message: '예기치 못한 오류가 발생했습니다.',
+      type: 'error' 
+    });
+  }
+};

 const handleLike = async (gatheringId: number) => {
   try {
     await addLike(gatheringId);
   } catch (error) {
-    if (error instanceof ApiError) {
-      Toast({ message: `찜하기에 실패했습니다: ${error.message}`, type: 'error' });
-    }
+    handleApiError('like', error);
   }
 };

 const handleUnlike = async (gatheringId: number) => {
   try {
     await removeLike(gatheringId);
   } catch (error) {
-    if (error instanceof ApiError) {
-      Toast({ message: `찜하기 해제에 실패했습니다: ${error.message}`, type: 'error' });
-    }
+    handleApiError('unlike', error);
   }
 };

---

41-44: 현재 경로 가져오기 방식을 개선해 주세요.

window.location.href는 클라이언트 사이드에서만 사용 가능하며, Next.js의 라우팅 시스템과 완벽하게 호환되지 않을 수 있습니다.

Next.js의 usePathname을 사용하는 것을 추천드립니다:

+import { usePathname } from 'next/navigation';

 export default function GatheringListSection({ id }: GatheringListSectionProps) {
   const router = useRouter();
+  const pathname = usePathname();
 
   const handleLoginRedirect = () => {
-    const currentPath = window.location.href;
+    const currentPath = pathname;
     router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
   };

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

Line range hint 27-57: 더미 데이터에서 민감한 정보 제거 필요

더미 데이터에 이메일과 같은 민감한 개인정보가 포함되어 있습니다. 실제 이메일 주소를 사용하는 대신 가명의 이메일(예: [email protected])을 사용하는 것이 좋습니다.

-        email: '[email protected]',
+        email: '[email protected]',

---

26-26: API 통합 구현 제안

현재 TODO 주석들이 API 통합과 관련되어 있습니다:

1. 모달 데이터 연결
2. 좋아요 토글 로직

PR의 목적에 맞게 다음과 같은 구현을 제안드립니다:

• useGetLikedListQuery를 활용한 좋아요 상태 관리
• 모달 데이터는 useQuery를 통한 실시간 데이터 패칭

API 통합 구현에 대한 상세한 코드 예시가 필요하시다면 말씀해 주세요.

Also applies to: 65-65, 75-75

---

Line range hint 71-89: 컴포넌트 구조 개선 제안

현재 구현에 대해 다음과 같은 개선사항을 제안드립니다:

1. 에러 처리 추가
2. 모달 상태 관리 최적화
3. 데이터 로딩 상태 처리

다음과 같은 구조로 개선하는 것을 추천드립니다:

const handleCardClick = useCallback(() => {
  try {
    setIsOpened(true);
    // 데이터 패칭 로직
  } catch (error) {
    console.error('모달 데이터 로딩 중 오류:', error);
    // 에러 처리 로직
  }
}, []);

// 로딩 상태 표시
{isLoading ? (
  <LoadingSpinner />
) : dummyModalData && (
  <GatheringDetailModalContainer
    opened={isOpened}
    close={() => setIsOpened(false)}
    data={dummyModalData}
  />
)}

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

48-60: 좋아요 토글 핸들러의 사용자 경험 개선이 필요합니다.

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

1. 낙관적 업데이트(Optimistic Update)를 통한 즉각적인 UI 반응
2. 중복 클릭 방지를 위한 로딩 상태 추가
3. 더 구체적인 에러 메시지 처리

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

+ const [isLoading, setIsLoading] = useState(false);
  const handleLikeToggle = async () => {
+   if (isLoading) return;
+   setIsLoading(true);
+   const newLikedState = !isLiked;
+   setIsLiked(newLikedState); // 낙관적 업데이트
    try {
-     if (isLiked) {
+     if (!newLikedState) {
        await onUnlike(id);
-       setIsLiked(false);
      } else {
        await onLike(id);
-       setIsLiked(true);
      }
    } catch (error) {
+     setIsLiked(!newLikedState); // 실패시 원래 상태로 복구
      Toast({
-       message: '찜 상태를 업데이트하는 데 실패했습니다.',
+       message: `찜하기 ${newLikedState ? '추가' : '삭제'}에 실패했습니다. 다시 시도해 주세요.`,
        type: 'error'
      });
+   } finally {
+     setIsLoading(false);
    }
  };

src/app/(crew)/crew/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx (1)

좋아요 기능 구현이 미완성 상태입니다

코드베이스 분석 결과, 현재 좋아요 관련 기능이 완전히 구현되지 않은 것으로 확인됩니다:

• 스토리북에서는 liked: false 상태값만 정의되어 있음
• 좋아요 목록을 조회하는 API만 구현되어 있고 (getLikedList), 좋아요/좋아요 취소 기능은 아직 구현되지 않음
• 모달 컴포넌트에서 좋아요 상태를 처리하는 로직이 없음

🔗 Analysis chain

Line range hint 58-187: 좋아요 API와의 연동 확인이 필요합니다.

각 스토리의 데이터에 liked: false가 설정되어 있는데, 이것이 새로 추가된 좋아요 API와 올바르게 연동되는지 확인이 필요합니다.

---

Let me gather more information about the liked functionality implementation.

---

Let me check one more thing to see if there are any liked-related APIs in the codebase.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 좋아요 API 관련 컴포넌트와의 연동 확인

# 좋아요 API 관련 파일 검색
echo "좋아요 API 관련 파일 검색 결과:"
rg -l "liked-apis"

# GatheringDetailModalContainer에서 좋아요 API 사용 여부 확인
echo "\nGatheringDetailModalContainer의 좋아요 API 사용 확인:"
ast-grep --pattern 'import { $_ } from "$_/liked-apis"' ./src/app/\(crew\)/crew/_components/gathering-detail-modal/container.tsx

Length of output: 467

---

Script:

#!/bin/bash
# Check the implementation of liked functionality in the modal component and container

# Check modal component implementation
echo "Modal component liked implementation:"
rg -A 5 "liked" ./src/app/\(crew\)/crew/_components/gathering-detail-modal/gathering-detail-modal.tsx

# Check container implementation for liked state handling
echo "\nContainer liked state handling:"
rg -A 5 "liked" ./src/app/\(crew\)/crew/_components/gathering-detail-modal/container.tsx

# Check liked API implementation
echo "\nLiked API implementation:"
rg -A 5 "liked" ./src/_queries/liked/liked-queries.ts

Length of output: 812

---

Script:

#!/bin/bash
# Check liked API implementations and usages

# Check liked API endpoints
echo "Liked API endpoints:"
rg -A 5 "liked-apis" ./src/_apis

# Check if there are any like/unlike mutation implementations
echo "\nLike/Unlike mutations:"
rg -A 5 "mutation.*like" 

Length of output: 169

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

11-16: 인터페이스 문서화 개선 필요

새로 추가된 props에 대한 JSDoc 문서화를 추가하면 컴포넌트의 사용성이 향상될 것 같습니다.

다음과 같이 문서화를 추가해보세요:

 interface GatheringCardCarouselProps {
   gatheringData: GatheringType[];
   crewId: number;
+  /** 모임 좋아요 처리 핸들러 */
   onLike: (gatheringId: number) => Promise<void>;
+  /** 모임 좋아요 취소 처리 핸들러 */
   onUnlike: (gatheringId: number) => Promise<void>;
+  /** 로그인 모달 표시 핸들러 */
   onShowLoginModal: () => void;
 }

---

30-32: 인증 로직 리팩토링 제안

인증 상태 확인 로직을 더 재사용 가능하게 만들면 좋을 것 같습니다.

커스텀 훅으로 분리하는 것을 고려해보세요:

// hooks/useAuth.ts
export const useAuth = () => {
  const token = useAuthStore((state) => state.token);
  return {
    isLoggedIn: !!token,
    token
  };
};

이렇게 하면 다른 컴포넌트에서도 동일한 인증 로직을 쉽게 재사용할 수 있습니다.

src/components/gathering-list/gathering-list.stories.tsx (2)

1-8: QueryClient 설정에 타입 안전성 추가 권장

QueryClient의 기본 설정이 누락되어 있습니다. 타입 안전성과 일관된 동작을 보장하기 위해 defaultOptions을 추가하는 것이 좋습니다.

다음과 같이 QueryClient를 구성하는 것을 추천드립니다:

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

---

32-227: 테스트 데이터의 다양성 개선 필요

모든 모임 데이터가 동일한 이미지 URL을 사용하고 있습니다. 다양한 테스트 케이스를 위해 다음 사항들을 고려해보세요:

• 다양한 이미지 URL 사용
• 과거 날짜 포함
• 마감된 모임 케이스
• 최대 인원이 다양한 케이스

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 243dc0d and 84a8539.

📒 Files selected for processing (15)

• src/_apis/liked/liked-apis.ts (1 hunks)
• src/_queries/liked/liked-queries.ts (1 hunks)
• src/app/(crew)/crew/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx (3 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (2 hunks)
• src/app/(crew)/my-favorite/page.tsx (1 hunks)
• src/app/api/test-api/route.ts (0 hunks)
• src/components/common/gathering-card/container.tsx (3 hunks)
• src/components/common/gathering-card/scheduled-gathering-card/container.tsx (1 hunks)
• src/components/common/modal/confirm-modal.tsx (2 hunks)
• src/components/gathering-list/gathering-card-carousel.tsx (3 hunks)
• src/components/gathering-list/gathering-list.stories.tsx (1 hunks)
• src/components/gathering-list/gathering-list.tsx (0 hunks)
• src/components/gathering-list/liked-list-container.tsx (1 hunks)
• src/components/gathering-list/liked-list-presenter.tsx (1 hunks)
• src/types/gathering-data.d.ts (2 hunks)

💤 Files with no reviewable changes (2)

• src/app/api/test-api/route.ts
• src/components/gathering-list/gathering-list.tsx

🔇 Additional comments (15)

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

3-9: 컴포넌트 구현 검증 필요

컴포넌트가 단순화되어 좋습니다. 하지만 LikedList 컴포넌트에 props가 전달되지 않는 것이 의도된 것인지 확인이 필요합니다.

다음 스크립트를 실행하여 LikedList 컴포넌트의 props 요구사항을 확인하겠습니다:

✅ Verification successful

LikedList 컴포넌트 구현이 적절함을 확인했습니다

LikedList는 컨테이너 컴포넌트로서 내부적으로 필요한 상태와 데이터를 관리하고 있어 props가 필요하지 않습니다. 다음 사항들이 확인되었습니다:

• 컨테이너(LikedList)가 페이지 상태와 데이터 fetching을 관리
• Presenter(LikedListPresenter)에 필요한 props를 전달
• React Query를 통한 데이터 관리가 올바르게 구현

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify LikedList component props requirements

# Check the component implementation
ast-grep --pattern 'interface $props {
  $$$
}' components/gathering-list/liked-list-container.tsx

# Check for required props usage
rg -A 5 'LikedList.*=' components/gathering-list/liked-list-container.tsx

Length of output: 365

---

Script:

#!/bin/bash
# Let's first find the LikedList component file
fd LikedList

# Then check its implementation and props
rg -A 10 "export.*LikedList"

# Also search for any interface or type definitions related to LikedList
ast-grep --pattern 'interface $props {
  $$$
}'

# Additional search for any props being used within LikedList
rg -A 5 "props\." 

Length of output: 3854

src/_queries/liked/liked-queries.ts (2)

1-2: 필요한 의존성만 정확하게 가져오고 있습니다.

필수적인 useQuery와 getLikedList API만 import하여 깔끔하게 구현되었습니다.

---

6-6: 쿼리 키가 적절히 구성되어 있는지 확인이 필요합니다.

현재 queryKey가 ['likedList', page]로 구성되어 있는데, 다른 곳에서 동일한 키를 사용하고 있지 않은지 확인이 필요합니다.

✅ Verification successful

Let me check the actual usage of the queryKey by looking at the content of the file.

---

쿼리 키 사용이 적절합니다

'likedList' 쿼리 키는 해당 파일에서만 유일하게 사용되고 있으며, 페이지 파라미터와 함께 올바르게 구성되어 있습니다. 다른 파일에서 동일한 쿼리 키를 사용하지 않아 캐시 충돌의 위험이 없습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 동일한 쿼리 키 사용 여부 확인

# likedList 쿼리 키 사용 검색
rg -l "queryKey.*likedList" --type ts

Length of output: 75

---

Script:

#!/bin/bash
# Check the actual implementation of the query key usage
rg "queryKey.*likedList" -A 5 --type ts

Length of output: 267

src/_apis/liked/liked-apis.ts (1)

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

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

src/components/common/modal/confirm-modal.tsx (2)

39-39: 닫기 버튼 제거로 UX 개선

확인 모달의 특성상 사용자가 명시적으로 선택해야 하는 상황에서 닫기 버튼을 제거한 것은 적절한 판단입니다. 실수로 모달이 닫히는 것을 방지할 수 있습니다.

---

49-50: 모달 레이아웃 구조 개선

일관된 패딩(p-4)과 중앙 정렬(text-center)을 적용하고, 적절한 간격(space-y-8)을 추가한 것은 좋은 개선입니다. 레이아웃이 더 깔끔하고 유지보수가 용이해졌습니다.

src/types/gathering-data.d.ts (1)

15-15: LGTM! crewId 필드 추가

GatheringDetailType에 crewId 필드가 적절하게 추가되었습니다.

src/components/gathering-list/liked-list-presenter.tsx (1)

14-21: 구현이 깔끔해 보입니다!

컴포넌트 선언과 props 구조분해가 React 모범 사례를 잘 따르고 있습니다.

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

3-9: 가져오기(import) 구문이 잘 구성되어 있습니다!

필요한 모든 의존성이 명확하게 정의되어 있으며, 관련 기능별로 잘 구성되어 있습니다.

---

18-19: 상태 관리가 적절하게 구현되었습니다!

모달 상태와 라우터가 명확하게 정의되어 있습니다.

---

51-70: 렌더링 로직이 깔끔하게 구현되었습니다!

모달과 캐러셀 컴포넌트의 통합이 잘 되어있고, props 전달이 명확합니다.

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

15-16: 좋아요 기능을 위한 인터페이스 확장이 적절히 구현되었습니다.

비동기 함수 타입이 올바르게 정의되어 있으며, 매개변수 타입도 적절합니다.

---

30-31: 컴포넌트 props 통합이 잘 되어있습니다.

인터페이스에서 정의된 props가 컴포넌트에 올바르게 전달되고 있습니다.

src/app/(crew)/crew/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx (1)

58-58: 모든 스토리에 crewId가 일관되게 추가되었습니다.

각 스토리의 데이터 객체에 crewId: 1이 적절하게 추가되었습니다. 이는 좋아요 API 연동을 위한 필수 데이터로 보입니다.

Also applies to: 101-101, 144-144

src/components/gathering-list/gathering-list.stories.tsx (1)

9-23: 메타 구성이 적절합니다

스토리북 메타 구성이 잘 되어있으며, QueryClientProvider 데코레이터가 적절히 설정되어 있습니다.

[coderabbitai]

🛠️ Refactor suggestion

사용자 경험 개선이 필요합니다.

현재 로딩 및 에러 상태의 UI가 너무 단순합니다. 더 나은 사용자 경험을 위해 다음과 같은 개선이 필요합니다:

1. 로딩 상태에 스켈레톤 UI 또는 스피너 추가
2. 에러 상태에 재시도 버튼 추가
3. 빈 상태에 대한 더 친근한 메시지와 가이드 제공

다음과 같이 수정하는 것을 추천드립니다:

-  if (isLoading) return <div>로딩중...</div>;
+  if (isLoading) return <LoadingSpinner />;

   if (error || gatheringData === undefined) {
     Toast({ message: '좋아요 목록 가져오기 실패', type: 'error' });
-    return <div>좋아요 목록 가져오기 실패</div>;
+    return (
+      <ErrorState
+        message="좋아요 목록을 불러오는데 실패했습니다"
+        onRetry={() => refetch()}
+      />
+    );
   }

   if (gatheringData.content.length === 0) {
-    return <div>좋아요 누른 목록이 없습니다</div>;
+    return (
+      <EmptyState
+        message="아직 좋아요를 누른 모임이 없습니다"
+        description="관심있는 모임을 찾아보세요!"
+        actionButton={
+          <Link href="/gatherings">모임 둘러보기</Link>
+        }
+      />
+    );
   }

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

[coderabbitai]

🛠️ Refactor suggestion

좋아요/좋아요 취소 핸들러 중복 코드 개선 필요

onLike와 onUnlike 핸들러의 구조가 매우 유사하여 중복 코드가 발생했습니다.

다음과 같이 공통 로직을 추출하여 리팩토링하는 것을 추천드립니다:

const createAuthenticatedHandler = (
  handler: (id: number) => Promise<void>
) => (id: number) => {
  if (isLoggedIn) {
    return handler(id);
  }
  onShowLoginModal();
  return Promise.resolve();
};

<GatheringCard
  crewId={crewId}
  {...card}
  className="w-full"
  onLike={createAuthenticatedHandler((id) => onLike(id))}
  onUnlike={createAuthenticatedHandler((id) => onUnlike(id))}
/>

이렇게 하면:

1. 코드 중복이 제거됩니다
2. 인증 로직이 한 곳에서 관리됩니다
3. 향후 인증 관련 로직 변경 시 유지보수가 용이합니다

[yulrang]

토끼가 추천해준방법도 고민해서 시간날때 적용해보시면 좋을 것 같아요~~~
수고 많으셨습니다~!

[coderabbitai]

Actionable comments posted: 16

🧹 Outside diff range and nitpick comments (14)

src/_queries/liked/liked-queries.ts (1)

4-9: 에러 처리와 재시도 설정을 추가하는 것이 좋겠습니다.

사용자 경험 향상을 위해 다음과 같은 설정을 추가하는 것을 고려해보세요:

• 에러 발생 시 재시도 횟수
• 캐시 유효 시간
• 에러 발생 시 폴백 UI를 위한 에러 처리

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

 export function useGetLikedListQuery(page: number) {
   return useQuery({
     queryKey: ['likedList', page],
     queryFn: () => getLikedList(page),
+    retry: 1,
+    staleTime: 5 * 60 * 1000, // 5분
+    onError: (error) => {
+      console.error('좋아요 목록을 불러오는데 실패했습니다:', error);
+    }
   });
 }

src/components/gathering-list/liked-list-container.tsx (1)

1-9: 경로 별칭(@/src)의 중복 사용을 확인해주세요.

import 구문에서 @/src가 중복적으로 사용되고 있습니다. 이는 유지보수성을 저하시킬 수 있습니다.

다음과 같이 수정하는 것을 고려해보세요:

-import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
-import { useGetLikedListQuery } from '@/src/_queries/liked/liked-queries';
-import { ApiError } from '@/src/utils/api';
-import Toast from '@/src/components/common/toast';
+import { addLike, removeLike } from '@/_apis/liked/liked-apis';
+import { useGetLikedListQuery } from '@/_queries/liked/liked-queries';
+import { ApiError } from '@/utils/api';
+import Toast from '@/components/common/toast';

src/components/gathering-list/liked-list-presenter.tsx (3)

21-21: 사용하지 않는 변수가 있습니다

pageSize 변수를 구조 분해했지만 컴포넌트 내에서 사용되지 않고 있습니다. 필요하지 않다면 제거하는 것이 좋습니다.

-  const { content, pageSize, totalPages } = gatheringData;
+  const { content, totalPages } = gatheringData;

---

47-62: 스타일링 방식의 일관성이 필요합니다

Pagination 컴포넌트의 스타일링에 Tailwind(classNames)와 CSS-in-JS(styles)가 혼용되어 있습니다. 유지보수성을 위해 한 가지 방식으로 통일하는 것이 좋습니다.

예를 들어, Tailwind만 사용하는 방식:

          classNames={{
            control: cn(
              'data-[active="true"]:text-blue-500 data-[active="true"]:font-bold',
              'border-none bg-transparent hover:bg-transparent',
+             'shadow-none'
            ),
          }}
-          styles={{
-            control: {
-              '&[data-active]': {
-                backgroundColor: 'transparent',
-                fontWeight: 'var(--pagination-active-font-weight)',
-                color: 'var(--pagination-active-color)',
-                boxShadow: 'none',
-              },
-            },
-          }}

---

29-29: min-height 값의 근거가 필요합니다

md:min-h-[962px]와 lg:min-h-[636px] 값이 매직 넘버처럼 보입니다. 이 값들의 계산 근거를 주석으로 추가하거나, 의미 있는 변수로 추출하는 것이 좋습니다.

          'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
          'mx-auto justify-items-center gap-4',
-          'md:min-h-[962px] lg:min-h-[636px]',
+          // 카드 높이(300px) * 행 수(2) + 간격(16px) * (행 수 - 1) = 616px
+          'md:min-h-[616px]',
+          // 카드 높이(300px) * 행 수(2) + 간격(16px) * (행 수 - 1) = 616px
+          'lg:min-h-[616px]',

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

46-48: TODO 주석을 해결해주세요.

로딩과 에러 상태에 대한 UI 개선이 필요합니다.

더 나은 로딩 및 에러 UI 구현을 도와드릴까요? 스켈레톤 로딩이나 에러 바운더리 구현을 제안드릴 수 있습니다.

---

51-70: 모달 상태 관리 로직이 개선될 수 있습니다.

모달의 열림/닫힘 상태가 중복되어 관리되고 있습니다. opened prop이 불필요해 보입니다.

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

  {showLoginModal && (
    <ConfirmModal
-     opened={showLoginModal}
      onClose={() => setShowLoginModal(false)}
      onConfirm={handleLoginRedirect}
    >
      로그인이 필요합니다!
    </ConfirmModal>
  )}

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

Line range hint 27-65: 더미 데이터를 실제 API 응답 타입으로 교체해주세요.

더미 데이터는 개발 단계에서는 유용하지만, 프로덕션 환경에서는 실제 API 응답을 사용하는 것이 좋습니다. 다음 사항들을 고려해주세요:

1. API 응답 타입을 정의하고 더미 데이터를 해당 타입으로 검증
2. 실제 API 연동 시 마이그레이션이 용이하도록 인터페이스 구조화

interface Participant {
  id: number;
  profileImageUrl: string;
  nickname: string;
  email: string;
}

interface GatheringDetailType {
  crewId: number;
  id: number;
  title: string;
  // ... 나머지 필드들
  participants: Participant[];
}

---

26-26: TODO 항목들의 구현이 필요합니다.

현재 다음과 같은 구현이 누락되어 있습니다:

1. 모달 데이터 연결
2. useQuery 재시도 로직
3. 좋아요 토글 기능

이러한 기능들의 구현을 도와드릴까요? GitHub 이슈를 생성하여 각 TODO 항목을 추적하고 구현 가이드를 제공할 수 있습니다.

Also applies to: 73-73, 78-78

---

Line range hint 16-24: 컴포넌트 구조 개선을 위한 제안사항

현재 구조는 잘 작성되어 있지만, 다음과 같은 개선사항을 고려해보세요:

1. 에러 바운더리 추가
2. 로딩 상태 처리
3. 모달 상태 관리를 전역 상태로 이동 고려

// 에러 바운더리 예시
try {
  // 기존 렌더링 로직
} catch (error) {
  return <ErrorComponent error={error} />;
}

// 로딩 상태 처리 예시
{isLoading ? (
  <LoadingSpinner />
) : (
  <ScheduledGatheringCardPresenter
    data={data}
    onClick={handleCardClick}
    onLikeToggle={handleLikeToggle}
  />
)}

Also applies to: 69-91

src/app/(crew)/crew/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx (1)

Line range hint 58-187: 테스트 데이터 중복 개선 제안

현재 세 개의 스토리가 매우 유사한 테스트 데이터를 사용하고 있습니다. 코드의 유지보수성을 높이기 위해 공통 데이터를 분리하는 것을 고려해보세요.

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

+const BASE_GATHERING_DATA = {
+  crewId: 1,
+  introduce: '공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~',
+  location: '서울시 강남구 역삼동 오피스타워 3층',
+  currentCount: 3,
+  totalCount: 10,
+  imageUrl: 'https://www.dabur.com/Blogs/Doshas/Importance%20and%20Benefits%20of%20Yoga%201020x450.jpg',
+  participants: [
+    // ... 기존 참가자 데이터
+  ],
+};

 export const ModalWithUser = Template.bind({});
 ModalWithUser.args = {
   opened: false,
   data: {
-    crewId: 1,
-    // ... 기존 데이터
+    ...BASE_GATHERING_DATA,
+    id: 1,
+    title: '신나는 운동...즐거운..코딩..',
+    liked: false,
+    gatheringCaptain: false,
+    participant: false,
   },
 };

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

30-32: 로그인 상태 확인 로직을 커스텀 훅으로 분리하는 것을 고려해보세요.

현재 구현은 잘 작동하지만, 재사용성과 관리 용이성을 위해 다음과 같은 개선을 제안합니다:

+// src/hooks/use-auth.ts
+export const useAuth = () => {
+  const token = useAuthStore((state) => state.token);
+  return {
+    isLoggedIn: !!token,
+    token
+  };
+};

-const token = useAuthStore((state) => state.token);
-const isLoggedIn = !!token;
+const { isLoggedIn } = useAuth();

src/components/gathering-list/gathering-list.stories.tsx (2)

7-22: QueryClient 설정 최적화 필요

현재 QueryClient가 기본 설정으로만 생성되어 있습니다. Storybook 환경에 맞는 캐싱 및 재시도 설정을 추가하는 것이 좋습니다.

다음과 같이 QueryClient 설정을 최적화하는 것을 추천드립니다:

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

---

28-30: 액션 핸들러에 타입 안전성 추가 필요

현재 액션 핸들러들이 타입 정의 없이 구현되어 있습니다. 타입 안전성을 위해 매개변수 타입을 명시하는 것이 좋습니다.

다음과 같이 타입을 추가하는 것을 추천드립니다:

-const onLike = action('onLike');
-const onUnlike = action('onUnlike');
-const onPageChange = action('onPageChange');
+const onLike = action<(id: number) => void>('onLike');
+const onUnlike = action<(id: number) => void>('onUnlike');
+const onPageChange = action<(page: number) => void>('onPageChange');

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 243dc0d and 84a8539.

📒 Files selected for processing (15)

• src/_apis/liked/liked-apis.ts (1 hunks)
• src/_queries/liked/liked-queries.ts (1 hunks)
• src/app/(crew)/crew/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx (3 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (2 hunks)
• src/app/(crew)/my-favorite/page.tsx (1 hunks)
• src/app/api/test-api/route.ts (0 hunks)
• src/components/common/gathering-card/container.tsx (3 hunks)
• src/components/common/gathering-card/scheduled-gathering-card/container.tsx (1 hunks)
• src/components/common/modal/confirm-modal.tsx (2 hunks)
• src/components/gathering-list/gathering-card-carousel.tsx (3 hunks)
• src/components/gathering-list/gathering-list.stories.tsx (1 hunks)
• src/components/gathering-list/gathering-list.tsx (0 hunks)
• src/components/gathering-list/liked-list-container.tsx (1 hunks)
• src/components/gathering-list/liked-list-presenter.tsx (1 hunks)
• src/types/gathering-data.d.ts (2 hunks)

💤 Files with no reviewable changes (2)

• src/app/api/test-api/route.ts
• src/components/gathering-list/gathering-list.tsx

🔇 Additional comments (15)

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

6-6: 구현이 깔끔해 보입니다!

LikedList 컴포넌트로의 교체가 잘 이루어졌습니다. 컴포넌트가 props 없이 독립적으로 동작하도록 설계된 것이 좋은 접근 방식으로 보입니다.

---

1-1: 컴포넌트 경로 확인이 필요합니다.

새로 추가된 LikedList 컴포넌트의 경로가 올바른지 확인이 필요합니다.

다음 스크립트를 실행하여 컴포넌트 파일의 존재 여부를 확인하겠습니다:

✅ Verification successful

컴포넌트 경로가 정확하게 확인되었습니다.

LikedList 컴포넌트가 올바른 경로에 존재하며, 적절하게 구현되어 있습니다. 컴포넌트는 좋아요 목록을 관리하는 기능을 포함하고 있어 의도된 용도에 맞게 구현되어 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the existence of the LikedList component

# Check if the component file exists
fd "liked-list-container.tsx" src/components/gathering-list

# Verify the component export
ast-grep --pattern 'export default function LikedList'

Length of output: 171

---

Script:

#!/bin/bash
# Let's verify the content of the LikedList component to ensure it's properly implemented
cat src/components/gathering-list/liked-list-container.tsx

Length of output: 1758

src/_queries/liked/liked-queries.ts (2)

1-9: 구현이 깔끔하고 명확합니다!

React Query를 사용한 구현이 간단하면서도 효과적입니다.

---

6-6: queryKey가 적절히 구성되어 있는지 확인이 필요합니다.

다른 곳에서 동일한 키를 사용하고 있는지 확인하여 캐시 충돌을 방지해야 합니다.

✅ Verification successful

queryKey 구성이 적절합니다

'likedList' queryKey는 해당 파일에서만 사용되고 있으며, page 파라미터와 함께 적절히 구성되어 있습니다. 다른 파일에서 동일한 키를 사용하는 경우가 없어 캐시 충돌 위험이 없습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other usages of the 'likedList' query key
rg -l "queryKey.*['\"]likedList['\"]" --type ts

Length of output: 89

---

Script:

#!/bin/bash
# Let's check the content of the file to understand the context better
cat src/_queries/liked/liked-queries.ts

Length of output: 308

---

Script:

#!/bin/bash
# Let's check if there are any other files that might be using similar query patterns or mutations related to liked functionality
rg -l "queryKey.*liked" --type ts

# Also check for any mutations that might be affecting this query
rg -l "useMutation.*liked" --type ts

Length of output: 110

src/_apis/liked/liked-apis.ts (2)

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

필요한 유틸리티와 타입이 적절하게 임포트되었습니다.

---

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

백엔드 API 문서와 일치하는지 다음 엔드포인트들을 확인해주세요:

• GET /api/liked/memberLikes
• POST /api/liked/${gatheringId}
• DELETE /api/liked/${gatheringId}

Also applies to: 19-19, 31-31

✅ Verification successful

API 엔드포인트 구현이 일관되게 되어있습니다

코드베이스 분석 결과, /api/liked 관련 엔드포인트들이 다음과 같이 일관되게 구현되어 있음을 확인했습니다:

• GET /api/liked/memberLikes - 찜 목록 조회 (페이지네이션 지원)
• POST /api/liked/${gatheringId} - 찜 추가
• DELETE /api/liked/${gatheringId} - 찜 제거

각 엔드포인트는 fetchApi 유틸리티를 통해 적절한 HTTP 메서드와 헤더를 사용하여 구현되어 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 문서나 스펙을 찾아 엔드포인트 검증
fd -e yaml -e json . | xargs grep -l "/api/liked"

Length of output: 49

---

Script:

#!/bin/bash
# API 엔드포인트 사용 패턴 검색
rg -A 2 "/api/liked" --type ts

# API 관련 설정 파일 검색
fd -e ts -e js "api|config|axios" | xargs cat

# Swagger/OpenAPI 문서 검색
fd "swagger|openapi|api" -e yaml -e json

Length of output: 10689

src/components/common/modal/confirm-modal.tsx (2)

39-39: 명시적인 닫기 버튼 제거가 적절해 보입니다.

확인 모달의 특성상 사용자가 명확한 선택을 해야 하므로, 닫기 버튼을 제거한 것이 UX 관점에서 적절합니다. 실수로 모달이 닫히는 것을 방지할 수 있습니다.

---

49-50: 모달 내부 구조 개선이 잘 되었습니다.

패딩과 새로운 div 래퍼 추가로 레이아웃이 더 일관되고 깔끔해졌습니다. space-y-8 클래스와 함께 내부 요소들의 간격이 잘 조절되었습니다.

src/types/gathering-data.d.ts (2)

15-15: LGTM: crewId 속성이 올바르게 추가되었습니다.

모임 상세 정보에 crew 식별자를 포함하는 것이 적절합니다.

---

63-69: ⚠️ Potential issue

GatheringContentType이 정의되지 않은 문제 해결 필요

GatheringResponseType 인터페이스에서 사용하는 GatheringContentType이 정의되어 있지 않습니다. 이는 타입 오류를 발생시킬 수 있습니다.

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

 export interface GatheringResponseType {
-  content: GatheringContentType[];
+  content: LikeGatheringType[];
   pageNumber: number;
   pageSize: number;
   totalElements: number;
   totalPages: number;
 }

Likely invalid or redundant comment.

src/components/gathering-list/liked-list-presenter.tsx (1)

1-12: 인터페이스와 임포트 선언이 잘 정의되어 있습니다!

props 인터페이스가 명확하게 타입이 지정되어 있으며, 필요한 모든 의존성이 적절하게 임포트되어 있습니다.

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

41-44: 로그인 리다이렉션 로직이 적절합니다.

현재 경로를 포함한 리다이렉션 처리가 잘 구현되어 있습니다.

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

15-16: 좋아요 기능을 위한 Props 타입 정의가 적절합니다.

Promise를 반환하는 비동기 함수로 정의되어 있어 API 호출에 적합합니다.

---

30-31: Props 구조 분해가 올바르게 구현되었습니다.

컴포넌트의 매개변수로 새로운 props가 적절하게 추가되었습니다.

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

11-16: 인터페이스 변경이 잘 구현되었습니다!

좋아요 관련 기능을 위한 콜백 함수들이 명확하게 타입이 지정되어 있습니다.

[coderabbitai]

🛠️ Refactor suggestion

타입 안전성 개선이 필요합니다.

컴포넌트와 상태에 명시적인 타입 정의가 없습니다.

다음과 같이 타입을 추가하는 것을 추천드립니다:

-export default function LikedList() {
+export default function LikedList(): JSX.Element {
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState<number>(1);

📝 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 function LikedList() {
	const [page, setPage] = useState(1);
	const { data: gatheringData, isLoading, error, refetch } = useGetLikedListQuery(page);
	export default function LikedList(): JSX.Element {
	const [page, setPage] = useState<number>(1);
	const { data: gatheringData, isLoading, error, refetch } = useGetLikedListQuery(page);

[coderabbitai]

💡 Codebase verification

Toast 컴포넌트가 잘못된 방식으로 사용되고 있습니다

Toast 컴포넌트는 React 컴포넌트로 구현되어 있으나, 현재 함수처럼 호출되고 있습니다. 다음과 같이 수정이 필요합니다:

• gathering-list-section.tsx의 Toast 호출 부분을 JSX 문법으로 변경해야 합니다:

{apiError instanceof ApiError && (
  <Toast message={`찜하기에 실패했습니다: ${apiError.message}`} type="error" />
)}

• ToastContainer가 페이지에서 한 번만 렌더링되도록 상위 레이아웃 컴포넌트로 이동해야 합니다.

🔗 Analysis chain

불필요한 import 구문이 있는지 확인이 필요합니다.

Toast 컴포넌트가 실제로 사용되는 방식이 올바른지 확인해주세요. React 컴포넌트처럼 사용되고 있지만, 함수처럼 호출되고 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Toast 컴포넌트의 정의를 확인
ast-grep --pattern 'export $_ function Toast'

Length of output: 47

---

Script:

#!/bin/bash
# Toast 컴포넌트의 정의와 사용 방식을 확인
rg -A 5 "export.*Toast" 

Length of output: 1582

---

Script:

#!/bin/bash
# gathering-list-section.tsx 파일에서 Toast의 사용 방식을 확인
rg -A 3 "Toast\." src/app/\(crew\)/crew/detail/\[id\]/_components/gathering-list-section.tsx

Length of output: 92

---

Script:

#!/bin/bash
# Toast 컴포넌트 파일 찾기
fd -t f "toast" -I

Length of output: 64

---

Script:

#!/bin/bash
# gathering-list-section.tsx 파일의 전체 내용을 확인하여 Toast 사용 방식 파악
rg -l "Toast" src/app/\(crew\)/crew/detail/\[id\]/_components/gathering-list-section.tsx && cat src/app/\(crew\)/crew/detail/\[id\]/_components/gathering-list-section.tsx

Length of output: 2435

---

Script:

#!/bin/bash
# Toast 컴포넌트의 전체 구현 확인
cat src/components/common/toast/index.tsx

Length of output: 762

[coderabbitai]

🛠️ Refactor suggestion

좋아요 토글 핸들러의 개선이 필요합니다.

현재 구현에서 다음 사항들을 개선하면 좋을 것 같습니다:

1. 로딩 상태 관리가 없어 사용자 피드백이 부족합니다.
2. 비동기 작업 중 발생할 수 있는 레이스 컨디션에 취약합니다.
3. 에러 처리가 모든 케이스를 포괄적으로 다루지 않습니다.

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

+ const [isLoading, setIsLoading] = useState(false);
  const handleLikeToggle = async () => {
+   if (isLoading) return;
+   setIsLoading(true);
    try {
      if (isLiked) {
        await onUnlike(id);
-       setIsLiked(false);
+       setIsLiked(prev => !prev);
      } else {
        await onLike(id);
-       setIsLiked(true);
+       setIsLiked(prev => !prev);
      }
    } catch (error) {
+     // 원래 상태로 복구
+     setIsLiked(prev => !prev);
+     if (error instanceof Error) {
+       Toast({ message: `좋아요 업데이트 실패: ${error.message}`, type: 'error' });
+     } else {
        Toast({ message: '찜 상태를 업데이트하는 데 실패했습니다.', type: 'error' });
+     }
    } finally {
+     setIsLoading(false);
    }
  };

📝 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 handleLikeToggle = async () => {
	try {
	if (isLiked) {
	await onUnlike(id);
	setIsLiked(false);
	} else {
	await onLike(id);
	setIsLiked(true);
	}
	} catch (error) {
	Toast({ message: '찜 상태를 업데이트하는 데 실패했습니다.', type: 'error' });
	}
	const [isLoading, setIsLoading] = useState(false);
	const handleLikeToggle = async () => {
	if (isLoading) return;
	setIsLoading(true);
	try {
	if (isLiked) {
	await onUnlike(id);
	setIsLiked(prev => !prev);
	} else {
	await onLike(id);
	setIsLiked(prev => !prev);
	}
	} catch (error) {
	// 원래 상태로 복구
	setIsLiked(prev => !prev);
	if (error instanceof Error) {
	Toast({ message: `좋아요 업데이트 실패: ${error.message}`, type: 'error' });
	} else {
	Toast({ message: '찜 상태를 업데이트하는 데 실패했습니다.', type: 'error' });
	}
	} finally {
	setIsLoading(false);
	}
	};

[coderabbitai]

💡 Codebase verification

crewId 속성이 stories에만 추가되어 있고 실제 컴포넌트에서는 사용되지 않습니다

검증 결과:

• stories 파일에서만 crewId: 1 속성이 추가되어 있습니다
• container.tsx와 presenter.tsx에서 GatheringDetailType 타입을 사용하고 있지만, crewId를 실제로 사용하는 로직은 없습니다
• 좋아요 API 연동을 위해 추가된 속성이라면, 관련 기능 구현이 누락된 것으로 보입니다

🔗 Analysis chain

crewId 속성이 일관되게 추가되었습니다.

모든 스토리에 crewId: 1이 추가된 것을 확인했습니다. 이는 좋아요 API 연동을 위한 변경사항과 잘 부합합니다.

컴포넌트에서 이 속성이 올바르게 사용되는지 확인하기 위해 다음 스크립트를 실행하겠습니다:

Also applies to: 101-101, 144-144

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: GatheringDetailModalContainer 컴포넌트에서 crewId 사용 여부 확인

# container.tsx 파일에서 crewId 사용 확인
ast-grep --pattern 'interface GatheringDetailType {
  $$$
  crewId: number
  $$$
}'

# crewId를 props로 전달하는 패턴 확인
ast-grep --pattern 'function GatheringDetailModalContainer({ $$$, data }: GatheringDetailModalContainerProps) {
  $$$
  crewId
  $$$
}'

Length of output: 223

---

Script:

#!/bin/bash
# 모달 컴포넌트 파일에서 crewId 사용 패턴 검색
rg -l "crewId" "src/app/(crew)/crew/_components/gathering-detail-modal/"

# 모달 컴포넌트의 인터페이스와 타입 정의 검색
rg "interface|type.*GatheringDetail" "src/app/(crew)/crew/_components/gathering-detail-modal/" -A 5

# crewId 사용 컨텍스트 확인
rg "crewId" "src/app/(crew)/crew/_components/gathering-detail-modal/" -B 2 -A 2

Length of output: 3064

---

Script:

#!/bin/bash
# GatheringDetailType 인터페이스 정의 검색
rg "type.*GatheringDetailType" -A 10 "src/app/(crew)/crew/_components"

# 모달 컴포넌트에서 data prop의 사용 확인
rg "data: GatheringDetailType" -B 5 -A 10 "src/app/(crew)/crew/_components"

# crewId가 실제로 사용되는 로직 검색
rg "data\.crewId" "src/app/(crew)/crew/_components"

Length of output: 3085

[coderabbitai]

⚠️ Potential issue

좋아요/좋아요 취소 핸들러의 개선이 필요합니다.

현재 구현에서 다음과 같은 문제점들이 발견되었습니다:

1. 좋아요와 좋아요 취소 핸들러에 중복 코드가 존재합니다.
2. 로그인하지 않은 상태에서 Promise.resolve()를 반환하는 것은 상위 컴포넌트에서 예상치 못한 동작을 일으킬 수 있습니다.
3. 에러 처리가 누락되어 있습니다.

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

+const createAuthenticatedHandler = (
+  action: (id: number) => Promise<void>,
+  gatheringId: number,
+  showLoginModal: () => void,
+) => async () => {
+  if (!isLoggedIn) {
+    showLoginModal();
+    return;
+  }
+  
+  try {
+    await action(gatheringId);
+  } catch (error) {
+    console.error('Failed to process action:', error);
+    // 에러 처리 로직 추가 필요
+  }
+};

 <GatheringCard
   crewId={crewId}
   {...card}
   className="w-full"
-  onLike={() => {
-    if (isLoggedIn) {
-      return onLike(card.id);
-    }
-    onShowLoginModal();
-    return Promise.resolve();
-  }}
-  onUnlike={() => {
-    if (isLoggedIn) {
-      return onUnlike(card.id);
-    }
-    onShowLoginModal();
-    return Promise.resolve();
-  }}
+  onLike={createAuthenticatedHandler(onLike, card.id, onShowLoginModal)}
+  onUnlike={createAuthenticatedHandler(onUnlike, card.id, onShowLoginModal)}
 />

📝 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

	<GatheringCard
	crewId={crewId}
	{...card}
	className="w-full"
	onLike={() => {
	if (isLoggedIn) {
	return onLike(card.id);
	}
	onShowLoginModal(); // 로그인이 안 되어 있으면 모달 표시
	return Promise.resolve();
	}}
	onUnlike={() => {
	if (isLoggedIn) {
	return onUnlike(card.id);
	}
	onShowLoginModal(); // 로그인이 안 되어 있으면 모달 표시
	return Promise.resolve();
	}}
	/>
	<GatheringCard
	crewId={crewId}
	{...card}
	className="w-full"
	onLike={createAuthenticatedHandler(onLike, card.id, onShowLoginModal)}
	onUnlike={createAuthenticatedHandler(onUnlike, card.id, onShowLoginModal)}
	/>

[minkyung5x5]

좋아요 기능이 되다니!! 수고하셨습니다-!!

[github-actions]

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

[coderabbitai]

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (6)

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

41-44: window.location 대신 Next.js의 기능을 활용해주세요

현재 구현은 클라이언트 사이드 API를 직접 사용하고 있습니다. Next.js의 기능을 활용하여 더 깔끔하게 구현할 수 있습니다.

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

  const handleLoginRedirect = () => {
-   const currentPath = window.location.href;
+   const currentPath = window.location.pathname + window.location.search;
    router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
  };

---

21-44: 이벤트 핸들러 최적화가 필요합니다

이벤트 핸들러들이 매 렌더링마다 재생성되고 있습니다. useCallback을 사용하여 성능을 최적화할 수 있습니다.

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

const handleLike = useCallback(async (gatheringId: number) => {
  try {
    await addLike(gatheringId);
  } catch (apiError) {
    if (apiError instanceof ApiError) {
      Toast({ message: `찜하기에 실패했습니다: ${apiError.message}`, type: 'error' });
    }
  }
}, []);

const handleUnlike = useCallback(async (gatheringId: number) => {
  try {
    await removeLike(gatheringId);
  } catch (apiError) {
    if (apiError instanceof ApiError) {
      Toast({ message: `찜하기 해제에 실패했습니다: ${apiError.message}`, type: 'error' });
    }
  }
}, []);

const handleLoginRedirect = useCallback(() => {
  const currentPath = window.location.pathname + window.location.search;
  router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
}, [router]);

---

53-59: GatheringCardCarousel의 prop 타입을 명시해주세요

컴포넌트에 전달되는 prop들의 타입이 명시되어 있지 않습니다. 타입 안정성을 위해 prop 타입을 정의하는 것이 좋습니다.

GatheringCardCarousel 컴포넌트에 다음과 같이 prop 타입을 정의해주세요:

interface GatheringCardCarouselProps {
  gatheringData: GatheringData[];
  crewId: number;
  onLike: (gatheringId: number) => Promise<void>;
  onUnlike: (gatheringId: number) => Promise<void>;
  onShowLoginModal: () => void;
}

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

11-16: 인터페이스 문서화 개선 필요

각 프로퍼티의 목적과 사용법을 명확히 하기 위해 JSDoc 문서화를 추가하는 것이 좋겠습니다.

다음과 같이 문서화를 추가해보세요:

 interface GatheringCardCarouselProps {
   gatheringData: GatheringType[];
   crewId: number;
+  /** 모임 좋아요 처리 함수 */
   onLike: (gatheringId: number) => Promise<void>;
+  /** 모임 좋아요 취소 처리 함수 */
   onUnlike: (gatheringId: number) => Promise<void>;
+  /** 로그인 모달을 표시하는 함수 */
   onShowLoginModal: () => void;
 }

---

30-32: 로그인 상태 확인 로직 개선 제안

현재 구현은 정확하지만, 더 명시적으로 작성할 수 있습니다.

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

- // 로그인 여부 확인
- const token = useAuthStore((state) => state.token);
- const isLoggedIn = !!token;
+ const token = useAuthStore((state) => state.token);
+ const isLoggedIn = Boolean(token);

---

97-103: GatheringCard 컴포넌트 props 전달 방식 개선

현재 구현은 정확하지만, 더 간결하게 작성할 수 있습니다.

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

 <GatheringCard
   crewId={crewId}
   {...card}
   className="w-full"
-  onLike={() => handleLikeAction('like', card.id)}
-  onUnlike={() => handleLikeAction('unlike', card.id)}
+  onLike={handleLikeAction.bind(null, 'like', card.id)}
+  onUnlike={handleLikeAction.bind(null, 'unlike', card.id)}
 />

이렇게 하면:

1. 불필요한 화살표 함수 생성을 방지할 수 있습니다
2. 메모리 사용량이 개선됩니다
3. 컴포넌트 리렌더링 성능이 향상될 수 있습니다

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 84a8539 and 9e1b752.

📒 Files selected for processing (3)

• src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (2 hunks)
• src/components/common/gathering-card/container.tsx (3 hunks)
• src/components/gathering-list/gathering-card-carousel.tsx (4 hunks)

🔇 Additional comments (4)

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

26-26: Toast 컴포넌트 사용 방식이 올바르지 않습니다

이전 리뷰에서 지적된 Toast 컴포넌트 사용 방식 문제가 아직 해결되지 않았습니다. Toast는 React 컴포넌트이므로 JSX 문법으로 사용되어야 합니다.

Also applies to: 36-36

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

15-16: Props 인터페이스가 잘 정의되어 있습니다! 👍

비동기 작업을 위한 Promise 타입과 함께 좋아요/좋아요 취소 핸들러가 명확하게 정의되어 있습니다.

---

48-60: 이전 리뷰 코멘트가 아직 해결되지 않았습니다.

로딩 상태 관리, 레이스 컨디션 방지, 그리고 더 나은 에러 처리에 대한 이전 리뷰 코멘트의 제안사항들이 아직 반영되지 않았습니다.

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

73-79: 이전 리뷰 의견이 아직 반영되지 않았습니다

이전 리뷰에서 제안된 개선사항들이 여전히 유효합니다:

1. 에러 처리가 누락되어 있습니다
2. Promise.resolve() 반환은 잠재적 문제를 야기할 수 있습니다

[coderabbitai]

🛠️ Refactor suggestion

로딩 및 에러 상태 처리를 개선해주세요

현재 구현은 기본적인 텍스트만 표시하고 있습니다. 사용자 경험을 향상시키기 위해 더 나은 UI 컴포넌트를 사용하는 것이 좋습니다.

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

1. 로딩 상태: Skeleton UI 또는 로딩 스피너 사용
2. 에러 상태: 에러 메시지와 함께 재시도 버튼 추가
3. 데이터 없음 상태: 적절한 안내 메시지와 함께 시각적 피드백 제공

if (isLoading) return <LoadingSpinner />;
if (error) return (
  <ErrorState 
    message="데이터를 불러오는 데 실패했습니다" 
    onRetry={() => refetch()} 
  />
);
if (!gatheringList || gatheringList.length === 0) return (
  <EmptyState message="아직 등록된 모임이 없습니다" />
);

[github-actions]

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

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (7)

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

14-26: Toast 설정이 적절해 보입니다만, 접근성 개선이 필요합니다

Toast 알림의 기본 설정은 적절하나, 스크린 리더 사용자를 위한 접근성 속성이 누락되었습니다.

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

      <ToastContainer
        position="bottom-right"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
        transition={Bounce}
+       role="alert"
+       aria-live="polite"
      />

추가적으로, 알림이 표시되는 시간(3초)이 긴 메시지를 읽기에는 짧을 수 있습니다. 메시지 길이에 따라 동적으로 시간을 조절하는 것을 고려해보세요.

src/app/(crew)/crew/_components/gathering-detail-modal/container.tsx (3)

26-28: toast 설정을 개선하여 사용자 경험을 향상시킬 수 있습니다.

현재 구현은 작동하지만, 더 나은 사용자 경험을 위해 추가 설정을 고려해보세요.

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

-    toast(message, { type });
+    toast(message, {
+      type,
+      position: "bottom-right",
+      autoClose: 3000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+    });

---

Line range hint 30-67: 에러 메시지를 더 구체적으로 개선할 수 있습니다.

현재 에러 처리는 잘 구현되어 있지만, 사용자에게 더 명확한 정보를 제공할 수 있습니다.

다음과 같이 에러 메시지를 구체화하는 것을 제안합니다:

-        showToast(`참여 중 에러 발생: ${error.message}`, 'error');
+        const errorMessage = error.status === 403
+          ? '참여 권한이 없습니다. 크루 멤버만 참여할 수 있습니다.'
+          : `참여할 수 없습니다: ${error.message}`;
+        showToast(errorMessage, 'error');

---

Line range hint 17-17: 테스트 구현이 필요합니다.

현재 TODO 주석에 명시된 대로 로그인 토큰 관련 테스트가 누락되어 있습니다. 테스트 구현을 통해 컴포넌트의 안정성을 보장해야 합니다.

테스트 코드 작성을 도와드릴까요? 다음과 같은 테스트 케이스를 제안할 수 있습니다:

• 모달 열기/닫기 테스트
• 약속 참여/취소 기능 테스트
• 에러 처리 테스트
• 토스트 메시지 표시 테스트

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

21-39: 좋아요 상태 관리 개선이 필요합니다

현재 구현에서는 API 호출 중인 상태를 사용자에게 표시하지 않고 있습니다. 사용자 경험 향상을 위해 로딩 상태 관리가 필요합니다.

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

+ const [isLikeLoading, setIsLikeLoading] = useState<number | null>(null);

  const handleLike = async (gatheringId: number) => {
+   setIsLikeLoading(gatheringId);
    try {
      await addLike(gatheringId);
    } catch (apiError) {
      if (apiError instanceof ApiError) {
        toast.error(`찜하기에 실패했습니다: ${apiError.message}`);
      }
+   } finally {
+     setIsLikeLoading(null);
    }
  };

이 로딩 상태를 GatheringCardCarousel에 전달하여 좋아요 버튼의 로딩 상태를 표시할 수 있습니다.

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

72-78: 에러 메시지의 국제화(i18n) 적용을 고려해주세요.

현재 에러 메시지가 한글로 하드코딩되어 있습니다. 추후 다국어 지원을 위해 i18n 시스템을 도입하는 것이 좋겠습니다.

예시 구현:

- toast.error('모임 정보를 찾을 수 없습니다.');
+ toast.error(t('errors.gathering.not_found'));

- toast.error('데이터 통신에 실패했습니다.');
+ toast.error(t('errors.common.communication_failed'));

---

Line range hint 1-108: 컴포넌트 로직 분리를 통한 구조 개선을 제안드립니다.

현재 컴포넌트가 다음과 같은 여러 책임을 가지고 있습니다:

1. 좋아요 상태 관리
2. 모달 상태 관리
3. 날짜 관련 로직
4. API 에러 처리

이를 다음과 같이 분리하면 유지보수성이 향상될 것 같습니다:

// hooks/useLikeToggle.ts
const useLikeToggle = (id: number, initialState: boolean) => {
  const [isLiked, setIsLiked] = useState(initialState);
  const [isLoading, setIsLoading] = useState(false);

  const toggleLike = async (onLike: Function, onUnlike: Function) => {
    // 좋아요 로직 구현
  };

  return { isLiked, isLoading, toggleLike };
};

// hooks/useGatheringDate.ts
const useGatheringDate = (dateTime: string) => {
  // 날짜 관련 로직 구현
};

// hooks/useGatheringError.ts
const useGatheringError = (error: Error | null) => {
  // 에러 처리 로직 구현
};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 9e1b752 and 4317a4c.

📒 Files selected for processing (5)

• src/app/(crew)/crew/_components/gathering-detail-modal/container.tsx (2 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (2 hunks)
• src/app/(crew)/layout.tsx (2 hunks)
• src/components/common/gathering-card/container.tsx (4 hunks)
• src/components/gathering-list/liked-list-container.tsx (1 hunks)

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

• src/components/gathering-list/liked-list-container.tsx

🔇 Additional comments (6)

src/app/(crew)/crew/_components/gathering-detail-modal/container.tsx (1)

3-3: react-toastify 라이브러리 import가 적절히 추가되었습니다.

코드베이스의 일관성을 위해 toast 알림 시스템이 잘 통합되었습니다.

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

4-4: Toast 구현 방식 개선이 필요합니다

현재 toast.error()를 직접 호출하는 방식은 이전 리뷰에서 지적된 문제와 유사합니다. Toast 컴포넌트를 React 컴포넌트로 적절하게 사용하도록 수정이 필요합니다.

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

- toast.error(`찜하기에 실패했습니다: ${apiError.message}`);
+ {apiError instanceof ApiError && (
+   <Toast message={`찜하기에 실패했습니다: ${apiError.message}`} type="error" />
+ )}

Also applies to: 25-27, 35-37

---

46-48: 로딩 및 에러 상태 UI 개선이 필요합니다

이전 리뷰에서 지적된 대로, 현재 구현은 기본적인 텍스트만 표시하고 있습니다. 사용자 경험 향상을 위해 더 나은 UI 컴포넌트 사용이 필요합니다.

---

53-59: Props 타입 검증이 필요합니다

GatheringCardCarousel 컴포넌트에 전달되는 props의 타입 안전성을 확인해주세요. 특히 새로 추가된 onLike, onUnlike, onShowLoginModal props의 타입이 컴포넌트의 인터페이스와 일치하는지 확인이 필요합니다.

✅ Verification successful

Props 타입이 올바르게 정의되어 있습니다

GatheringCardCarousel 컴포넌트의 props 타입이 인터페이스에 명확하게 정의되어 있으며, 전달되는 모든 props(onLike, onUnlike, onShowLoginModal)가 타입 정의와 일치합니다:

• onLike: (gatheringId: number) => Promise<void>
• onUnlike: (gatheringId: number) => Promise<void>
• onShowLoginModal: () => void

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# GatheringCardCarousel 컴포넌트의 props 타입 정의 확인
ast-grep --pattern 'interface $_ {
  $$$
  onLike?: $_
  onUnlike?: $_
  onShowLoginModal?: $_
  $$$
}'

Length of output: 105

---

Script:

#!/bin/bash
# Search for GatheringCardCarousel component definition and its props
ast-grep --pattern 'type GatheringCardCarouselProps = {
  $$$
}'

# Also try interface pattern
ast-grep --pattern 'interface GatheringCardCarouselProps {
  $$$
}'

# Search for the component definition
ast-grep --pattern 'const GatheringCardCarousel = ({ $$ }: $_) => {
  $$$
}'

# Find the file containing GatheringCardCarousel
fd GatheringCardCarousel

Length of output: 896

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

15-16: 인터페이스 정의가 명확하고 적절합니다.

Promise를 반환하는 비동기 함수로 타입이 잘 정의되어 있습니다.

---

48-60: 이전 리뷰 의견을 반영한 개선이 필요합니다.

이전 리뷰에서 제안된 로딩 상태 관리와 에러 처리 개선이 아직 반영되지 않았습니다. 해당 개선사항들을 적용하시면 좋겠습니다.

[coderabbitai]

⚠️ Potential issue

스타일 import 순서 개선이 필요합니다

react-toastify의 스타일 파일이 import되지 않았습니다. Toast 컴포넌트가 올바르게 스타일링되려면 CSS import가 필요합니다.

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

import { Bounce, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
import '@mantine/core/styles.css';

📝 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

	import { Bounce, ToastContainer } from 'react-toastify';
	import { Bounce, ToastContainer } from 'react-toastify';
	import 'react-toastify/dist/ReactToastify.css';

[coderabbitai]

⚠️ Potential issue

URL 인코딩 보안 강화가 필요합니다

현재 구현에서는 window.location.href를 직접 사용하고 있어 잠재적인 보안 위험이 있을 수 있습니다. URL 파라미터의 적절한 검증과 정제가 필요합니다.

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

  const handleLoginRedirect = () => {
-   const currentPath = window.location.href;
+   const currentPath = window.location.pathname + window.location.search;
+   const sanitizedPath = currentPath.replace(/[^\w\-\.\~\/\?\[\]\@\!\$\&\'\(\)\*\+\,\;\=]/g, '');
-   router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
+   router.push(`/login?redirect=${encodeURIComponent(sanitizedPath)}`);
  };

📝 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 handleLoginRedirect = () => {
	const currentPath = window.location.href;
	router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
	};
	const handleLoginRedirect = () => {
	const currentPath = window.location.pathname + window.location.search;
	const sanitizedPath = currentPath.replace(/[^\w\-\.\~\/\?\[\]\@\!\$\&\'\(\)\*\+\,\;\=]/g, '');
	router.push(`/login?redirect=${encodeURIComponent(sanitizedPath)}`);
	};

[github-actions]

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

[coderabbitai]

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)

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

53-59: Props 타입 정의 필요

GatheringCardCarousel 컴포넌트에 전달되는 props의 타입이 명시적으로 정의되어 있지 않습니다.

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

interface GatheringCardCarouselProps {
  gatheringData: GatheringData[];
  crewId: number;
  onLike: (gatheringId: number) => Promise<void>;
  onUnlike: (gatheringId: number) => Promise<void>;
  onShowLoginModal: () => void;
}

---

60-68: 모달 상태 관리 개선 필요

모달의 opened prop이 showLoginModal state와 중복되어 있습니다.

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

  {showLoginModal && (
    <ConfirmModal
-     opened={showLoginModal}
      onClose={() => setShowLoginModal(false)}
      onConfirm={handleLoginRedirect}
    >
      로그인이 필요합니다!
    </ConfirmModal>
  )}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 4317a4c and e82ff4c.

📒 Files selected for processing (2)

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

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

• src/app/(crew)/layout.tsx

🔇 Additional comments (3)

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

4-4: toast 컴포넌트 사용 방식 개선 필요

이전 리뷰 코멘트에서 지적된 것처럼, toast 컴포넌트가 함수형태로 호출되고 있습니다. React 컴포넌트로 적절히 렌더링되도록 수정이 필요합니다.

---

41-44: 로그인 리다이렉트 로직 보안 강화 필요

현재 구현에서 URL 파라미터에 대한 적절한 검증이 누락되어 있습니다.

---

46-48: 로딩 및 에러 상태 UI 개선 필요

현재 단순 텍스트로 표시되는 로딩 및 에러 상태를 사용자 경험을 고려한 UI 컴포넌트로 개선해야 합니다.

[coderabbitai]

🛠️ Refactor suggestion

에러 처리 로직 개선 필요

에러 처리 로직이 handleLike와 handleUnlike에서 중복되어 있습니다. 또한 일반적인 에러 상황에 대한 처리가 누락되어 있습니다.

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

+ const handleApiError = (action: string, error: unknown) => {
+   if (error instanceof ApiError) {
+     toast.error(`${action}에 실패했습니다: ${error.message}`);
+   } else {
+     toast.error(`${action} 중 예상치 못한 오류가 발생했습니다`);
+     console.error(error);
+   }
+ };

  const handleLike = async (gatheringId: number) => {
    try {
      await addLike(gatheringId);
    } catch (error) {
-     if (apiError instanceof ApiError) {
-       toast.error(`찜하기에 실패했습니다: ${apiError.message}`);
-     }
+     handleApiError('찜하기', error);
    }
  };

  const handleUnlike = async (gatheringId: number) => {
    try {
      await removeLike(gatheringId);
    } catch (error) {
-     if (apiError instanceof ApiError) {
-       toast.error(`찜하기 해제에 실패했습니다: ${apiError.message}`);
-     }
+     handleApiError('찜하기 해제', error);
    }
  };

Also applies to: 31-39