Feat/121/liked api

src/_apis/liked/liked-apis.ts

@@ -0,0 +1,39 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringResponseType } from '@/src/types/gathering-data';
+
+// 찜 목록 조회
+export async function getLikedList(page: number): Promise<GatheringResponseType> {
+  const url = `/api/liked/memberLikes?page=${page}&size=6`;
+
+  const response = await fetchApi<{ data: GatheringResponseType }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return response.data;
+}
+
+// 찜 추가하기
+export async function addLike(gatheringId: number): Promise<void> {
+  const url = `/api/liked/${gatheringId}`;
+
+  await fetchApi<void>(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+// 찜 해제하기
+export async function removeLike(gatheringId: number): Promise<void> {
+  const url = `/api/liked/${gatheringId}`;
+
+  await fetchApi<void>(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/_queries/liked/liked-queries.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getLikedList } from '@/src/_apis/liked/liked-apis';
+
+export function useGetLikedListQuery(page: number) {
+  return useQuery({
+    queryKey: ['likedList', page],
+    queryFn: () => getLikedList(page),
+  });
+}

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

@@ -1,12 +1,12 @@
 'use client';
 
+import { toast } from 'react-toastify';
 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';
 
@@ -24,7 +24,7 @@ export default function GatheringDetailModalContainer({
   data,
 }: GatheringDetailModalContainerProps) {
   const showToast = (message: string, type: 'success' | 'error' | 'warning') => {
-    Toast({ message, type });
+    toast(message, { type });
   };
 
   const handleJoin = async () => {

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

@@ -1,6 +1,12 @@
 'use client';
 
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/navigation';
+import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
+import { ApiError } from '@/src/utils/api';
+import ConfirmModal from '@/src/components/common/modal/confirm-modal';
 import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
 
 interface GatheringListSectionProps {
@@ -9,12 +15,57 @@ interface GatheringListSectionProps {
 
 export default function GatheringListSection({ id }: GatheringListSectionProps) {
   const { data: gatheringList, isLoading, error } = useGetGatheringListQuery(id);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const router = useRouter();
 
-  if (isLoading) return <p>로딩 중...</p>;
+  const handleLike = async (gatheringId: number) => {
+    try {
+      await addLike(gatheringId);
+    } catch (apiError) {
+      if (apiError instanceof ApiError) {
+        toast.error(`찜하기에 실패했습니다: ${apiError.message}`);
+      }
+    }
+  };
+
+  const handleUnlike = async (gatheringId: number) => {
+    try {
+      await removeLike(gatheringId);
+    } catch (apiError) {
+      if (apiError instanceof ApiError) {
+        toast.error(`찜하기 해제에 실패했습니다: ${apiError.message}`);
+      }
+    }
+  };
 
-  if (error) return <p>데이터를 불러오는 데 실패했습니다: {error.message}</p>;
+  const handleLoginRedirect = () => {
+    const currentPath = window.location.pathname || '/';
+    router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
+  };
 
+  // TODO: 추후 에러, 로딩 수정
+  if (isLoading) return <p>로딩 중...</p>;
+  if (error) return <p>데이터를 불러오는 데 실패했습니다</p>;
   if (!gatheringList || gatheringList.length === 0) return <p>데이터가 없습니다.</p>;
 
-  return <GatheringCardCarousel gatheringData={gatheringList} crewId={id} />;
+  return (
+    <>
+      <GatheringCardCarousel
+        gatheringData={gatheringList}
+        crewId={id}
+        onLike={handleLike}
+        onUnlike={handleUnlike}
+        onShowLoginModal={() => setShowLoginModal(true)}
+      />
+      {showLoginModal && (
+        <ConfirmModal
+          opened={showLoginModal}
+          onClose={() => setShowLoginModal(false)}
+          onConfirm={handleLoginRedirect}
+        >
+          로그인이 필요합니다!
+        </ConfirmModal>
+      )}
+    </>
+  );
 }

src/app/(crew)/layout.tsx

@@ -1,3 +1,5 @@
+import { Bounce, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import '@mantine/core/styles.css';
 import Header from '@/src/components/common/header/container';
 import '@/src/styles/globals.css';
@@ -10,6 +12,19 @@ export default function RootLayout({
   return (
     <>
       <Header />
+      <ToastContainer
+        position="bottom-right"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+        transition={Bounce}
+      />
       <div className="flex min-h-screen flex-col items-center bg-gray-50">
         <main className="container flex min-h-screen max-w-pc flex-1 flex-col md:shadow-bg">
           {children}

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

@@ -1,10 +1,9 @@
-import GatheringList from '@/src/components/gathering-list/gathering-list';
-import { gatheringData } from '@/src/mock/gathering-data';
+import LikedList from '@/src/components/gathering-list/liked-list-container';
 
 export default function FavoritePage() {
   return (
     <div className="mt-4 md:mt-10">
-      <GatheringList gatheringData={gatheringData} />
+      <LikedList />
     </div>
   );
 }

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

@@ -1,17 +1,19 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 import { useDisclosure } from '@mantine/hooks';
 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';
 import { GatheringType } from '@/src/types/gathering-data';
 import GatheringCardPresenter from './presenter';
 
 interface GatheringCardContainerProps extends GatheringType {
   className?: string;
   crewId: number;
+  onLike: (gatheringId: number) => Promise<void>;
+  onUnlike: (gatheringId: number) => Promise<void>;
 }
 
 export default function GatheringCard({
@@ -25,9 +27,10 @@ export default function GatheringCard({
   liked: initialIsLiked,
   className,
   crewId,
+  onLike,
+  onUnlike,
 }: GatheringCardContainerProps) {
   const [opened, { open, close }] = useDisclosure(false);
-  // 임시 찜하기
   const [isLiked, setIsLiked] = useState(initialIsLiked);
 
   // 날짜 비교
@@ -42,9 +45,19 @@ export default function GatheringCard({
   // 마감 시간 문자열 생성
   const deadlineMessage = `오늘 ${gatheringDate.getHours()}시 마감`;
 
-  // 추후 찜하기 컴포넌트 작성되면 수정
-  const handleLikeToggle = () => {
-    setIsLiked((prev) => !prev);
+  // 찜하기 상태 업데이트
+  const handleLikeToggle = async () => {
+    try {
+      if (isLiked) {
+        await onUnlike(id);
+        setIsLiked(false);
+      } else {
+        await onLike(id);
+        setIsLiked(true);
+      }
+    } catch (error) {
+      toast.error('찜 상태를 업데이트하는 데 실패했습니다.');
+    }
   };
 
   const { data: gatheringData, error } = useGetGatheringDetailQuery(crewId, id);
@@ -56,13 +69,13 @@ export default function GatheringCard({
           const errorData = JSON.parse(error.message);
 
           if (errorData.status === 'NOT_FOUND') {
-            Toast({ message: '모임 정보를 찾을 수 없습니다.', type: 'error' });
+            toast.error('모임 정보를 찾을 수 없습니다.');
           }
         } catch {
-          Toast({ message: `Error ${error.status}: ${error.message}`, type: 'error' });
+          toast.error(`Error ${error.status}: ${error.message}`);
         }
       } else {
-        Toast({ message: '데이터 통신에 실패했습니다.', type: 'error' });
+        toast.error('데이터 통신에 실패했습니다.');
       }
     }
   }, [error]);

src/components/common/modal/confirm-modal.tsx

@@ -36,7 +36,7 @@ export default function ConfirmModal({ children, opened, onClose, onConfirm }: C
       opened={opened}
       onClose={onClose}
       centered
-      withCloseButton
+      withCloseButton={false}
       size="xs"
       styles={{
         content: { boxShadow: '0 25px 50px -12px rgba(0,0,0,0.1)', borderRadius: '12px' },
@@ -46,8 +46,8 @@ export default function ConfirmModal({ children, opened, onClose, onConfirm }: C
         blur: 2,
       }}
     >
-      <div className="space-y-8 text-center">
-        {children}
+      <div className="space-y-8 p-4 text-center">
+        <div>{children}</div>
         <div className="flex justify-end">
           <Button className="btn-filled w-full" onClick={handleConfirm}>
             확인

src/components/gathering-list/gathering-card-carousel.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Image from 'next/image';
+import { useAuthStore } from '@/src/store/use-auth-store';
 import GatheringCard from '@/src/components/common/gathering-card/container';
 import { GatheringType } from '@/src/types/gathering-data';
 import IcoLeft from '@/public/assets/icons/ic-left.svg';
@@ -10,16 +11,26 @@ import IcoRight from '@/public/assets/icons/ic-right.svg';
 interface GatheringCardCarouselProps {
   gatheringData: GatheringType[];
   crewId: number;
+  onLike: (gatheringId: number) => Promise<void>;
+  onUnlike: (gatheringId: number) => Promise<void>;
+  onShowLoginModal: () => void;
 }
 
 export default function CustomGatheringCardCarousel({
   gatheringData,
   crewId,
+  onLike,
+  onUnlike,
+  onShowLoginModal,
 }: GatheringCardCarouselProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [slidesToShow, setSlidesToShow] = useState(1);
   const [slideSize, setSlideSize] = useState('w-full');
 
+  // 로그인 여부 확인
+  const token = useAuthStore((state) => state.token);
+  const isLoggedIn = !!token;
+
   useEffect(() => {
     const handleResize = () => {
       const screenWidth = window.innerWidth;
@@ -59,6 +70,14 @@ export default function CustomGatheringCardCarousel({
     );
   };
 
+  const handleLikeAction = (actionType: 'like' | 'unlike', gatheringId: number) => {
+    if (isLoggedIn) {
+      return actionType === 'like' ? onLike(gatheringId) : onUnlike(gatheringId);
+    }
+    onShowLoginModal();
+    return Promise.resolve();
+  };
+
   return (
     <div className="relative w-full">
       <div className="flex overflow-x-hidden">
@@ -75,7 +94,13 @@ export default function CustomGatheringCardCarousel({
         >
           {gatheringData.map((card) => (
             <div key={card.id} className={`flex-shrink-0 ${slideSize} mb-5 lg:min-w-[362px]`}>
-              <GatheringCard crewId={crewId} {...card} className="w-full" />
+              <GatheringCard
+                crewId={crewId}
+                {...card}
+                className="w-full"
+                onLike={() => handleLikeAction('like', card.id)}
+                onUnlike={() => handleLikeAction('unlike', card.id)}
+              />
             </div>
           ))}
         </div>