Feat/60/my-gathering-page

mock.json

@@ -335,5 +335,40 @@
       "isConfirmed": true,
       "gatheringCount": 5
     }
+  ],
+  "gatheringDetail": [
+    {
+      "id": 1,
+      "title": "신나는 운동...즐거운..코딩..",
+      "introduce": "공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~",
+      "dateTime": "2024-10-29T00:32:12.306Z",
+      "location": "서울시 강남구 역삼동 오피스타워 3층",
+      "currentCount": 3,
+      "totalCount": 10,
+      "imageUrl": "https://www.dabur.com/Blogs/Doshas/Importance%20and%20Benefits%20of%20Yoga%201020x450.jpg",
+      "isLiked": false,
+      "isGatherCaptain": false,
+      "isParticipant": true,
+      "participants": [
+        {
+          "id": 1,
+          "profileImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUMrcQB5OJ-ETzPc6wHnjxjC-36__MGw3JcA&s",
+          "nickname": "럽윈즈올",
+          "email": "[email protected]"
+        },
+        {
+          "id": 2,
+          "profileImageUrl": "https://imgcdn.stablediffusionweb.com/2024/5/13/c0541236-e690-4dff-a27e-30a0355e5ea0.jpg",
+          "nickname": "모닝러너",
+          "email": "[email protected]"
+        },
+        {
+          "id": 3,
+          "profileImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUMrcQB5OJ-ETzPc6wHnjxjC-36__MGw3JcA&s",
+          "nickname": "동글동글이",
+          "email": "[email protected]"
+        }
+      ]
+    }
   ]
 }

src/_apis/gathering/gathering-apis.tsx

@@ -0,0 +1,11 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringDetailType } from '@/src/types/gathering-data';
+
+export function getGathering(): Promise<GatheringDetailType> {
+  return fetchApi<GatheringDetailType>('/gatheringDetail/1', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response); // TODO: data 추출
+}

src/_queries/gathering/gathering-queries.tsx

@@ -0,0 +1,11 @@
+import { getGathering } from '@/src/_apis/gathering/gathering-apis';
+import { transformKeysToCamel } from '@/src/utils/transform-keys';
+import { GatheringDetailType } from '@/src/types/gathering-data';
+
+export function useGetGatheringQuery() {
+  return {
+    queryKey: ['gatheringDetail'],
+    queryFn: getGathering,
+    select: (data: GatheringDetailType) => transformKeysToCamel(data),
+  };
+}

src/app/(crew)/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
     <>
       <Header />
       <div className="flex min-h-screen flex-col items-center bg-gray-50">
-        <main className="container flex min-h-screen max-w-pc flex-col md:shadow-bg">
+        <main className="container flex flex-1 min-h-screen max-w-pc flex-col md:shadow-bg">
           {children}
         </main>
       </div>

src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useMemo } from 'react';
+import { formatDate } from '@/src/utils/format-date';
+import ScheduledGatheringCard from '@/src/components/common/gathering-card/scheduled-gathering-card/container';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+interface GatheringListWithDateProps {
+  gatheringList: GatheringCardProps[];
+}
+
+export default function GatheringListWithDate({ gatheringList }: GatheringListWithDateProps) {
+  const gatheringListWithDateInfo = useMemo(() => {
+    return gatheringList.map((gathering, index) => {
+      const isNewDate =
+        index === 0 ||
+        formatDate(gathering.dateTime).date !== formatDate(gatheringList[index - 1].dateTime).date;
+      return { ...gathering, isNewDate };
+    });
+  }, [gatheringList]);
+
+  return (
+    <div className="m-4 md:mt-[32.5px]">
+      {gatheringListWithDateInfo.map((gathering) => (
+        <div key={gathering.id} className="md:flex">
+          <div className="relative w-1/6 md:border-r-2 md:border-gray-200">
+            {gathering.isNewDate && (
+              <div>
+                <div className="md:corner-dot" />
+                <div className="hidden flex-nowrap md:block">
+                  <div className="text-lg font-semibold">{formatDate(gathering.dateTime).date}</div>
+                  <div className="text-base font-medium text-gray-500">월요일</div>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className={`${gathering.isNewDate ? 'pb-' : 'p-'} flex-1 pb-6 md:pl-8`}>
+            <ScheduledGatheringCard key={gathering.id} data={gathering} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/app/(crew)/my-gathering/creation/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
+import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export default function CreationPage() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  useEffect(() => {}, [selectedDate]);
+  const creationGatheringList: GatheringCardProps[] = [
+    {
+      id: 1,
+      crewTitle: 'Power Pole',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-10-30T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+    {
+      id: 2,
+      crewTitle: '풀 엔 그레이스 스튜디오',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-10-30T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+    {
+      id: 3,
+      crewTitle: '풀 엔 그레이스 스튜디오',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-11-11T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+    {
+      id: 4,
+      crewTitle: '풀 엔 그레이스 스튜디오',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-11-21T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+  ];
+
+  return (
+    <div className="">
+      <div className="pl-4 md:pt-2">
+        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
+      </div>
+      <GatheringListWithDate gatheringList={creationGatheringList} />
+    </div>
+  );
+}
+function setState(arg0: Date) {
+  throw new Error('Function not implemented.');
+}

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

@@ -0,0 +1,10 @@
+import GatheringList from '@/src/components/gathering-list/gathering-list';
+import { gatheringData } from '@/src/mock/gathering-data';
+
+export default function FavoritePage() {
+  return (
+    <div className="md:mt-[45px]">
+      <GatheringList gatheringData={gatheringData} />
+    </div>
+  );
+}

src/app/(crew)/my-gathering/layout.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Button } from '@mantine/core';
+
+const buttonData = [
+  { id: 1, label: '참여한 약속', route: '/my-gathering/participation' },
+  { id: 2, label: '만든 약속', route: '/my-gathering/creation' },
+  { id: 3, label: '찜한 약속', route: '/my-gathering/favorite' },
+];
+
+const getSelectedButtonIndex = (currentPath: string) => {
+  return buttonData.findIndex(({ route }) => currentPath.endsWith(route.split('/').pop()!)) + 1;
+};
+
+export default function MyGatheringLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const currentPath = usePathname();
+
+  const [selectedButton, setSelectedButton] = useState(getSelectedButtonIndex(currentPath));
+
+  useEffect(() => {
+    const newIdx = getSelectedButtonIndex(currentPath);
+    setSelectedButton(newIdx);
+  }, [currentPath]);
+
+  return (
+    <div className="mt-4 md:mx-[46px] md:mt-[45px]">
+      <div className="m-4 grid grid-cols-3 gap-2 md:gap-4">
+        {buttonData.map(({ id, label, route }) => (
+          <Link key={id} href={route}>
+            <Button
+              className={`${id === selectedButton ? 'btn-filled' : 'btn-outlined'} w-full text-sm font-bold md:text-lg`}
+            >
+              {label}
+            </Button>
+          </Link>
+        ))}
+      </div>
+      {children}
+    </div>
+  );
+}

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

@@ -1,16 +1,6 @@
-'use client';
-
-import { useState } from 'react';
-import CalendarFilter from '@/src/components/common/input/calendar-filter';
-
-const toDoDates = [new Date('2024-10-12'), new Date('2024-10-15')];
+import { redirect } from 'next/navigation';
 
 export default function MyGatheringPage() {
-  const [date, setDate] = useState<Date>(new Date());
-
-  return (
-    <div className="container mx-auto my-0 max-w-pc px-5 lg:px-0">
-      <CalendarFilter value={date} toDoDates={toDoDates} onChange={setDate} />
-    </div>
-  );
+  redirect('/my-gathering/participation');
+  return null;
 }

src/app/(crew)/my-gathering/participation/page.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
+import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export default function ParticipationPage() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  useEffect(() => {}, [selectedDate]);
+  const creationGatheringList: GatheringCardProps[] = [
+    {
+      id: 1,
+      crewTitle: '풀 엔 그레이스 스튜디오',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-10-30T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+    {
+      id: 2,
+      crewTitle: '풀 엔 그레이스 스튜디오',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-10-30T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+    {
+      id: 3,
+      crewTitle: '풀 엔 그레이스 스튜디오',
+      crewMainLocation: '서울시',
+      crewSubLocation: '강남구 역삼동',
+      title: '가나다라마가나다라마가나다라마가',
+      dateTime: '2024-10-31T00:30',
+      currentCount: 8,
+      totalCount: 12,
+      imageUrl:
+        'https://images.unsplash.com/photo-1601758260892-a62c486ace97?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      isLiked: true,
+    },
+  ];
+
+  return (
+    <div className="">
+      <div className="pl-4 md:pt-2">
+        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
+      </div>
+      <GatheringListWithDate gatheringList={creationGatheringList} />
+    </div>
+  );
+}
+function setState(arg0: Date) {
+  throw new Error('Function not implemented.');
+}

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

@@ -1,4 +1,8 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useGetGatheringQuery } from '@/src/_queries/gathering/gathering-queries';
+import GatheringDetailModalContainer from '@/src/components/gathering-detail-modal/container';
+import { GatheringDetailType } from '@/src/types/gathering-data';
 import ScheduledGatheringCardPresenter from './presenter';
 
 interface ScheduledGatheringCardContainerProps {
@@ -19,19 +23,34 @@ interface ScheduledGatheringCardContainerProps {
 export default function ScheduledGatheringCardContainer({
   data,
 }: ScheduledGatheringCardContainerProps) {
+  const [isOpened, setIsOpened] = useState(false);
+  const { data: modalData } = useQuery<GatheringDetailType>(useGetGatheringQuery());
+
   const handleCardClick = useCallback(() => {
-    alert('카드 클릭됨'); // TODO: 모달 열기 로직 구현
+    setIsOpened(true);
+    // TODO: retry or refetch사용해서 useQuery부분 안으로 넣기
   }, []);
 
   const handleLikeToggle = useCallback(() => {
     alert('좋아요 토글됨'); // TODO: 좋아요 토글 로직 구현
   }, []);
 
   return (
-    <ScheduledGatheringCardPresenter
-      data={data}
-      onClick={handleCardClick}
-      onLikeToggle={handleLikeToggle}
-    />
+    <div>
+      <ScheduledGatheringCardPresenter
+        data={data}
+        onClick={handleCardClick}
+        onLikeToggle={handleLikeToggle}
+      />
+      {modalData && (
+        <GatheringDetailModalContainer
+          opened={isOpened}
+          close={() => {
+            setIsOpened(false);
+          }}
+          data={modalData}
+        />
+      )}
+    </div>
   );
 }