Feat/116/reviewable gathering list api

.vscode/settings.json

@@ -74,5 +74,6 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode" // TypeScript에서도 Prettier 사용
-  }
+  },
+  "git.ignoreLimitWarning": true
 }

package.json

@@ -25,15 +25,15 @@
     "@mantine/notifications": "^7.13.3",
     "@storybook/addon-actions": "^8.3.5",
     "@storybook/test": "^8.3.5",
-    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query": "^5.60.5",
     "@tanstack/react-query-next-experimental": "^5.59.19",
     "@vercel/speed-insights": "^1.1.0",
     "dayjs": "^1.11.13",
     "embla-carousel-react": "^7.1.0",
     "framer-motion": "^11.11.9",
-    "next": "14.2.15",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "^14.2.15",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-hook-form-persist": "^3.0.0",
     "react-intersection-observer": "^9.13.1",

src/_apis/gathering/reviewable-gathering.ts

@@ -0,0 +1,14 @@
+import { fetchApi } from '@/src/utils/api';
+import { PageableTypes } from '@/src/types/crew-card';
+import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
+
+export async function getReviewableGatherings(pageable: PageableTypes) {
+  const { page, size, sort = ['string'] } = pageable;
+  const response: { data: ReviewableGatheringCardInformResponse } = await fetchApi(
+    `/api/gatherings/reviewable?page=${page}&size=${size}&sort=${sort}`,
+  );
+  if (!response.data) {
+    throw new Error('Failed to get reviewable gatherings');
+  }
+  return response.data;
+}

src/_queries/my-gathering/reviewable-gathering-list.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { getReviewableGatherings } from '@/src/_apis/gathering/reviewable-gathering';
+import { PageableTypes } from '@/src/types/crew-card';
+import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
+
+export function useGetReviewableQuery({ pageable }: { pageable: PageableTypes }) {
+  const { size, sort = ['string'] } = pageable;
+  return {
+    queryKey: ['reviewableGathering'],
+    queryFn: ({ pageParam = 0 }) =>
+      getReviewableGatherings({ page: pageParam, size, sort }).then((response) => {
+        if (response === undefined || response === null) {
+          throw new Error('약속 목록을 불러오는 데 실패했습니다.');
+        }
+        return response;
+      }),
+    getNextPageParam: (
+      lastPage: ReviewableGatheringCardInformResponse,
+      allPages: ReviewableGatheringCardInformResponse[],
+    ) => (lastPage.hasNext ? allPages.length : undefined),
+  };
+}

src/app/(crew)/my-page/_components/profile-card/presenter.tsx

@@ -25,7 +25,7 @@ export default function ProfileCardPresenter({ data, onEdit, onDelete }: Profile
           >
             <Menu.Target>
               <div className="h-full w-full">
-                <Profile editable imageUrl={data?.profileImageUrl ?? ''} />
+                <Profile editable imageUrl={data?.profileImageUrl ?? ''} priority />
               </div>
             </Menu.Target>
             <Menu.Dropdown className="translate-x-16 translate-y-2 transform md:translate-x-24 md:translate-y-0 lg:translate-x-24 lg:translate-y-0">

src/app/(crew)/my-page/_components/review-tabs.tsx

@@ -3,7 +3,14 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Divider } from '@mantine/core';
+import { getReviewableGatherings } from '@/src/_apis/gathering/reviewable-gathering';
+import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
+import { fetchMyReviewData } from '@/src/app/api/mock-api/review';
+import ReviewCardList from '@/src/components/common/review-list/review-card-list';
 import Tabs from '@/src/components/common/tab';
+import ReviewableGatheringCardList from '@/src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list';
+import { ReviewInformResponse } from '@/src/types/review';
+import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
 
 export default function ReviewTabs() {
   const myPageTabs = [
@@ -17,11 +24,7 @@ export default function ReviewTabs() {
 
     const selectedTab = myPageTabs.find((tab) => tab.id === id);
     if (selectedTab?.route) {
-      try {
-        router.push(selectedTab.route);
-      } catch (error) {
-        throw error;
-      }
+      router.push(selectedTab.route);
     }
   };
 

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

@@ -1,3 +1,7 @@
-export default function ReviewableGatheringsPage() {
-  return <div>reviewable gathering list component</div>;
+'use client';
+
+import ReviewableGatheringCardList from '@/src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list';
+
+export default function ReviewableTab() {
+  return <ReviewableGatheringCardList />;
 }

src/components/common/crew-list/crew-card.tsx

@@ -49,7 +49,7 @@ export default function CrewCard({
     >
       {/* 썸네일 */}
       <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px]">
-        <Image fill objectFit="cover" alt={title} src={imageUrl} />
+        <Image fill style={{ objectFit: 'cover' }} alt={title} src={imageUrl} />
       </div>
 
       <div className="flex min-h-[203px] w-full flex-col justify-between p-6 sm:px-4 sm:pt-4">

src/components/common/crew-list/detail-crew-card.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import Image from 'next/image';
+import { Menu } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import Profiles from '@/src/components/common/crew-list/profiles';
+import ConfirmCancelModal from '@/src/components/common/modal/confirm-cancel-modal';
+import ProgressBar from '@/src/components/common/progress-bar/index';
+import { CrewMember } from '@/src/types/crew-card';
+import Check from '@/public/assets/icons/ic-check.svg';
+import KebabIcon from '@/public/assets/icons/kebab-btn.svg';
+
+interface DetailCrewCardProps {
+  data: {
+    id: number;
+    title: string;
+    mainLocation: string;
+    subLocation: string;
+    participantCount: number;
+    totalCount: number;
+    confirmed: boolean;
+    imageUrl: string;
+    totalGatheringCount: number;
+    crewMembers: CrewMember[];
+  };
+}
+
+export default function DetailCrewCard({ data }: DetailCrewCardProps) {
+  const {
+    id,
+    title,
+    mainLocation,
+    subLocation,
+    participantCount,
+    totalCount,
+    confirmed,
+    imageUrl,
+    totalGatheringCount,
+    crewMembers,
+  } = data;
+  const [confirmCancelOpened, { open: openConfirmCancel, close: closeConfirmCancel }] =
+    useDisclosure();
+  const [leaveCrewModalOpened, { open: openLeaveCrewModal, close: closeLeaveCrewModal }] =
+    useDisclosure();
+
+  const handleDelete = () => {
+    openConfirmCancel();
+  };
+
+  const handleLeaveCrew = () => {
+    openLeaveCrewModal();
+  };
+
+  const handleConfirmDelete = () => {
+    // TODO : 삭제 로직
+    closeConfirmCancel();
+  };
+
+  const handleConfirmLeaveCrew = () => {
+    // TODO : 탈퇴 로직
+    closeLeaveCrewModal();
+  };
+
+  return (
+    <div className="relative flex h-[508px] max-w-full flex-col overflow-hidden rounded-[14px] bg-white shadow-bg md:h-[270px] md:flex-row lg:h-[270px] lg:w-[1180px]">
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {/* //TODO: captin, crew인 경우 로직 수정 */}
+      {/* {isCaptain ? (
+        <Menu trigger="click" position="bottom-end" openDelay={100} closeDelay={400}>
+          <Menu.Target>
+            <div className="top-68 absolute right-6 top-[286px] cursor-pointer md:top-6 lg:top-6">
+              <Image src={KebabIcon} alt="더보기" width={20} height={20} />
+            </div>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item component="a" href={`/crew/detail/${id}/edit`} className="font-pretendard">
+              크루 수정하기
+            </Menu.Item>
+            <Menu.Item
+              type="button"
+              onClick={handleDelete}
+              className="font-pretendard text-red-600"
+            >
+              크루 삭제하기
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      ) : isCrew ? (
+        <Menu trigger="click" position="bottom-end" openDelay={100} closeDelay={400}>
+          <Menu.Target>
+            <div className="top-68 absolute right-6 top-[286px] md:top-6 lg:top-6">
+              <Image src={KebabIcon} alt="더보기" width={20} height={20} />
+            </div>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item type="button" onClick={handleLeaveCrew} className="font-pretendard">
+              크루 탈퇴하기
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      ) : null} */}
+
+      {/* 썸네일 */}
+      <div className="relative h-[270px] w-full md:w-[385px] lg:w-[540px]">
+        <Image fill style={{ objectFit: 'cover' }} alt={title} src={imageUrl} />
+      </div>
+
+      <div className="flex w-full flex-col justify-between p-6 sm:h-[238px] sm:px-4 sm:pt-4 md:h-[270px] md:flex-1 lg:h-[270px]">
+        {/* 메인 내용 */}
+        <div>
+          <div className="flex flex-col gap-1 lg:flex-row lg:items-center">
+            <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap pr-6 text-lg font-semibold lg:pr-0">
+              {title}
+            </span>
+            <span className="hidden lg:ml-2 lg:inline-block">|</span>
+            <span className="text-base font-medium">
+              {mainLocation} {subLocation}
+            </span>
+          </div>
+
+          <span className="text-sm font-semibold text-blue-600">
+            {`현재 ${totalGatheringCount}개의 약속이 개설되어 있습니다.`}
+          </span>
+        </div>
+        {/* 세부내용 */}
+        <div className="flex w-full gap-8 border-t-[2px] border-t-gray-200 pt-[31px]">
+          <div className="flex flex-grow flex-col items-start gap-2">
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <span className="text-sm font-medium">모집 정원</span>
+                <span className="text-sm font-semibold">{participantCount}명</span>
+                <div className="pl-2">
+                  <Profiles profiles={crewMembers} />
+                </div>
+              </div>
+
+              {confirmed && (
+                <span className="flex items-center gap-[1px] text-blue-600">
+                  <Image src={Check} alt="확인" width={24} height={24} />
+                  <span className="text-sm font-medium"> 개설 확정</span>
+                </span>
+              )}
+            </div>
+            <ProgressBar total={totalCount} current={participantCount} />
+            <div className="flex w-full justify-between">
+              <span className="text-sm font-medium text-gray-700">최소인원 2명</span>
+              <span className="text-sm font-medium text-gray-700">최대인원 {totalCount}명</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 삭제 확인 모달 */}
+      <ConfirmCancelModal
+        opened={confirmCancelOpened}
+        onClose={closeConfirmCancel}
+        onConfirm={handleConfirmDelete}
+      >
+        <p>정말로 크루를 삭제하시겠습니까?</p>
+      </ConfirmCancelModal>
+
+      {/* 탈퇴 확인 모달 */}
+      <ConfirmCancelModal
+        opened={leaveCrewModalOpened}
+        onClose={closeLeaveCrewModal}
+        onConfirm={handleConfirmLeaveCrew}
+      >
+        <p>정말로 크루에서 탈퇴하시겠습니까?</p>
+      </ConfirmCancelModal>
+    </div>
+  );
+}

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

@@ -59,8 +59,8 @@ export default function GatheringCardPresenter({
         <Image
           src={imageUrl}
           alt={title}
-          layout="fill"
-          objectFit="cover"
+          fill
+          style={{ objectFit: 'cover' }}
           className="rounded-t-lg"
         />
       </div>

src/components/common/profile/index.tsx

@@ -23,6 +23,7 @@ interface ProfileProps {
   editable?: boolean;
   isCaptain?: boolean;
   onClick?: () => void;
+  priority?: boolean;
 }
 
 export function Profile({
@@ -31,6 +32,7 @@ export function Profile({
   editable = false,
   isCaptain = false,
   onClick,
+  priority = false,
 }: ProfileProps) {
   let finalSize = size;
   if (editable) {
@@ -67,9 +69,10 @@ export function Profile({
           <Image
             src={imageUrl && imageUrl.trim() ? imageUrl : defaultImage}
             alt="프로필 이미지"
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{ objectFit: 'cover' }}
             className="rounded-full"
+            priority={priority}
           />
         </div>
       </button>