diff --git a/src/components/organisms/ShareApplicantListItem.tsx b/src/components/organisms/ShareApplicantListItem.tsx new file mode 100644 index 0000000..0fe7227 --- /dev/null +++ b/src/components/organisms/ShareApplicantListItem.tsx @@ -0,0 +1,27 @@ +import Image from 'next/image'; +import React from 'react'; +import type { ShareApplicantData } from '@/types/share'; +import { returnProfileImg } from '@/utils/returnProfileImg'; + +const ShareApplicantListItem: React.FC<{ + idx: number; + data: ShareApplicantData; +}> = ({ idx, data }) => { + return ( +
+

+ {idx} +

+ 신청자 프로필 +

{data.nickname}

+
+ ); +}; + +export default ShareApplicantListItem; diff --git a/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx b/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx index 9716547..66365e6 100644 --- a/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx +++ b/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx @@ -9,6 +9,8 @@ import { import { Button, RadioButtonField } from '@/components/atoms'; import React from 'react'; import { type SortLabel } from '@/types/common'; +import { useGetShareApplicants } from '@/hooks/queries/share'; +import ShareApplicantListItem from './ShareApplicantListItem'; const SHARE_STATUSES = [ { label: '나눔 신청', value: 'enroll' }, @@ -16,28 +18,11 @@ const SHARE_STATUSES = [ { label: '나눔 완료', value: 'complete' }, ]; -const MOCK_DATA_PARTICIPANTS = [ - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', - '김지수', -]; - const ShareDetailAuthorBottomWrapper: React.FC<{ + id: string | string[] | undefined; curStatus: SortLabel; onChangeStatus: React.Dispatch>; -}> = ({ curStatus, onChangeStatus }) => { +}> = ({ id, curStatus, onChangeStatus }) => { const { isOpen: isStatusModalOpen, onOpen: onStatusModalOpen, @@ -49,6 +34,8 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ onClose: onParticipantsModalClose, } = useDisclosure(); + const applicants = useGetShareApplicants({ id }); + return ( <>
@@ -117,9 +104,13 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ maxW="lg" > -
- {MOCK_DATA_PARTICIPANTS.map((ele, idx) => ( -
{ele}
+
+ {applicants?.map((ele, idx) => ( + ))}
diff --git a/src/components/organisms/ShareListItem.tsx b/src/components/organisms/ShareListItem.tsx index 518c39c..a08b24c 100644 --- a/src/components/organisms/ShareListItem.tsx +++ b/src/components/organisms/ShareListItem.tsx @@ -3,6 +3,7 @@ import { DotIcon, LocationIcon } from '@/assets/icons'; import Image from 'next/image'; import Link from 'next/link'; import React from 'react'; +import type { ShareData } from '@/types/share'; import dayjs from 'dayjs'; const ShareListItem: React.FC<{ @@ -43,7 +44,7 @@ const ShareListItem: React.FC<{ className="mx-[4px] mb-1" /> - {`${dayjs(data.shareDate).format('MM월 DD일')} ${data.shareTime.hour} : ${data.shareTime.minute}`} + {`${dayjs(data.shareDate).format('MM월 DD일')} ${data.shareTime}`}

diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index 5b5d336..948a213 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -25,6 +25,8 @@ export const queryKeys = { DELETE_FRIENDSHIP: () => ['deleteFriendship'], MY_INVITE_CODE: () => ['myInviteCode'], ADD_FRIENDSHIP: () => ['addFriendship'], + SHARE_DETAIL: () => ['shareDetail'], + SHARE_APPLICANTS: () => ['shareApplicants'], } as const; export type QueryKeys = (typeof queryKeys)[keyof typeof queryKeys]; diff --git a/src/hooks/queries/share/index.ts b/src/hooks/queries/share/index.ts index a6b209c..705877b 100644 --- a/src/hooks/queries/share/index.ts +++ b/src/hooks/queries/share/index.ts @@ -1 +1,3 @@ export { default as useGetShares } from './useGetShares'; +export { default as useGetShareDetail } from './useGetShareDetail'; +export { default as useGetShareApplicants } from './useGetShareApplicants'; diff --git a/src/hooks/queries/share/useGetShareApplicants.ts b/src/hooks/queries/share/useGetShareApplicants.ts new file mode 100644 index 0000000..2dff63d --- /dev/null +++ b/src/hooks/queries/share/useGetShareApplicants.ts @@ -0,0 +1,21 @@ +import type { ShareApplicantData } from '@/types/share'; +import { queryKeys } from '../queryKeys'; +import { useBaseQuery } from '../useBaseQuery'; + +const useGetShareApplicants = ({ + id, +}: { + id: string | string[] | undefined; +}) => { + if (typeof id !== 'string') { + return null; + } + const { data } = useBaseQuery( + queryKeys.SHARE_APPLICANTS(), + `/shares/${id}/applies`, + ); + + return data?.data; +}; + +export default useGetShareApplicants; diff --git a/src/hooks/queries/share/useGetShareDetail.ts b/src/hooks/queries/share/useGetShareDetail.ts new file mode 100644 index 0000000..2815d40 --- /dev/null +++ b/src/hooks/queries/share/useGetShareDetail.ts @@ -0,0 +1,17 @@ +import type { ShareDetailData } from '@/types/share'; +import { queryKeys } from '../queryKeys'; +import { useBaseQuery } from '../useBaseQuery'; + +const useGetShareDetail = ({ id }: { id: string | string[] | undefined }) => { + if (typeof id !== 'string') { + return null; + } + const { data } = useBaseQuery( + queryKeys.SHARE_DETAIL(), + `/shares/${id}`, + ); + + return data?.data; +}; + +export default useGetShareDetail; diff --git a/src/hooks/queries/share/useGetShares.ts b/src/hooks/queries/share/useGetShares.ts index f6a55ed..fbcbb5a 100644 --- a/src/hooks/queries/share/useGetShares.ts +++ b/src/hooks/queries/share/useGetShares.ts @@ -1,4 +1,6 @@ -import { type ShareStatusType, type ShareSortType } from '@/types/friendship'; +import type { ShareSortType, ShareStatusType } from '@/types/friendship'; + +import type { ShareData } from '@/types/share'; import { queryKeys } from '../queryKeys'; import { useBaseInfiniteQuery } from '../useBaseInfiniteQuery'; diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx index 7086c98..a4bd8b7 100644 --- a/src/pages/share/[id].tsx +++ b/src/pages/share/[id].tsx @@ -1,6 +1,7 @@ import { ClockIcon, DateIcon, LocationIcon } from '@/assets/icons'; import { ShareInfoRowItem, VerticalLabelValue } from '@/components/molecules'; import { Header, ShareDetailAuthorBottomWrapper } from '@/components/organisms'; +import { useGetShareDetail } from '@/hooks/queries/share'; import { type SortLabel } from '@/types/common'; import dayjs from 'dayjs'; import { type NextPage } from 'next'; @@ -8,18 +9,18 @@ import Image from 'next/image'; import { useRouter } from 'next/router'; import React, { useEffect, useState } from 'react'; -const MOCK_DATA = { - shareerName: '김지수', - image: '', - title: '사과받아갈사람선착순12345명', - ingredient: '사과', - fixedNum: 15, - useByDate: dayjs('2024-02-30'), - meetingDate: dayjs('2024-02-20'), - meetingTime: '14:00', - meetingLocation: '디지털시티역 8번출구 뜌레주르앞', - desc: '사과는역시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명사과는역체시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명은당연보장선착순1명사당연', -}; +// const MOCK_DATA = { +// shareerName: '김지수', +// image: '', +// title: '사과받아갈사람선착순12345명', +// ingredient: '사과', +// fixedNum: 15, +// useByDate: dayjs('2024-02-30'), +// meetingDate: dayjs('2024-02-20'), +// meetingTime: '14:00', +// meetingLocation: '디지털시티역 8번출구 뜌레주르앞', +// desc: '사과는역시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명사과는역체시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명은당연보장선착순1명사당연', +// }; const MOCK_DATA_IS_AUTHOR: boolean = true; @@ -27,10 +28,11 @@ const MOCK_DATA_SHARE_STATUS = { label: '나눔 신청', value: 'enroll' }; const ShareDetailPage: NextPage = () => { const router = useRouter(); - // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars const { id } = router.query; const [curStatus, setCurStatus] = useState(MOCK_DATA_SHARE_STATUS); + const data = useGetShareDetail({ id }); + useEffect(() => { if (window) { console.log(window.innerWidth); @@ -41,10 +43,10 @@ const ShareDetailPage: NextPage = () => { <>
- {MOCK_DATA.image ? ( + {data?.thumbNailImage ? ( detailImage {

- {MOCK_DATA_IS_AUTHOR ? '나의 나눔' : MOCK_DATA.shareerName} + {MOCK_DATA_IS_AUTHOR ? '나의 나눔' : data?.userName}

- {MOCK_DATA.title} + {data?.title}

- +
0 ? dayjs(data?.limitDate).diff(dayjs(), 'day') : 0}`} />

상세설명

-

- 사과는역시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명사과는역시청송사과맛있음은당연보장선착순1명은당연보장선착순1명사당연 -

+

{data?.content}

{MOCK_DATA_IS_AUTHOR ? ( diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index 252a67f..d4686d4 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -14,6 +14,7 @@ import Header from '@/components/organisms/Header'; import Link from 'next/link'; import type { NextPage } from 'next'; import { PlusIcon } from '@/assets/icons'; +import { type ShareData } from '@/types/share'; import ShareListItem from '@/components/organisms/ShareListItem'; import { SuspenseFallback } from '@/components/templates'; import { useGetShares } from '@/hooks/queries/share'; diff --git a/src/types/share/index.d.ts b/src/types/share/index.d.ts index b9ccb6c..bfa6b77 100644 --- a/src/types/share/index.d.ts +++ b/src/types/share/index.d.ts @@ -1,14 +1,11 @@ +import type { ProfileEnum } from '../common'; + interface ShareData { shareId: number; title: string; itemName: string; content: string; - shareTime: { - hour: number; - minute: number; - second: number; - nano: number; - }; + shareTime: string; shareDate: string; limitDate: string; limitPerson: number; @@ -16,3 +13,13 @@ interface ShareData { status: string; thumbNailImage: string; } + +interface ShareDetailData extends ShareData { + userName: string; + profileImage: ProfileEnum; +} + +interface ShareApplicantData { + nickname: string; + profileImage: ProfileEnum; +}