Merge pull request #149 from CodeitFESI4-Team1/Fix/146/GatheringDetail

Fix/146/gathering detail

Author: HaeJungg

src/_queries/gathering/gathering-detail-queries.ts

@@ -3,10 +3,15 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { GetGatheringDetail, createGathering } from '@/src/_apis/gathering/gathering-detail-apis';
 import { CreateGatheringRequestTypes } from '@/src/types/gathering-data';
 
-export function useGetGatheringDetailQuery(crewId: number, gatheringId: number) {
+export function useGetGatheringDetailQuery(
+  crewId: number,
+  gatheringId: number,
+  options?: { enabled?: boolean },
+) {
   return useQuery({
     queryKey: ['gatheringDetail', crewId, gatheringId],
     queryFn: () => GetGatheringDetail(crewId, gatheringId),
+    ...options,
   });
 }
 

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

@@ -287,13 +287,13 @@ export default function CreateCrewForm({
             htmlFor="crew-totalCount"
             className="text-base font-semibold text-gray-800 md:text-xl"
           >
-            모집 정원을 선택해주세요.
+            크루 최대 인원을 선택해주세요.
           </label>
           <Controller
             name="totalCount"
             control={control}
             rules={{
-              required: '모집 정원을 입력해주세요.',
+              required: '크루 최대 인원을 입력해주세요.',
             }}
             render={({ field }) => (
               <NumberInput

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

@@ -2,16 +2,24 @@
 
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
+import { useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
+import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
 import { useAuth } from '@/src/hooks/use-auth';
 import CreateGatheringModalContainer from '@/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container';
 import Button from '@/src/components/common/input/button';
+import { CrewDetail } from '@/src/types/crew-card';
 import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 
 export default function CreateGathering({ crewId }: { crewId: number }) {
   const { isAuth } = useAuth();
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
 
+  const { data: gatheringList, isLoading, error, refetch } = useGetGatheringListQuery(crewId);
+
+  // totalGatheringCount 추출
+  const totalGatheringCount = gatheringList?.length ?? 0;
+
   const handleButtonClick = () => {
     if (isAuth) {
       open(); // 로그인 상태일 경우 모달 열기
@@ -30,7 +38,13 @@ export default function CreateGathering({ crewId }: { crewId: number }) {
   };
 
   return (
-    <>
+    <div className="flex items-center justify-between px-3 md:px-7 lg:px-11">
+      <div className="flex items-end space-x-2">
+        <h2 className="text-2xl font-semibold text-gray-800">약속 잡기</h2>
+        <span className="text-base font-semibold text-blue-500">
+          현재 {totalGatheringCount}개의 약속이 개설되어 있습니다.
+        </span>
+      </div>
       <Button type="button" className="btn-filled px-4" onClick={handleButtonClick}>
         약속 만들기
       </Button>
@@ -40,6 +54,6 @@ export default function CreateGathering({ crewId }: { crewId: number }) {
         close={close}
         data={initialValue}
       />
-    </>
+    </div>
   );
 }

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

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
+import { Loader } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { cancelCrew, joinCrew, leaveCrew } from '@/src/_apis/crew/crew-detail-apis';
 import { useUser } from '@/src/_queries/auth/user-queries';
@@ -20,6 +21,7 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
   const [isCaptain, setIsCaptain] = useState(false);
   const [isMember, setIsMember] = useState(false);
   const [isJoining, setIsJoining] = useState(false);
+  const [isConfirmed, setIsConfirmed] = useState(false);
   const [confirmCancelOpened, { open: openConfirmCancel, close: closeConfirmCancel }] =
     useDisclosure();
   const router = useRouter();
@@ -35,12 +37,20 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
   const { data, isLoading, error: fetchError, refetch } = useGetCrewDetailQuery(id);
 
   useEffect(() => {
-    if (currentUserId && data) {
-      const captain = data.crewMembers.find((member) => member.captain);
-      const memberExists = data.crewMembers.some((member) => member.id === currentUserId);
+    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);
+      }
     }
   }, [currentUserId, data]);
 
@@ -88,7 +98,7 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
       toast.success('크루가 성공적으로 삭제되었습니다.');
       router.push('/');
     } catch (deleteError) {
-      toast.error('크루 삭제 중 에러가 발생했습니다.');
+      toast.error('🚫 크루 삭제 중 에러가 발생했습니다.');
     }
   };
 
@@ -106,9 +116,10 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
 
   // TODO: 로딩, 에러처리 추후 개선
   if (isLoading) {
-    return <p>Loading...</p>;
+    return <Loader />;
   }
 
+  // TODO: 추후 404페이지로 이동시키기
   if (fetchError) {
     if (fetchError instanceof ApiError) {
       try {
@@ -118,7 +129,7 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
           return <p>크루 정보를 찾을 수 없습니다</p>;
         }
       } catch (parseError) {
-        return <p>{`Error ${fetchError.status}: ${fetchError.message}`}</p>;
+        return <p>{`Error ${fetchError.message}`}</p>;
       }
     }
     return <p>데이터 통신에 실패했습니다.</p>;
@@ -135,6 +146,7 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
         isCaptain={isCaptain}
         isMember={isMember}
         isJoining={isJoining}
+        isConfirmed={isConfirmed}
         handleJoinClick={handleJoinClick}
         handleLeaveCrew={handleLeaveCrew}
         handleDelete={handleDelete}

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

@@ -16,6 +16,7 @@ interface DetailCrewPresenterProps {
   isCaptain: boolean;
   isMember: boolean;
   isJoining: boolean;
+  isConfirmed: boolean;
   handleJoinClick: () => void;
   handleLeaveCrew: () => void;
   handleDelete: () => void;
@@ -26,6 +27,7 @@ export default function DetailCrewPresenter({
   data,
   isCaptain,
   isMember,
+  isConfirmed,
   handleJoinClick,
   handleLeaveCrew,
   handleDelete,
@@ -42,14 +44,14 @@ export default function DetailCrewPresenter({
     totalCount,
     imageUrl,
     crewMembers,
-    confirmed,
   } = data;
 
   // captain과 members 분리
   const captain = crewMembers.find((member) => member.captain) as CrewDetailMember;
   const members = crewMembers.filter((member) => !member.captain);
 
   const getJoinButtonText = () => {
+    if (isConfirmed) return '모집 완료';
     if (isMember) return '참여 완료';
     if (isJoining) return '참여 중...';
     return '크루 참여하기';
@@ -71,23 +73,23 @@ export default function DetailCrewPresenter({
           <Button
             className={cn('px-4 py-2', isMember ? 'btn-disabled' : 'btn-filled')}
             onClick={handleJoinClick}
-            disabled={isMember || isJoining}
+            disabled={isMember || isJoining || isConfirmed}
           >
             {getJoinButtonText()}
           </Button>
         </div>
 
         {/* 오른쪽 하단 공유 및 케밥 버튼 */}
-        <div className="absolute bottom-6 right-6 flex space-x-2">
+        <div className="absolute bottom-6 right-6 flex items-center space-x-2">
           <button type="button" className="bg-transparent" onClick={onShareClick}>
             <Image src={ShareIco} alt="공유하기" className="h-6 w-6" />
           </button>
           {isCaptain || isMember ? (
             <Menu trigger="click" position="bottom-end" openDelay={100} closeDelay={400}>
               <Menu.Target>
-                <div className="cursor-pointer">
+                <button type="button" className="cursor-pointer">
                   <Image src={KebabIcon} alt="더보기" width={20} height={20} />
-                </div>
+                </button>
               </Menu.Target>
               <Menu.Dropdown>
                 {isCaptain ? (
@@ -151,19 +153,20 @@ export default function DetailCrewPresenter({
           <div className="mb-2 flex items-center justify-between">
             <div className="flex items-center">
               <Image src={IcoUser} alt="유저 아이콘" width={20} height={20} />
-              <span className="text-base font-medium text-gray-700">참여인원</span>
+              <span className="text-base font-medium text-gray-700">크루멤버</span>
               <span className="pl-1 text-base font-medium text-blue-500">{participantCount}</span>
               <span className="text-base font-medium text-gray-700">/{totalCount}</span>
             </div>
-            {confirmed && (
+            {isConfirmed && (
               <div className="flex items-center text-blue-600">
-                <Image src={Check} alt="개설 확정" width={24} height={24} />
-                <span className="text-sm font-medium">개설확정</span>
+                <Image src={Check} alt="모집 완료 아이콘" width={24} height={24} />
+                <span className="text-sm font-medium">모집 완료</span>
               </div>
             )}
           </div>
           <div className="w-full">
             <ProgressBar total={totalCount} current={participantCount} />
+            <p className="pt-1 text-sm text-gray-500">크루장을 제외한 멤버 목록입니다.</p>
           </div>
           <div className="mt-4 h-40 space-y-6 overflow-y-auto">
             {members.length > 0 ? (

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

@@ -33,7 +33,6 @@ export const Default: Story = {
       subLocation: '유성구',
       participantCount: 8,
       totalCount: 10,
-      confirmed: true,
       imageUrl:
         'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
       totalGatheringCount: 5,
@@ -117,7 +116,6 @@ export const IsCaptain: Story = {
       subLocation: '유성구',
       participantCount: 1,
       totalCount: 10,
-      confirmed: true,
       imageUrl:
         'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
       totalGatheringCount: 1,
@@ -149,7 +147,6 @@ export const IsMember: Story = {
       subLocation: '유성구',
       participantCount: 2,
       totalCount: 10,
-      confirmed: true,
       imageUrl:
         'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/4d0c5851-e6e2-4919-897a-b8d4e88a4f72',
       totalGatheringCount: 1,

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

@@ -14,14 +14,14 @@ export interface GatheringDetailModalContainerProps {
   opened: boolean;
   close: () => void;
   data: GatheringDetailType;
+  onUpdate?: () => void;
 }
 
-// NOTE: 테스트는 로그인 후 토큰이 안담겨서 추후 진행하겠습니다!
-
 export default function GatheringDetailModalContainer({
   opened,
   close,
   data,
+  onUpdate,
 }: GatheringDetailModalContainerProps) {
   const showToast = (message: string, type: 'success' | 'error' | 'warning') => {
     toast(message, { type });
@@ -32,6 +32,7 @@ export default function GatheringDetailModalContainer({
       await JoinGathering(data.crewId, data.id);
       showToast('약속에 참여했습니다.', 'success');
       close();
+      onUpdate?.();
     } catch (error) {
       if (error instanceof ApiError) {
         showToast(`참여 중 에러 발생: ${error.message}`, 'error');
@@ -43,6 +44,7 @@ export default function GatheringDetailModalContainer({
     try {
       await LeaveGathering(data.crewId, data.id);
       close();
+      onUpdate?.();
     } catch (error) {
       if (error instanceof ApiError) {
         showToast(`참여 취소 중 에러 발생: ${error.message}`, 'error');
@@ -55,6 +57,7 @@ export default function GatheringDetailModalContainer({
       await CancelGathering(data.crewId, data.id);
       showToast('약속을 삭제했습니다.', 'success');
       close();
+      onUpdate?.();
     } catch (error) {
       if (error instanceof ApiError) {
         showToast(`약속 삭제 중 에러 발생: ${error.message}`, 'error');

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

@@ -43,10 +43,19 @@ const Template: StoryFn<GatheringDetailModalContainerProps> = function Gathering
     setIsOpened(opened);
   }, [opened]);
 
+  const handleUpdate = () => {
+    action('Update action performed')();
+  };
+
   return (
     <>
       <Button onClick={handleOpen}>Open Modal</Button>
-      <GatheringDetailModalContainer opened={isOpened} close={handleClose} data={data} />
+      <GatheringDetailModalContainer
+        opened={isOpened}
+        close={handleClose}
+        data={data}
+        onUpdate={handleUpdate}
+      />
     </>
   );
 };

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

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
+import { Loader } from '@mantine/core';
 import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
 import { ApiError } from '@/src/utils/api';
@@ -14,7 +15,7 @@ interface GatheringListSectionProps {
 }
 
 export default function GatheringListSection({ id }: GatheringListSectionProps) {
-  const { data: gatheringList, isLoading, error } = useGetGatheringListQuery(id);
+  const { data: gatheringList, isLoading, error, refetch } = useGetGatheringListQuery(id);
   const [showLoginModal, setShowLoginModal] = useState(false);
   const router = useRouter();
 
@@ -43,11 +44,15 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
     router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
   };
 
+  const handleModalAction = () => {
+    refetch();
+  };
+
   // TODO: 추후 에러, 로딩 수정
   if (isLoading)
     return (
       <div className="flex items-center justify-center">
-        <p>로딩 중...</p>
+        <Loader />
       </div>
     );
 
@@ -73,6 +78,7 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
         onLike={handleLike}
         onUnlike={handleUnlike}
         onShowLoginModal={() => setShowLoginModal(true)}
+        onModalAction={handleModalAction}
       />
       {showLoginModal && (
         <ConfirmModal

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

@@ -23,10 +23,7 @@ export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
       {/* Gathering Section */}
       <section className="w-full space-y-6">
         <article className="space-y-6">
-          <div className="flex items-center justify-between px-3 md:px-7 lg:px-11">
-            <h2 className="text-2xl font-semibold">크루 약속</h2>
-            <CreateGathering crewId={Number(params.id)} />
-          </div>
+          <CreateGathering crewId={Number(params.id)} />
           <div className="flex w-full overflow-hidden px-3 md:px-7 lg:px-0">
             <div className="relative -mx-3 w-[calc(100%+1.5rem)] px-3 md:-mx-7 md:w-[calc(100%+3.5rem)] md:px-7 lg:-mx-6 lg:w-[calc(100%+3rem)] lg:px-0">
               <GatheringListSection id={id} />