Feat/111/gathering api

src/_apis/gathering/gathering-detail-apis.ts

@@ -0,0 +1,54 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringDetailType } from '@/src/types/gathering-data';
+
+// NOTE: 약속 디테일 불러오기
+export async function GetGatheringDetail(
+  crewId: number,
+  gatheringId: number,
+): Promise<GatheringDetailType> {
+  const url = `/api/crews/${crewId}/gatherings/${gatheringId}`;
+
+  const response = await fetchApi<{ data: GatheringDetailType }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response.data;
+}
+
+// NOTE: 약속 참여
+export async function JoinGathering(crewId: number, gatheringId: number): Promise<void> {
+  const url = `/api/crews/${crewId}/gatherings/${gatheringId}/join`;
+
+  await fetchApi(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+// NOTE: 약속 취소(host)
+export async function CancelGathering(crewId: number, gatheringId: number): Promise<void> {
+  const url = `/api/crews/${crewId}/gatherings/${gatheringId}`;
+
+  await fetchApi(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+// NOTE: 약속 참여 취소(참여자)
+export async function LeaveGathering(crewId: number, gatheringId: number): Promise<void> {
+  const url = `/api/crews/${crewId}/gatherings/${gatheringId}/leave`;
+
+  await fetchApi(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/_queries/detail/crew-detail-queries.ts → src/_queries/crew/crew-detail-queries.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getCrewDetail } from '@/src/_apis/detail/get-crew-detail';
+import { getCrewDetail } from '@/src/_apis/crew/crew-detail-apis';
 
 export function useGetCrewDetailQuery(id: number) {
   return useQuery({

src/_queries/detail/gathering-list-queries.ts → src/_queries/crew/gathering-list-queries.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
+import { getGatheringList } from '@/src/_apis/crew/crew-gathering-list-apis';
 import { GatheringType } from '@/src/types/gathering-data';
 
 export function useGetGatheringListQuery(id: number) {

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

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { GetGatheringDetail } from '@/src/_apis/detail/get-gathering-detail';
+import { GetGatheringDetail } from '@/src/_apis/gathering/gathering-detail-apis';
 
 export function useGetGatheringDetailQuery(crewId: number, gatheringId: number) {
   return useQuery({

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

@@ -1,5 +1,12 @@
 'use client';
 
+import {
+  CancelGathering,
+  JoinGathering,
+  LeaveGathering,
+} from '@/src/_apis/gathering/gathering-detail-apis';
+import { ApiError } from '@/src/utils/api';
+import Toast from '@/src/components/common/toast';
 import { GatheringDetailType } from '@/src/types/gathering-data';
 import GatheringDetailModalPresenter from './presenter';
 
@@ -9,22 +16,50 @@ export interface GatheringDetailModalContainerProps {
   data: GatheringDetailType;
 }
 
+// NOTE: 테스트는 로그인 후 토큰이 안담겨서 추후 진행하겠습니다!
+
 export default function GatheringDetailModalContainer({
   opened,
   close,
   data,
 }: GatheringDetailModalContainerProps) {
-  const handleJoin = () => {
-    // TODO : 모임 참여하기 API 연결
-    close();
+  const showToast = (message: string, type: 'success' | 'error' | 'warning') => {
+    Toast({ message, type });
   };
-  const handleExit = () => {
-    // TODO : 모임 탈퇴하기 API 연결
-    close();
+
+  const handleJoin = async () => {
+    try {
+      await JoinGathering(data.crewId, data.id);
+      showToast('약속에 참여했습니다.', 'success');
+      close();
+    } catch (error) {
+      if (error instanceof ApiError) {
+        showToast(`참여 중 에러 발생: ${error.message}`, 'error');
+      }
+    }
   };
-  const handleDelete = () => {
-    // TODO : 모임 삭제하기 API 연결
-    close();
+
+  const handleExit = async () => {
+    try {
+      await LeaveGathering(data.crewId, data.id);
+      close();
+    } catch (error) {
+      if (error instanceof ApiError) {
+        showToast(`참여 취소 중 에러 발생: ${error.message}`, 'error');
+      }
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await CancelGathering(data.crewId, data.id);
+      showToast('약속을 삭제했습니다.', 'success');
+      close();
+    } catch (error) {
+      if (error instanceof ApiError) {
+        showToast(`약속 삭제 중 에러 발생: ${error.message}`, 'error');
+      }
+    }
   };
 
   return (

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

@@ -55,6 +55,7 @@ export const ModalWithUser = Template.bind({});
 ModalWithUser.args = {
   opened: false,
   data: {
+    crewId: 1,
     id: 1,
     title: '신나는 운동...즐거운..코딩..',
     introduce: '공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~',
@@ -97,6 +98,7 @@ export const ModalWithCaptain = Template.bind({});
 ModalWithCaptain.args = {
   opened: false,
   data: {
+    crewId: 1,
     id: 2,
     title: '신나는 운동...즐거운..코딩..',
     introduce: '공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~',
@@ -139,6 +141,7 @@ export const ModalWithCrew = Template.bind({});
 ModalWithCrew.args = {
   opened: false,
   data: {
+    crewId: 1,
     id: 3,
     title: '아침 타임 에너지 요가',
     introduce: '공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~',

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useGetCrewDetailQuery } from '@/src/_queries/detail/crew-detail-queries';
+import { useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
 import { ApiError } from '@/src/utils/api';
 import DetailCrewCard from '@/src/components/common/crew-list/detail-crew-card';
 

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useGetGatheringListQuery } from '@/src/_queries/detail/gathering-list-queries';
+import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
 import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
 
 interface GatheringListSectionProps {

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

@@ -1,38 +1,23 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { ReviewListData, getReviewList } from '@/src/_apis/detail/get-review-list';
 import CrewReviewList from './crew-review-list';
 import RatingDisplay from './rating-display';
 
 export default function CrewReviewSection() {
-  const [reviewData, setReviewData] = useState<ReviewListData | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-  const limit = 5;
-
-  useEffect(() => {
-    async function fetchReviewData() {
-      const data = await getReviewList(currentPage, limit);
-      setReviewData(data);
-    }
-    fetchReviewData();
-  }, [currentPage]);
-
-  const handlePageChange = (page: number) => setCurrentPage(page);
-
-  if (!reviewData) return <div>Loading...</div>;
+  // TODO: review 추후 추가
 
   return (
     <div className="space-y-6 rounded-lg bg-white">
       <div className="mx-4 flex justify-center py-11">
-        <RatingDisplay reviewRateInfo={reviewData.info} />
+        {/* <RatingDisplay reviewRateInfo={reviewData.info} /> */}
       </div>
-      <CrewReviewList
+      {/* <CrewReviewList
         reviews={reviewData.data}
         totalPages={reviewData.totalPages}
         currentPage={currentPage}
         onPageChange={handlePageChange}
-      />
+      /> */}
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
+import { getGatheringList } from '@/src/_apis/crew/crew-gathering-list-apis';
 import CreateGathering from './_components/create-gathering';
 import DetailCrewSection from './_components/detail-crew-section';
 import GatheringListSection from './_components/gathering-list-section';

src/components/common/gathering-card/container.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useDisclosure } from '@mantine/hooks';
-import { useGetGatheringDetailQuery } from '@/src/_queries/detail/gathering-detail-queries';
+import { useGetGatheringDetailQuery } from '@/src/_queries/gathering/gathering-detail-queries';
 import { ApiError } from '@/src/utils/api';
 import GatheringDetailModalContainer from '@/src/app/(crew)/crew/_components/gathering-detail-modal/container';
 import Toast from '@/src/components/common/toast';

src/components/common/gathering-card/scheduled-gathering-card/container.tsx

@@ -24,6 +24,7 @@ export default function ScheduledGatheringCardContainer({
   // TODO: modalData 연결
   // const { data: modalData } = useQuery<GatheringDetailType>(useGetGatheringQuery());
   const dummyModalData = {
+    crewId: 7,
     id: 1,
     title: '신나는 운동...즐거운..코딩..',
     introduce: '공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~',

src/types/gathering-data.d.ts

@@ -12,6 +12,7 @@ export interface GatheringType {
   liked: boolean;
 }
 export interface GatheringDetailType extends GatheringType {
+  crewId: number;
   introduce: string;
   gatheringCaptain: boolean;
   participant: boolean;