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/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/gathering-list-section.tsx

@@ -1,6 +1,12 @@
 'use client';
 
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetGatheringListQuery } from '@/src/_queries/detail/gathering-list-queries';
+import { ApiError } from '@/src/utils/api';
+import ConfirmModal from '@/src/components/common/modal/confirm-modal';
+import Toast from '@/src/components/common/toast';
 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({ message: `찜하기에 실패했습니다: ${apiError.message}`, type: 'error' });
+      }
+    }
+  };
+
+  const handleUnlike = async (gatheringId: number) => {
+    try {
+      await removeLike(gatheringId);
+    } catch (apiError) {
+      if (apiError instanceof ApiError) {
+        Toast({ message: `찜하기 해제에 실패했습니다: ${apiError.message}`, type: 'error' });
+      }
+    }
+  };
 
-  if (error) return <p>데이터를 불러오는 데 실패했습니다: {error.message}</p>;
+  const handleLoginRedirect = () => {
+    const currentPath = window.location.href;
+    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)/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

@@ -12,6 +12,8 @@ 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({ message: '찜 상태를 업데이트하는 데 실패했습니다.', type: 'error' });
+    }
   };
 
   const { data: gatheringData, error } = useGetGatheringDetailQuery(crewId, id);

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: 1,
     id: 1,
     title: '신나는 운동...즐거운..코딩..',
     introduce: '공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~',

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;
@@ -75,7 +86,25 @@ 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={() => {
+                  if (isLoggedIn) {
+                    return onLike(card.id);
+                  }
+                  onShowLoginModal(); // 로그인이 안 되어 있으면 모달 표시
+                  return Promise.resolve();
+                }}
+                onUnlike={() => {
+                  if (isLoggedIn) {
+                    return onUnlike(card.id);
+                  }
+                  onShowLoginModal(); // 로그인이 안 되어 있으면 모달 표시
+                  return Promise.resolve();
+                }}
+              />
             </div>
           ))}
         </div>