diff --git a/src/app/(crew)/mypage/_components/profile-card/presenter.tsx b/src/app/(crew)/mypage/_components/profile-card/presenter.tsx index 6c52ff38..fd1896ac 100644 --- a/src/app/(crew)/mypage/_components/profile-card/presenter.tsx +++ b/src/app/(crew)/mypage/_components/profile-card/presenter.tsx @@ -17,7 +17,7 @@ export default function ProfileCard({ data, onEdit }: ProfileCardProps) {
-

{data?.nickname} 님, 안녕하세요

+

{data?.nickname} 님, 안녕하세요🙌

Email
{data?.email}
diff --git a/src/app/(crew)/mypage/page.tsx b/src/app/(crew)/mypage/page.tsx index f1632c24..2c5eeac7 100644 --- a/src/app/(crew)/mypage/page.tsx +++ b/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({ + const { + data: reviewData, + ref: reviewRef, + isFetchingNextPage: isFetchingReviewNextPage, + } = useInfiniteScroll({ 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({ + 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 ( ); default: - return
작성 가능한 리뷰 리스트 컴포넌트
; + return ( + + ); } }; return ( -
+
diff --git a/src/components/common/writable-gathering-card/writable-gathering-card.tsx b/src/components/common/writable-gathering-card/writable-gathering-card.tsx index 9613716f..ff616908 100644 --- a/src/components/common/writable-gathering-card/writable-gathering-card.tsx +++ b/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({
{`${year}년 ${month}월 ${day}일`}
-
+ { + setIsModalOpened(false); + }} + /> ); } diff --git a/src/mock/writable-gathering-data.ts b/src/mock/writable-gathering-data.ts index 44b70ba9..d27eed7e 100644 --- a/src/mock/writable-gathering-data.ts +++ b/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', }, ]; diff --git a/src/types/writable-gathering-card.d.ts b/src/types/writable-gathering-card.d.ts index 7233d589..709141a4 100644 --- a/src/types/writable-gathering-card.d.ts +++ b/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; };