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/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index a12ed06..948a213 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -26,6 +26,7 @@ export const queryKeys = { 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 54400ea..705877b 100644 --- a/src/hooks/queries/share/index.ts +++ b/src/hooks/queries/share/index.ts @@ -1,2 +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/types/share/index.d.ts b/src/types/share/index.d.ts index e0c410d..bfa6b77 100644 --- a/src/types/share/index.d.ts +++ b/src/types/share/index.d.ts @@ -18,3 +18,8 @@ interface ShareDetailData extends ShareData { userName: string; profileImage: ProfileEnum; } + +interface ShareApplicantData { + nickname: string; + profileImage: ProfileEnum; +}