Feat/67/mypage

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

@@ -17,7 +17,7 @@ export default function ProfileCard({ data, onEdit }: ProfileCardProps) {
           <Profile size="full" imageUrl={data?.profileImageUrl ?? ''} />
         </figure>
         <div className="flex flex-col gap-2">
-          <p className="text-2xl font-semibold text-gray-900">{data?.nickname} 님, 안녕하세요</p>
+          <p className="text-2xl font-semibold text-gray-900">{data?.nickname} 님, 안녕하세요🙌</p>
           <dl className="flex text-base font-medium text-gray-700">
             <dt className="flex-shrink-0 flex-grow-0 basis-20">Email</dt>
             <dd className="flex-1">{data?.email}</dd>

src/app/(crew)/mypage/page.tsx

@@ -6,8 +6,11 @@ import { useInfiniteScroll } from '@/src/hooks/useInfiniteScroll';
 import ProfileCardContainer from '@/src/app/(crew)/mypage/_components/profile-card/container';
 import ReviewCardList from '@/src/components/common/review-list/review-card-list';
 import Tabs from '@/src/components/common/tab';
+import WritableGatheringCardList from '@/src/components/common/writable-gathering-card/writable-gathering-card-list';
 import { ReviewInformResponse } from '@/src/types/review';
+import { WritableGatheringCardInformResponse } from '@/src/types/writable-gathering-card';
 import { fetchMyReviewData } from '../../api/mock-api/review';
+import { fetchWritableGatheringData } from '../api/mock-api/writable-gathering';
 
 const mockData = {
   id: 1,
@@ -23,32 +26,55 @@ export default function MyPage() {
   ];
   const [currentTab, setCurrentTab] = useState(myPageTabs[0].id);
 
-  const { data, ref, isFetchingNextPage } = useInfiniteScroll<ReviewInformResponse>({
+  const {
+    data: reviewData,
+    ref: reviewRef,
+    isFetchingNextPage: isFetchingReviewNextPage,
+  } = useInfiniteScroll<ReviewInformResponse>({
     queryKey: ['review'],
     queryFn: ({ pageParam = 0 }) => fetchMyReviewData(pageParam, 3),
     getNextPageParam: (lastPage, allPages) =>
       lastPage.hasNextPage ? allPages.length + 1 : undefined,
   });
 
+  const {
+    data: gatheringData,
+    ref: gatheringRef,
+    isFetchingNextPage: isFetchingGatheringNextPage,
+  } = useInfiniteScroll<WritableGatheringCardInformResponse>({
+    queryKey: ['crew'],
+    queryFn: ({ pageParam = 0 }) => {
+      return fetchWritableGatheringData(pageParam, 3);
+    },
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.hasNextPage ? allPages.length + 1 : undefined,
+  });
+
   const renderTabContent = () => {
     // TODO : 리턴 값 컴포넌트로 교체
     switch (currentTab) {
       case 'my-review':
         return (
           <ReviewCardList
-            data={data}
-            ref={ref}
-            isFetchingNextPage={isFetchingNextPage}
+            data={reviewData}
+            ref={reviewRef}
+            isFetchingNextPage={isFetchingReviewNextPage}
             isMine
             clickable
           />
         );
       default:
-        return <div>작성 가능한 리뷰 리스트 컴포넌트</div>;
+        return (
+          <WritableGatheringCardList
+            data={gatheringData}
+            isFetchingNextPage={isFetchingGatheringNextPage}
+            ref={gatheringRef}
+          />
+        );
     }
   };
   return (
-    <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 shadow-bg md:px-8 lg:px-11">
+    <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11">
       <div className="lg:gap-4.5 flex flex-col gap-3 md:gap-4">
         <ProfileCardContainer data={mockData} />
       </div>

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

@@ -1,8 +1,10 @@
+import { useState } from 'react';
 import Image from 'next/image';
 import Profiles from '@/src/components/common/crew-list/profiles';
 import Button from '@/src/components/common/input/button';
 import { ParticipantType } from '@/src/types/writable-gathering-card';
 import person from '@/public/assets/icons/person.svg';
+import ReviewingModal from '../../my-page/reviewing-modal/reviewing-modal';
 
 interface WritableGatheringCardProps {
   id: number;
@@ -34,12 +36,13 @@ export default function WritableGatheringCard({
   participants,
   totalCount,
 }: WritableGatheringCardProps) {
+  const [isModalOpened, setIsModalOpened] = useState(false);
   const { year, month, day } = formatDateWithYear(dateTime);
 
   const profiles = participants.map((participant) => ({
     id: participant.id,
     nickname: participant.nickname,
-    profileImageUrl: participant.imageUrl,
+    imageUrl: participant.profileImageUrl,
   }));
 
   return (
@@ -67,10 +70,19 @@ export default function WritableGatheringCard({
           </div>
           <div className="text-sm font-medium text-gray-700">{`${year}년 ${month}월 ${day}일`}</div>
         </div>
-        <Button className="bg-blue-500 p-[6px_14px] text-base font-semibold text-white">
+        <Button
+          className="bg-blue-500 p-[6px_14px] text-base font-semibold text-white"
+          onClick={() => setIsModalOpened(true)}
+        >
           리뷰 작성하기
         </Button>
       </div>
+      <ReviewingModal
+        opened={isModalOpened}
+        close={() => {
+          setIsModalOpened(false);
+        }}
+      />
     </div>
   );
 }

src/mock/writable-gathering-data.ts

@@ -3,17 +3,17 @@ import { ParticipantType, WritableGatheringCardInform } from '@/src/types/writab
 export const Participants: ParticipantType[] = [
   {
     id: 1,
-    imageUrl: 'https://i.pinimg.com/564x/eb/12/71/eb127155bde0e2826b2b92c25456a622.jpg',
+    profileImageUrl: 'https://i.pinimg.com/564x/eb/12/71/eb127155bde0e2826b2b92c25456a622.jpg',
     nickname: '익명1',
   },
   {
     id: 2,
-    imageUrl: 'https://i.pinimg.com/564x/a5/b7/5a/a5b75a92e49cec6e67d2130179c7d84d.jpg',
+    profileImageUrl: 'https://i.pinimg.com/564x/a5/b7/5a/a5b75a92e49cec6e67d2130179c7d84d.jpg',
     nickname: '익명2',
   },
   {
     id: 3,
-    imageUrl: 'https://i.pinimg.com/736x/13/ad/a1/13ada1a3dbb6c57f8fec1c386ea31546.jpg',
+    profileImageUrl: 'https://i.pinimg.com/736x/13/ad/a1/13ada1a3dbb6c57f8fec1c386ea31546.jpg',
     nickname: '익명3',
   },
 ];

src/types/writable-gathering-card.d.ts

@@ -16,6 +16,6 @@ export type WritableGatheringCardInform = {
 
 export type ParticipantType = {
   id: number;
-  imageUrl: string;
+  profileImageUrl: string;
   nickname: string;
 };