From aad0cb542ff661d23e266bff481ded74d7ed865e Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 24 Feb 2024 18:24:02 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=82=98=EB=88=94=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EB=82=B4=EC=97=AD=20=EC=A1=B0=ED=9A=8C=20API=20?= =?UTF-8?q?=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/ShareListItem.tsx | 3 +- src/hooks/queries/queryKeys.ts | 1 + src/hooks/queries/share/index.ts | 1 + src/hooks/queries/share/useGetShareDetail.ts | 17 ++++++ src/pages/share/[id].tsx | 56 +++++++++++--------- src/types/share/index.d.ts | 14 ++--- 6 files changed, 59 insertions(+), 33 deletions(-) create mode 100644 src/hooks/queries/share/useGetShareDetail.ts 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..a12ed06 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -25,6 +25,7 @@ export const queryKeys = { DELETE_FRIENDSHIP: () => ['deleteFriendship'], MY_INVITE_CODE: () => ['myInviteCode'], ADD_FRIENDSHIP: () => ['addFriendship'], + SHARE_DETAIL: () => ['shareDetail'], } 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..54400ea 100644 --- a/src/hooks/queries/share/index.ts +++ b/src/hooks/queries/share/index.ts @@ -1 +1,2 @@ export { default as useGetShares } from './useGetShares'; +export { default as useGetShareDetail } from './useGetShareDetail'; 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/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/types/share/index.d.ts b/src/types/share/index.d.ts index b9ccb6c..e0c410d 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,8 @@ interface ShareData { status: string; thumbNailImage: string; } + +interface ShareDetailData extends ShareData { + userName: string; + profileImage: ProfileEnum; +} From 8a20c42e191fdd72028ed09eb630a094a81fcd72 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 24 Feb 2024 18:25:09 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=82=98=EB=88=94=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EB=82=B4=EC=97=AD=20>=20=EC=8B=A0=EC=B2=AD=EC=9E=90?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/ShareApplicantListItem.tsx | 27 ++++++++++++++ .../ShareDetailAuthorBottomWrapper.tsx | 35 +++++++------------ src/hooks/queries/queryKeys.ts | 1 + src/hooks/queries/share/index.ts | 1 + .../queries/share/useGetShareApplicants.ts | 21 +++++++++++ src/types/share/index.d.ts | 5 +++ 6 files changed, 68 insertions(+), 22 deletions(-) create mode 100644 src/components/organisms/ShareApplicantListItem.tsx create mode 100644 src/hooks/queries/share/useGetShareApplicants.ts 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; +} From 5a2c27cd782fd64eb55b943f7ea3740ee7d34983 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 24 Feb 2024 18:30:22 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EB=82=98=EB=88=94=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20API=20type=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/share/useGetShares.ts | 4 +++- src/pages/share/index.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) 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/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';