feat: 나눔 상세내역 > 신청자 정보 조회 API 연동

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 (
+    <div className="flex items-center mb-[20px]">
+      <p className="flex justify-center items-center w-[20px] h-[20px] rounded-full bg-gray0 body2-semibold text-gray5">
+        {idx}
+      </p>
+      <Image
+        src={returnProfileImg(data.profileImage)}
+        width={40}
+        height={40}
+        className="w-[40px] h-[40px] aspect-square mx-[8px]"
+        alt="신청자 프로필"
+      />
+      <p className="text-gray7 heading4-semibold">{data.nickname}</p>
+    </div>
+  );
+};
+
+export default ShareApplicantListItem;

src/components/organisms/ShareDetailAuthorBottomWrapper.tsx

@@ -9,35 +9,20 @@ 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' },
   { label: '나눔 중', value: 'proceeding' },
   { label: '나눔 완료', value: 'complete' },
 ];
 
-const MOCK_DATA_PARTICIPANTS = [
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-  '김지수',
-];
-
 const ShareDetailAuthorBottomWrapper: React.FC<{
+  id: string | string[] | undefined;
   curStatus: SortLabel;
   onChangeStatus: React.Dispatch<React.SetStateAction<SortLabel>>;
-}> = ({ 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 (
     <>
       <div className="fixed flex gap-[11px] w-full max-w-[480px] bottom-0 p-[20px] pb-[32px] bg-gray1">
@@ -117,9 +104,13 @@ const ShareDetailAuthorBottomWrapper: React.FC<{
           maxW="lg"
         >
           <ModalBody>
-            <div className="max-h-[300px] overflow-scroll px-[20px] py-[40px]">
-              {MOCK_DATA_PARTICIPANTS.map((ele, idx) => (
-                <div key={idx}>{ele}</div>
+            <div className="max-h-[300px] overflow-scroll px-[20px] pt-[40px] py-[20px]">
+              {applicants?.map((ele, idx) => (
+                <ShareApplicantListItem
+                  key={ele.nickname}
+                  idx={idx}
+                  data={ele}
+                />
               ))}
             </div>
             <div className="pt-[20px] pb-[32px]">

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];

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';

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<ShareApplicantData[]>(
+    queryKeys.SHARE_APPLICANTS(),
+    `/shares/${id}/applies`,
+  );
+
+  return data?.data;
+};
+
+export default useGetShareApplicants;

src/types/share/index.d.ts

@@ -18,3 +18,8 @@ interface ShareDetailData extends ShareData {
   userName: string;
   profileImage: ProfileEnum;
 }
+
+interface ShareApplicantData {
+  nickname: string;
+  profileImage: ProfileEnum;
+}