Fix/146/gathering detail

[HaeJungg]

🔖 Issue Ticket

#146

✍️ Description

• 약속 상세보기 패치 수정
• 약속 카드 디자인 수정
• 개설 확정을 모집 완료로 변경

✅ Checklist

PR

• Branch Convention 확인

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

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

Test

• 로컬 작동 확인

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • GatheringDetailModalContainer에 업데이트 후 콜백 기능 추가.
  • GatheringCard와 CrewGatheringList에 모달 작업 기능 추가.
  • CreateGathering 컴포넌트에서 모임 수를 실시간으로 표시.
  • DetailCrewPresenter에 크루 멤버 확인 상태 추가.
  • CreateCrewForm에서 필드 레이블 및 유효성 검사 메시지 변경.
  • GatheringListSection에서 데이터 새로 고침 기능 추가.
  • LikedList 컴포넌트에서 로딩 상태에 로더 컴포넌트 추가.

• 버그 수정

  • 로딩 상태에서 사용자 경험 개선을 위해 로더 컴포넌트 추가.

• UI 개선

  • 여러 컴포넌트의 텍스트 및 레이아웃 수정으로 사용자 인터페이스 향상.
  • 크루 최대 인원 및 모집 완료 상태에 대한 텍스트 변경.
  • GatheringCard의 레이아웃 및 스타일 조정.
  • 크루 상세 페이지에서 불필요한 헤더 제거로 레이아웃 단순화.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

이번 변경 사항은 여러 컴포넌트에서 쿼리 훅과 상태 관리 로직을 수정하여 UI와 데이터 처리 방식을 개선하는 데 중점을 두었습니다. useGetGatheringDetailQuery 함수에 선택적 옵션 매개변수를 추가하고, CreateCrewForm 및 CreateGathering 컴포넌트의 텍스트와 상태 관리를 조정했습니다. 또한, 여러 컴포넌트에서 로딩 상태를 개선하고, 새로운 프로퍼티를 추가하여 부모 컴포넌트와의 상호작용을 강화했습니다.

Changes

파일 경로	변경 요약
src/_queries/gathering/gathering-detail-queries.ts	useGetGatheringDetailQuery 함수에 선택적 options 매개변수 추가, enabled 속성 포함.
src/app/(crew)/crew/create/_components/create-crew-form/index.tsx	totalCount 필드의 레이블 및 유효성 검사 메시지 수정, useEffect 후크 조정, 초기값 설정 로직 캡슐화, 카테고리 및 위치 변경 시 오류 클리어 로직 수정.
src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx	useGetCrewDetailQuery 및 useGetGatheringListQuery 훅 추가, gatheringList 데이터 추출 및 총 모임 수 계산.
src/app/(crew)/crew/detail/[id]/_components/detail-crew-container.tsx	isConfirmed 상태 변수 추가, 로딩 상태 처리 개선, 에러 핸들링 개선, DetailCrewPresenter에 isConfirmed prop 추가.
src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx	DetailCrewPresenterProps 인터페이스에 isConfirmed 속성 추가, 버튼 비활성화 및 텍스트 수정.
src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/container.tsx	GatheringDetailModalContainerProps 인터페이스에 onUpdate 속성 추가, 여러 비동기 작업 후 호출.
src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx	useGetGatheringListQuery 훅에 refetch 함수 추가, 로딩 상태 처리 개선, CrewGatheringList에 onModalAction prop 추가.
src/app/(crew)/crew/detail/[id]/page.tsx	CreateGathering 컴포넌트의 헤더 섹션 제거.
src/components/common/crew-list/crew-card-list.tsx	isConfirmed 속성 계산 로직 리팩토링, MainCrewList 항목에 대해서만 확인 상태 계산.
src/components/common/crew-list/crew-card.tsx	크루 확인 상태 텍스트를 "개설 확정"에서 "모집 완료"로 변경.
src/components/common/gathering-card/container.tsx	GatheringCardContainerProps 인터페이스에 onModalAction 속성 추가, useGetGatheringDetailQuery 호출 시 enabled: false 설정.
src/components/common/gathering-card/presenter.tsx	레이아웃 및 스타일 수정, 요소 간 간격 조정.
src/components/gathering-list/crew-gathering-list.tsx	CrewGatheringListProps 인터페이스에 onModalAction 속성 추가.
src/components/gathering-list/liked-list-container.tsx	로딩 상태 처리 개선, 로딩 시 <Loader /> 컴포넌트 사용.
src/components/gathering-list/liked-list-presenter.tsx	그리드 컨테이너의 최소 높이 조정.
src/types/crew-card.d.ts	CrewDetail 인터페이스에서 confirmed 속성 제거.
src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx	DetailCrewPresenter의 스토리에서 confirmed 속성 제거.
src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx	GatheringDetailModalContainer 스토리에 handleUpdate 함수 추가, onUpdate prop 연결.

Possibly related PRs

• Feat/111/gathering api #120: useGetGatheringDetailQuery 함수 수정이 CreateGathering 컴포넌트와 연결되어 있습니다.
• Feat/132/create edit gathering api 연결 #133: createGathering 함수 및 useCreateGatheringQuery 훅 추가가 관련됩니다.
• Feat/139/gathering card UI - 모달 API 연결 #141: GatheringListSection 컴포넌트 업데이트가 관련되어 있습니다.
• Feat/132/create edit gathering api : popOverCalendar, 약속만들기 시간선택 동작 개선 #142: CalendarFilter 컴포넌트의 변경 사항이 관련되어 있습니다.
• Feat: 스켈레톤 컴포넌트 추가 #148: 새로운 스켈레톤 컴포넌트 도입이 다양한 페이지에서 로딩 상태를 개선하는 것과 관련이 있습니다.

Suggested reviewers

• yulrang
• minkyung5x5
• Rangbyeolang

🐰 새로운 기능이 추가되었네,
크루와 모임이 더욱 빛나네!
정보가 쏙쏙, UI도 반짝,
모두 함께 즐길 수 있기를!
변화의 바람이 불어오니,
우리의 모임이 더 풍성해지길! 🌟

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/components/common/crew-list/crew-card-list.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.

[yulrang]

고생 많으셨습니다!!!! 화이팅

[github-actions]

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

[coderabbitai]

Actionable comments posted: 6

🧹 Outside diff range and nitpick comments (19)

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

6-14: JSDoc 문서화 추가를 제안드립니다.

함수의 사용 방법과 파라미터에 대한 설명을 JSDoc으로 추가하면 개발자 경험이 향상될 것 같습니다.

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

+/**
+ * 모임 상세 정보를 조회하는 쿼리 훅
+ * @param crewId 크루 ID
+ * @param gatheringId 모임 ID
+ * @param options React Query 옵션 (enabled 플래그로 자동 실행 제어 가능)
+ * @returns 모임 상세 정보 쿼리 결과
+ */
export function useGetGatheringDetailQuery(
  crewId: number,
  gatheringId: number,
  options?: { enabled?: boolean },
) {

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

41-41: 로딩 상태 UI 개선 제안

Loader 컴포넌트가 화면 중앙에 위치하도록 스타일링을 추가하면 사용자 경험이 더욱 향상될 것 같습니다.

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

-  if (isLoading) return <Loader />;
+  if (isLoading) return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '200px' }}>
+      <Loader />
+    </div>
+  );

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

35-35: 상태 업데이트 시점이 적절합니다만, 에러 처리를 개선할 수 있습니다.

각 작업(참여, 탈퇴, 삭제) 완료 후 onUpdate 호출이 적절하게 배치되었습니다. 하지만 에러 발생 시에도 부모 컴포넌트에 알림이 필요할 수 있습니다.

다음과 같이 에러 처리를 개선하는 것을 고려해보세요:

  } catch (error) {
    if (error instanceof ApiError) {
      showToast(`참여 중 에러 발생: ${error.message}`, 'error');
+      onUpdate(); // 에러 상태도 부모에게 전달
    }
  }

Also applies to: 47-47, 60-60

---

Line range hint 1-77: 비동기 작업의 로딩 상태 처리가 필요합니다.

현재 비동기 작업 실행 중에 사용자에게 로딩 상태를 표시하지 않고 있습니다. 이는 사용자 경험을 저하시킬 수 있습니다.

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

export default function GatheringDetailModalContainer({
  opened,
  close,
  data,
  onUpdate,
}: GatheringDetailModalContainerProps) {
+ const [isLoading, setIsLoading] = useState(false);

  const handleJoin = async () => {
+   setIsLoading(true);
    try {
      await JoinGathering(data.crewId, data.id);
      showToast('약속에 참여했습니다.', 'success');
      close();
      onUpdate();
    } catch (error) {
      if (error instanceof ApiError) {
        showToast(`참여 중 에러 발생: ${error.message}`, 'error');
      }
+   } finally {
+     setIsLoading(false);
    }
  };

  return (
    <GatheringDetailModalPresenter
      data={data}
      opened={opened}
      onClose={close}
      onJoin={handleJoin}
      onExit={handleExit}
      onDelete={handleDelete}
+     isLoading={isLoading}
    />
  );
}

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

41-47: 접근성 개선이 필요합니다.

레이아웃 구조는 잘 되어있으나, 접근성 측면에서 다음과 같은 개선이 필요합니다:

- <h2 className="text-2xl font-semibold text-gray-800">약속 잡기</h2>
+ <h2 className="text-2xl font-semibold text-gray-800" role="heading" aria-level="2">약속 잡기</h2>
- <span className="text-base font-semibold text-blue-500">
+ <span className="text-base font-semibold text-blue-500" aria-live="polite">

또한 색상 대비를 위해 다음 사항도 고려해보세요:

• 텍스트 색상의 대비율 검토 (특히 파란색 텍스트)
• 다크 모드 지원 고려

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

47-49: 모달 액션 핸들러 구현에 대한 제안

현재 구현은 간단하지만, 에러 처리를 추가하면 더 견고해질 수 있습니다.

다음과 같이 에러 처리를 추가하는 것을 고려해보세요:

 const handleModalAction = () => {
-  refetch();
+  try {
+    refetch();
+  } catch (error) {
+    toast.error('데이터 갱신 중 오류가 발생했습니다.');
+  }
 };

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

53-57: 이미지 URL 상수화가 필요합니다

하드코딩된 이미지 URL을 상수로 분리하여 관리하면 유지보수성이 향상됩니다.

+const DEFAULT_IMAGE_URL = 'https://media.istockphoto.com/id/1396814518/vector/image-coming-soon-no-photo-no-thumbnail-image-available-vector-illustration.jpg?s=612x612&w=0&k=20&c=hnh2OZgQGhf0b46-J2z7aHbIWwq8HNlSDaNp2wn_iko=';
+
 imageUrl={
   inform?.imageUrl === 'string'
-    ? 'https://media.istockphoto.com/id/1396814518/vector/image-coming-soon-no-photo-no-thumbnail-image-available-vector-illustration.jpg?s=612x612&w=0&k=20&c=hnh2OZgQGhf0b46-J2z7aHbIWwq8HNlSDaNp2wn_iko='
+    ? DEFAULT_IMAGE_URL
     : inform?.imageUrl
 }

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

17-17: 콜백 함수의 용도를 문서화해주세요.

onModalAction 콜백의 구체적인 호출 시점과 목적을 주석으로 설명하면 컴포넌트의 사용성이 향상될 것 같습니다.

interface GatheringCardContainerProps extends GatheringType {
+ // 모달 내의 데이터가 업데이트될 때 호출되는 콜백
  onModalAction: () => void;
}

---

57-61: 모달 열기 전에 에러 처리를 추가하면 좋을 것 같습니다.

데이터 fetching이 실패할 경우를 대비한 에러 처리를 추가하면 사용자 경험이 향상될 것 같습니다.

  const openModal = async () => {
+   try {
-     refetch();
+     await refetch();
      open();
+   } catch (error) {
+     toast.error('상세 정보를 불러오는데 실패했습니다.');
+   }
  };

---

73-74: 에러 메시지를 더 구체적으로 개선하면 좋을 것 같습니다.

현재는 일반적인 에러 메시지만 표시되고 있습니다. 좋아요/취소 각각의 경우에 대해 더 구체적인 메시지를 제공하면 사용자가 무엇이 잘못되었는지 더 잘 이해할 수 있을 것 같습니다.

    } catch (likeError) {
-     toast.error('찜 상태를 업데이트하는 데 실패했습니다.');
+     toast.error(isLiked 
+       ? '찜하기 취소에 실패했습니다. 잠시 후 다시 시도해주세요.' 
+       : '찜하기에 실패했습니다. 잠시 후 다시 시도해주세요.'
+     );
    }

---

78-82: 에러 처리를 더 상세하게 개선하면 좋을 것 같습니다.

현재의 에러 메시지는 너무 일반적입니다. API 에러의 종류에 따라 다른 메시지를 표시하고, 가능한 해결 방법을 제시하면 좋을 것 같습니다.

  useEffect(() => {
    if (error) {
-     toast.error('데이터를 가져오는 데 실패했습니다.');
+     if (error instanceof ApiError) {
+       switch (error.status) {
+         case 404:
+           toast.error('모임을 찾을 수 없습니다. 새로고침 후 다시 시도해주세요.');
+           break;
+         case 403:
+           toast.error('접근 권한이 없습니다. 로그인 후 다시 시도해주세요.');
+           break;
+         default:
+           toast.error('일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+       }
+     }
    }
  }, [error]);

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

86-86: 상태 텍스트 변경이 적절히 구현되었습니다!

"개설 확정"에서 "모집 완료"로의 텍스트 변경이 PR의 목적과 일관되게 잘 구현되었습니다. 이는 사용자에게 더 명확한 상태를 전달할 수 있을 것으로 보입니다.

다음과 같은 개선을 고려해보시면 좋을 것 같습니다:

-                  <span className="text-sm font-medium"> 모집 완료</span>
+                  <span className="text-sm font-medium">모집 완료</span>

텍스트 앞의 불필요한 공백을 제거하여 다른 텍스트 스타일링과 일관성을 유지하는 것이 좋겠습니다.

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

75-75: CSS 변수 사용을 고려해보세요

현재 하드코딩된 min-height 값을 CSS 변수로 관리하면 일관성 있는 유지보수가 가능할 것 같습니다.

+/* styles/variables.css에 추가 */
+:root {
+  --gathering-card-content-height: 220px;
+}

-<div className="flex min-h-[220px] flex-col justify-between p-4">
+<div className="flex min-h-[var(--gathering-card-content-height)] flex-col justify-between p-4">

---

86-93: 접근성 개선을 위한 제안

텍스트가 잘릴 때 사용자가 전체 내용을 확인할 수 있도록 title 속성을 추가하는 것이 좋겠습니다.

-<h3 className="overflow-hidden text-ellipsis whitespace-nowrap pt-1 text-xl font-semibold text-gray-800">
+<h3 
+  className="overflow-hidden text-ellipsis whitespace-nowrap pt-1 text-xl font-semibold text-gray-800"
+  title={title}
+>
   {title}
 </h3>

src/app/(crew)/crew/detail/[id]/_components/detail-crew-container.tsx (2)

Line range hint 122-134: 에러 처리 방식을 개선해 주세요.

현재 에러 처리에 몇 가지 개선이 필요합니다:

1. 에러 메시지가 사용자 친화적이지 않습니다.
2. 에러 상황별 구체적인 안내가 부족합니다.
3. TODO 주석이 있지만 구체적인 개선 방향이 명시되어 있지 않습니다.

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

  if (fetchError) {
    if (fetchError instanceof ApiError) {
      try {
        const errorData = JSON.parse(fetchError.message);

        if (errorData.status === 'NOT_FOUND') {
-         return <p>크루 정보를 찾을 수 없습니다</p>;
+         return (
+           <div className="text-center py-8">
+             <p className="text-lg font-medium text-gray-800">
+               크루를 찾을 수 없습니다 😢
+             </p>
+             <p className="text-sm text-gray-600 mt-2">
+               삭제되었거나 잘못된 접근입니다.
+             </p>
+           </div>
+         );
        }
      } catch (parseError) {
-       return <p>{`Error ${fetchError.message}`}</p>;
+       return (
+         <div className="text-center py-8">
+           <p className="text-lg font-medium text-gray-800">
+             일시적인 오류가 발생했습니다 😅
+           </p>
+           <p className="text-sm text-gray-600 mt-2">
+             잠시 후 다시 시도해 주세요.
+           </p>
+         </div>
+       );
      }
    }
-   return <p>데이터 통신에 실패했습니다.</p>;
+   return (
+     <div className="text-center py-8">
+       <p className="text-lg font-medium text-gray-800">
+         네트워크 오류가 발생했습니다 🌐
+       </p>
+       <p className="text-sm text-gray-600 mt-2">
+         인터넷 연결을 확인해 주세요.
+       </p>
+     </div>
+   );
  }

---

119-119: 로딩 상태의 UI를 개선해 주세요.

현재 Loader 컴포넌트가 스타일링 없이 사용되고 있습니다. 사용자 경험을 위해 중앙 정렬과 여백을 추가하는 것이 좋겠습니다.

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

- return <Loader />;
+ return (
+   <div className="flex justify-center items-center min-h-[200px]">
+     <Loader size="lg" />
+   </div>
+ );

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

158-158: 코드 중복을 줄일 수 있는 기회가 있습니다.

데스크톱과 모바일 뷰에서 GatheringCard에 전달되는 props가 동일합니다. 다음과 같이 공통 props를 추출하여 코드 중복을 줄이는 것을 고려해보세요:

+ const commonCardProps = {
+   crewId,
+   onLike: (gatheringId: number) => handleLikeAction('like', gatheringId),
+   onUnlike: (gatheringId: number) => handleLikeAction('unlike', gatheringId),
+   onModalAction,
+ };

// 데스크톱 뷰
- <GatheringCard
-   crewId={crewId}
-   {...card}
-   className="w-full"
-   onLike={() => handleLikeAction('like', card.id)}
-   onUnlike={() => handleLikeAction('unlike', card.id)}
-   onModalAction={onModalAction}
- />
+ <GatheringCard
+   {...commonCardProps}
+   {...card}
+   className="w-full"
+ />

// 모바일 뷰
- <GatheringCard
-   crewId={crewId}
-   {...card}
-   className="w-full"
-   onLike={() => handleLikeAction('like', card.id)}
-   onUnlike={() => handleLikeAction('unlike', card.id)}
-   onModalAction={onModalAction}
- />
+ <GatheringCard
+   {...commonCardProps}
+   {...card}
+   className="w-full"
+ />

src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx (2)

83-92: 메뉴 버튼 접근성 개선 필요

버튼에 의미있는 aria-label을 추가하여 접근성을 개선하면 좋을 것 같습니다.

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

- <button type="button" className="cursor-pointer">
+ <button 
+   type="button" 
+   className="cursor-pointer"
+   aria-label="크루 관리 메뉴"
+ >

---

156-169: UI 텍스트 변경 및 추가 정보 제공이 적절함

1. "참여인원"에서 "크루멤버"로의 변경이 더 명확합니다.
2. 모집 완료 상태 표시가 시각적으로 잘 구현되었습니다.
3. 크루장 제외 설명 추가로 사용자의 이해도가 높아졌습니다.

하나의 작은 제안사항이 있습니다:

텍스트를 상수로 분리하여 관리하면 향후 텍스트 수정이나 다국어 지원 시 유지보수가 더 용이할 것 같습니다.

const CREW_TEXTS = {
  CREW_MEMBERS: '크루멤버',
  RECRUITMENT_COMPLETE: '모집 완료',
  MEMBERS_EXCLUDE_CAPTAIN: '크루장을 제외한 멤버 목록입니다.',
} as const;

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between a16dc81 and 943b93c.

📒 Files selected for processing (16)

• src/_queries/gathering/gathering-detail-queries.ts (1 hunks)
• src/app/(crew)/crew/create/_components/create-crew-form/index.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx (3 hunks)
• src/app/(crew)/crew/detail/[id]/_components/detail-crew-container.tsx (7 hunks)
• src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx (5 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/container.tsx (4 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (4 hunks)
• src/app/(crew)/crew/detail/[id]/page.tsx (1 hunks)
• src/components/common/crew-list/crew-card-list.tsx (1 hunks)
• src/components/common/crew-list/crew-card.tsx (1 hunks)
• src/components/common/gathering-card/container.tsx (5 hunks)
• src/components/common/gathering-card/presenter.tsx (4 hunks)
• src/components/gathering-list/crew-gathering-list.tsx (4 hunks)
• src/components/gathering-list/liked-list-container.tsx (2 hunks)
• src/components/gathering-list/liked-list-presenter.tsx (1 hunks)
• src/types/crew-card.d.ts (0 hunks)

💤 Files with no reviewable changes (1)

• src/types/crew-card.d.ts

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

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

🔇 Additional comments (24)

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

6-9: 함수 시그니처 변경이 적절합니다!

옵셔널 파라미터를 추가하여 쿼리의 자동 실행을 제어할 수 있게 된 것이 좋은 개선사항입니다. TypeScript의 타입 안전성도 잘 유지되었습니다.

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

Line range hint 26-31: 레이아웃 구조가 적절합니다.

CreateGathering 컴포넌트와 GatheringListSection이 적절한 계층 구조로 배치되어 있으며, 반응형 디자인을 위한 패딩과 너비 설정이 잘 되어 있습니다.

---

26-26: 헤더 섹션 제거에 대한 검토가 필요합니다.

크루 약속 헤더가 제거되어 시각적 계층 구조가 불명확해질 수 있습니다. 다른 섹션들과의 일관성을 위해 헤더의 존재 여부를 재검토해 주세요.

다음 스크립트로 다른 섹션들의 헤더 구조를 확인해보세요:

✅ Verification successful

헤더 섹션 제거는 적절한 변경으로 판단됩니다.

검색 결과를 분석해보면, 해당 페이지의 다른 섹션들도 별도의 헤더 없이 컴포넌트를 직접 렌더링하는 구조를 가지고 있습니다. CreateGathering 컴포넌트는 자체적으로 모달과 폼을 포함하는 독립적인 구조를 가지고 있어, 추가적인 헤더 섹션이 불필요할 것으로 보입니다.

• src/app/(crew)/crew/detail/[id]/page.tsx의 다른 섹션들도 단순한 className 스타일링만 적용된 구조입니다.
• CreateGathering 컴포넌트는 _components/create-gathering/ 디렉토리에 잘 구조화되어 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 다른 섹션의 헤더 구조 확인

# 프로젝트 내의 section 태그 내부 구조 검색
rg -U "section.*\{.*\}" --type tsx

Length of output: 64

---

Script:

#!/bin/bash
# 섹션 구조 검색을 위한 수정된 명령어
rg -U "<section.*>[\s\S]*?</section>" --type ts --type tsx src/

# CreateGathering 컴포넌트의 구조도 확인
rg -U "CreateGathering" --type ts --type tsx src/

Length of output: 171

---

Script:

#!/bin/bash
# 섹션 구조 검색을 위한 수정된 명령어
rg -U "<section" src/

# CreateGathering 컴포넌트 관련 파일 검색
fd . src/ -e tsx -e ts -x rg -l "CreateGathering" {}

Length of output: 1373

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

5-5: Mantine Loader 컴포넌트 추가 승인

UI/UX 향상을 위해 텍스트 대신 Mantine의 Loader 컴포넌트를 사용하는 것이 적절합니다.

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

17-17: 인터페이스에 콜백 함수 추가가 적절합니다.

부모 컴포넌트의 상태를 업데이트하기 위한 콜백 함수의 추가는 좋은 설계 결정입니다.

---

24-24: props 구조 분해가 올바르게 구현되었습니다.

새로운 onUpdate prop이 컴포넌트 매개변수에 올바르게 포함되었습니다.

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

5-6: 쿼리 훅 임포트가 적절히 추가되었습니다!

크루 상세 정보와 모임 목록을 가져오기 위한 쿼리 훅이 잘 추가되었습니다.

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

6-6: 로딩 상태 개선을 위한 Mantine Loader 추가

Mantine의 Loader 컴포넌트를 사용하여 로딩 상태를 시각적으로 표현하는 것은 좋은 개선입니다.

---

18-18: 데이터 갱신을 위한 refetch 기능 추가

쿼리 훅에서 refetch 함수를 추출하여 데이터 갱신 기능을 구현한 것이 적절합니다.

---

55-55: 로딩 상태 UI 개선

텍스트 대신 Loader 컴포넌트를 사용하여 사용자 경험이 개선되었습니다.

---

81-81: 모달 액션 prop 전달 검증

onModalAction prop이 CrewGatheringList에 전달되었습니다. 상위 컴포넌트에서의 사용이 적절해 보입니다.

✅ Verification successful

onModalAction prop이 올바르게 구현되어 있음을 확인했습니다

CrewGatheringList 컴포넌트의 인터페이스와 구현을 확인한 결과:

• CrewGatheringListProps 인터페이스에 onModalAction: () => void prop이 정의되어 있습니다
• 컴포넌트 내부에서 하위 컴포넌트로 올바르게 전달되고 있습니다
• gathering-card/container.tsx에서 최종적으로 사용되는 것을 확인했습니다

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# CrewGatheringList 컴포넌트에서 onModalAction prop의 사용을 확인

ast-grep --pattern 'interface $_ {
  $$$
  onModalAction?: () => void;
  $$$
}'

Length of output: 81

---

Script:

#!/bin/bash
# CrewGatheringList 컴포넌트의 props 인터페이스와 사용을 확인
rg -A 5 "CrewGatheringList" 

# onModalAction prop의 사용을 확인하기 위한 추가 검색
rg "onModalAction" 

Length of output: 5283

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

9-9: 타입 정의 임포트가 적절히 추가되었습니다!

모임 상세 데이터 타입을 명시적으로 임포트하여 타입 안정성이 향상되었습니다.

---

48-55: 쿼리 최적화가 잘 구현되었습니다!

모달이 열릴 때만 데이터를 가져오도록 enabled: false 옵션을 사용한 것이 성능 측면에서 좋은 접근입니다.

---

104-109: 모달 컨테이너 props 전달이 잘 구현되었습니다!

모달의 상태 변경을 부모 컴포넌트에 전달하기 위한 onUpdate prop이 적절히 구현되었습니다.

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

55-55: 컨테이너 높이 조정이 적절해 보입니다!

카드의 높이를 380px로 증가시킨 것이 콘텐츠를 더 잘 표현할 수 있게 해줍니다.

---

106-108: 반응형 디자인 관련 주의사항

좋아요 버튼의 절대 위치 지정이 다양한 화면 크기에서 문제를 일으킬 수 있습니다. 상대적인 위치 지정을 고려해보세요.

✅ Verification successful

Let's analyze the component's structure and positioning patterns to verify the responsive design concerns.

---

좋아요 버튼의 위치 설정이 적절합니다

카드 컴포넌트의 전체 구조를 분석한 결과, 현재 좋아요 버튼의 절대 위치 지정은 문제가 되지 않습니다:

• 부모 컴포넌트가 고정된 높이(h-[380px])를 가지고 있어 안정적입니다
• 버튼의 위치가 카드 내부의 다른 요소들과 잘 조화를 이루고 있습니다
• 우측 하단 배치는 일관된 사용자 경험을 제공합니다

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for responsive design related issues
# Search for absolute positioning in other components

rg -l "absolute.*bottom-\[\d+px\]" --type tsx

Length of output: 75

---

Script:

#!/bin/bash
# Search for absolute positioning with bottom values in all files
rg "absolute.*bottom-\[.*px\]"

# Also check for any Tailwind classes with bottom positioning
rg "bottom-\[.*px\]"

# Check the specific component file
cat "src/components/common/gathering-card/presenter.tsx"

Length of output: 4309

src/app/(crew)/crew/detail/[id]/_components/detail-crew-container.tsx (2)

6-6: 상태 관리와 UI 피드백이 개선되었습니다! ✨

Loader 컴포넌트의 도입과 isConfirmed 상태 추가로 사용자 경험이 향상되었습니다.

Also applies to: 24-24

---

149-149: isConfirmed prop의 사용을 확인해 주세요.

DetailCrewPresenter에 전달된 isConfirmed prop이 올바르게 사용되고 있는지 확인이 필요합니다.

✅ Verification successful

The code shows that isConfirmed prop is properly used in the DetailCrewPresenter component:

1. It's correctly defined in the DetailCrewPresenterProps interface as a boolean
2. It's properly destructured in the component parameters
3. It's used in two places:
   • Line 54: In getJoinButtonText() to return "모집 완료" when true
   • Line 76: To disable the join button when true
   • Line 160-165: To show a completion indicator with check icon when true

isConfirmed prop이 올바르게 구현되어 있습니다.

DetailCrewPresenter 컴포넌트에서 isConfirmed prop이 다음과 같이 적절하게 사용되고 있습니다:

• 크루 참여 버튼의 텍스트를 "모집 완료"로 표시
• 크루 참여 버튼을 비활성화
• 모집 완료 상태 표시 UI 렌더링

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# DetailCrewPresenter에서 isConfirmed prop의 사용을 확인합니다.

ast-grep --pattern $'interface DetailCrewPresenterProps {
  $$$
  isConfirmed: $_
  $$$
}'

ast-grep --pattern $'function DetailCrewPresenter({ $$$, isConfirmed, $$$ }: DetailCrewPresenterProps) {
  $$$
}'

Length of output: 20288

src/components/gathering-list/crew-gathering-list.tsx (3)

17-17: 인터페이스 수정이 적절합니다!

onModalAction 콜백 함수의 타입이 명확하게 정의되어 있어 타입 안정성이 잘 보장되어 있습니다.

---

26-26: props 구조분해가 올바르게 되었습니다!

인터페이스에 추가된 onModalAction prop이 컴포넌트에 정확하게 전달되었습니다.

---

107-107: 모달 동작의 일관성 검증이 필요합니다.

데스크톱 뷰에서 GatheringCard로 전달되는 onModalAction 콜백이 예상대로 동작하는지 확인해주세요.

✅ Verification successful

onModalAction prop이 일관되게 구현되어 있음을 확인했습니다.

검증 결과:

• GatheringCard 컴포넌트는 onModalAction prop을 올바르게 정의하고 있습니다
• 모바일과 데스크톱 뷰 모두에서 동일한 방식으로 onModalAction을 전달하고 있습니다
• 상위 컴포넌트에서 하위 컴포넌트로 일관된 콜백 전달이 확인되었습니다

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# GatheringCard 컴포넌트에서 onModalAction prop의 사용을 확인
ast-grep --pattern 'interface GatheringCardProps {
  $$$
  onModalAction: $_;
  $$$
}'

Length of output: 88

---

Script:

#!/bin/bash
# GatheringCard 컴포넌트의 props 인터페이스와 사용 패턴 검색
rg -A 5 "interface GatheringCardProps" 

# onModalAction prop의 사용 패턴 검색
rg -A 3 "onModalAction" 

# GatheringCard 컴포넌트 구현 검색
ast-grep --pattern 'const GatheringCard = ({ $$$, onModalAction, $$$ }: GatheringCardProps) => {
  $$$
}'

Length of output: 3110

src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx (3)

19-19: Props 인터페이스에 isConfirmed 추가 적절

isConfirmed 프로퍼티 추가를 통해 모집 완료 상태를 명확하게 관리할 수 있게 되었습니다.

---

Line range hint 54-58: getJoinButtonText 함수의 조건부 로직이 명확함

버튼 텍스트 상태 변경 로직이 우선순위에 맞게 잘 구성되어 있습니다:

1. 모집 완료
2. 참여 완료
3. 참여 중
4. 기본 상태

---

76-76: 버튼 비활성화 조건에 isConfirmed 추가 적절

모집이 완료된 경우에도 버튼이 비활성화되도록 하여 사용자 경험이 개선되었습니다.

[coderabbitai]

🛠️ Refactor suggestion

로딩 및 에러 상태 처리 개선이 필요합니다.

현재 isLoading과 error 상태를 가져오고 있지만 실제로 사용되지 않고 있습니다. 다음과 같은 개선사항을 제안드립니다:

  const { data: gatheringList, isLoading, error, refetch } = useGetGatheringListQuery(crewId);
  const totalGatheringCount = gatheringList?.length ?? 0;

+ if (error) {
+   return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
+ }
+
+ if (isLoading) {
+   return <div>로딩 중...</div>;
+ }

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

[coderabbitai]

💡 Codebase verification

모임 생성 후 refetch가 호출되지 않는 문제가 있습니다.

현재 코드에서 모임이 생성된 후 refetch()가 호출되지 않아 목록이 자동으로 갱신되지 않습니다. CreateGatheringModalContainer의 mutate 호출 시 onSuccess 콜백을 통해 refetch()를 호출하도록 수정이 필요합니다.

• src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container.tsx: mutate 호출 시 onSuccess 콜백 추가 필요

🔗 Analysis chain

refetch 함수의 사용성 검증이 필요합니다.

refetch 함수가 모임이 생성된 후에 적절히 호출되는지 확인이 필요합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if refetch is called after gathering creation
ast-grep --pattern 'CreateGatheringModalContainer {
  $$$
  onSuccess={() => {
    $$$
    refetch();
    $$$
  }}
  $$$
}'

Length of output: 125

---

Script:

#!/bin/bash
# Search for CreateGatheringModalContainer component and its usage
rg "CreateGatheringModalContainer" -A 10

# Search for any usage of refetch in the file
rg "refetch" "src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx" -A 5

Length of output: 5526

---

Script:

#!/bin/bash
# Search for the container component implementation to check mutation handling
rg -A 20 "useCreateGatheringQuery" "src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container.tsx"

# Search for any onSuccess handlers in the modal container
rg "onSuccess" "src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container.tsx" -A 5

Length of output: 1366

[coderabbitai]

🛠️ Refactor suggestion

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

현재 구현에서 타입 캐스팅을 여러 번 사용하고 있어 코드가 장황하고 타입 안전성이 떨어집니다. 타입 가드를 사용하여 더 안전하고 간결하게 구현할 수 있습니다.

-      {crewDataList.map((inform) => {
-        const isConfirmed =
-          inWhere !== 'my-crew' &&
-          (inform as MainCrewList).participantCount !== undefined &&
-          (inform as MainCrewList).totalCount !== undefined &&
-          (inform as MainCrewList).participantCount === (inform as MainCrewList).totalCount;
+      {crewDataList.map((inform) => {
+        const isMainCrewList = (item: MainCrewList | MyCrewList): item is MainCrewList =>
+          'participantCount' in item && 'totalCount' in item;
+        
+        const isConfirmed =
+          inWhere !== 'my-crew' &&
+          isMainCrewList(inform) &&
+          inform.participantCount === inform.totalCount;

📝 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

	{crewDataList.map((inform) => {
	// MainCrewList에서만 isConfirmed 계산
	const isConfirmed =
	inWhere !== 'my-crew' &&
	(inform as MainCrewList).participantCount !== undefined &&
	(inform as MainCrewList).totalCount !== undefined &&
	(inform as MainCrewList).participantCount === (inform as MainCrewList).totalCount;
	{crewDataList.map((inform) => {
	const isMainCrewList = (item: MainCrewList | MyCrewList): item is MainCrewList =>
	'participantCount' in item && 'totalCount' in item;
	const isConfirmed =
	inWhere !== 'my-crew' &&
	isMainCrewList(inform) &&
	inform.participantCount === inform.totalCount;

[coderabbitai]

🛠️ Refactor suggestion

타입 분기 로직 개선이 필요합니다

현재 여러 프로퍼티에서 반복되는 타입 분기 로직을 단순화할 수 있습니다. 상위에서 타입을 미리 확인하여 코드를 더 깔끔하게 만들 수 있습니다.

+        const crewData = inWhere === 'my-crew'
+          ? inform as MyCrewList
+          : inform as MainCrewList;
+
         <CrewCard
           // ...
           participantCount={
-            inWhere === 'my-crew'
-              ? (inform as MyCrewList)?.currentCount
-              : (inform as MainCrewList)?.participantCount
+            inWhere === 'my-crew'
+              ? crewData.currentCount
+              : crewData.participantCount
           }
           totalGatheringCount={
-            inWhere === 'my-crew'
-              ? (inform as MyCrewList)?.totalGathering
-              : (inform as MainCrewList)?.totalGatheringCount
+            inWhere === 'my-crew'
+              ? crewData.totalGathering
+              : crewData.totalGatheringCount
           }

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

[coderabbitai]

🛠️ Refactor suggestion

데이터 유효성 검사를 강화해 주세요.

현재 구현에서 몇 가지 개선이 필요한 부분이 있습니다:

1. data.participantCount와 data.totalCount가 undefined일 때의 기본값 처리가 없습니다.
2. crewMembers 배열이 undefined일 경우에 대한 처리가 필요합니다.

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

  useEffect(() => {
    if (data) {
-     if (data.participantCount !== undefined && data.totalCount !== undefined) {
+     const participantCount = data.participantCount ?? 0;
+     const totalCount = data.totalCount ?? 0;
-       setIsConfirmed(data.participantCount === data.totalCount);
+       setIsConfirmed(participantCount === totalCount);
-     }

      if (currentUserId) {
+       const crewMembers = data.crewMembers ?? [];
-       const captain = data.crewMembers.find((member) => member.captain);
+       const captain = crewMembers.find((member) => member.captain);
-       const memberExists = data.crewMembers.some((member) => member.id === currentUserId);
+       const memberExists = crewMembers.some((member) => member.id === currentUserId);

        setIsCaptain(captain?.id === currentUserId);
        setIsMember(memberExists);
      }
    }
  }, [currentUserId, data]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	if (data) {
	// confirmed 상태 계산
	if (data.participantCount !== undefined && data.totalCount !== undefined) {
	setIsConfirmed(data.participantCount === data.totalCount);
	}
	// Captain 및 멤버 여부 확인 (currentUserId 필요)
	if (currentUserId) {
	const captain = data.crewMembers.find((member) => member.captain);
	const memberExists = data.crewMembers.some((member) => member.id === currentUserId);
	setIsCaptain(captain?.id === currentUserId);
	setIsMember(memberExists);
	setIsCaptain(captain?.id === currentUserId);
	setIsMember(memberExists);
	}
	if (data) {
	const participantCount = data.participantCount ?? 0;
	const totalCount = data.totalCount ?? 0;
	setIsConfirmed(participantCount === totalCount);
	if (currentUserId) {
	const crewMembers = data.crewMembers ?? [];
	const captain = crewMembers.find((member) => member.captain);
	const memberExists = crewMembers.some((member) => member.id === currentUserId);
	setIsCaptain(captain?.id === currentUserId);
	setIsMember(memberExists);
	}
	}

[coderabbitai]

💡 Codebase verification

용어 통일이 필요한 부분이 확인되었습니다.

검색 결과를 통해 다음과 같은 불일치 사항이 발견되었습니다:

• src/app/(crew)/crew/create/_components/create-crew-form/index.tsx

  • placeholder에 여전히 "자세한 모집 정원을 입력해주세요" 문구가 남아있습니다.

• src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx

  • "모집 정원" 관련 문구가 3곳에서 사용되고 있습니다.
  • 이는 모임 생성 폼이므로, "크루 최대 인원"이 아닌 "모집 정원"이라는 용어를 사용하는 것이 더 적절할 수 있습니다.

크루와 모임은 서로 다른 개념이므로, 각각의 컨텍스트에 맞는 용어를 사용하되 일관성 있게 적용하는 것이 좋겠습니다:

• 크루 생성/수정 시: "크루 최대 인원"
• 모임 생성/수정 시: "모집 정원"

🔗 Analysis chain

용어 변경이 일관성 있게 적용되었는지 확인이 필요합니다.

라벨과 에러 메시지의 용어가 "모집 정원"에서 "크루 최대 인원"으로 변경되었습니다. 이는 PR의 목적에 부합하는 변경사항이지만, 다음 사항들을 확인해주시기 바랍니다:

1. NumberInput 컴포넌트의 placeholder에도 "자세한 모집 정원을 입력해주세요"라는 문구가 있는데, 이 부분도 일관성 있게 변경이 필요해 보입니다.
2. 다른 관련 컴포넌트나 페이지에서도 동일한 용어로 통일이 되어있는지 확인이 필요합니다.

Also applies to: 296-296

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for inconsistent terminology across the codebase

# Search for any remaining instances of "모집 정원"
rg "모집\s*정원"

# Search for new terminology "크루 최대 인원"
rg "크루\s*최대\s*인원"

Length of output: 744

[github-actions]

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

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

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

53-58: 모달 컨테이너에 업데이트 기능이 올바르게 연결되었습니다.

새로운 onUpdate prop이 기존 props와 함께 잘 구성되어 있습니다. 하지만 스토리의 args에도 이 새로운 prop에 대한 설명이나 예시가 있으면 좋을 것 같습니다.

다음과 같이 각 스토리의 args에 onUpdate 예시를 추가하는 것을 고려해보세요:

 ModalWithUser.args = {
   opened: false,
+  onUpdate: () => {
+    console.log('모달 업데이트 완료');
+  },
   data: {
     // ... existing data
   }
 };

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 943b93c and ea96284.

📒 Files selected for processing (2)

• src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx (0 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/gathering-detail-modal.stories.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• src/app/(crew)/crew/detail/[id]/_components/detail-crew.stories.tsx

🔇 Additional comments (1)

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

46-48: 업데이트 핸들러가 적절히 구현되었습니다.

Storybook action을 사용하여 업데이트 이벤트를 추적하는 것이 좋은 접근 방식입니다. 다른 핸들러들과 일관된 패턴을 유지하고 있습니다.

[github-actions]

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

[github-actions]

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