From ba0008391f59a09a333ed85ef35f9178ceeb9791 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Fri, 1 Mar 2024 23:31:19 +0900 Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20type=20import=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/pages/share/[id].tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx index 95cbbd4..0e1092e 100644 --- a/src/pages/share/[id].tsx +++ b/src/pages/share/[id].tsx @@ -1,13 +1,14 @@ 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'; +import React, { useEffect, useState } from 'react'; +import { ShareInfoRowItem, VerticalLabelValue } from '@/components/molecules'; + import Image from 'next/image'; +import type { NextPage } from 'next'; +import type { SortLabel } from '@/types/common'; +import dayjs from 'dayjs'; +import { useGetShareDetail } from '@/hooks/queries/share'; import { useRouter } from 'next/router'; -import React, { useEffect, useState } from 'react'; const MOCK_DATA_IS_AUTHOR: boolean = true; From ee7a0892304e48c7d8805f8aee80dec5d850d33e Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Fri, 1 Mar 2024 23:45:26 +0900 Subject: [PATCH 2/8] =?UTF-8?q?style:=20RadioButtonField=20component=20sty?= =?UTF-8?q?le=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/RadioButtonField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/atoms/RadioButtonField.tsx b/src/components/atoms/RadioButtonField.tsx index 242e0dc..1ecd77d 100644 --- a/src/components/atoms/RadioButtonField.tsx +++ b/src/components/atoms/RadioButtonField.tsx @@ -7,7 +7,7 @@ const RadioButtonField: React.FC<{ checked: boolean; }> = ({ label, onClick, checked }) => { return ( - From f55a9c992983eada6274c16c5417388f12c554a1 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 2 Mar 2024 00:41:00 +0900 Subject: [PATCH 3/8] chore: eslint @typescript-eslint/no-misused-promises off --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index 62dd04f..8d64621 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -17,5 +17,6 @@ module.exports = { 'prettier/prettier': ['error', { endOfLine: 'auto' }], '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-floating-promises': 'off', + '@typescript-eslint/no-misused-promises': 'off', }, }; From e7ee5643dec8945bcd785e7154efa962a81b2190 Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 2 Mar 2024 00:41:31 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20usePutShareStatus=20hook=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/queryKeys.ts | 1 + src/hooks/queries/share/usePutShareStatus.ts | 26 ++++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 src/hooks/queries/share/usePutShareStatus.ts diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index 7a65efa..d7f2a2d 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -27,6 +27,7 @@ export const queryKeys = { SHARE_APPLICANTS: () => ['shareApplicants'], UPLOAD: () => ['upload'], ADD_SHARE: () => ['addShare'], + MODIFY_SHARE_STATUS: () => ['modify_share_status'], } as const; export type QueryKeys = (typeof queryKeys)[keyof typeof queryKeys]; diff --git a/src/hooks/queries/share/usePutShareStatus.ts b/src/hooks/queries/share/usePutShareStatus.ts new file mode 100644 index 0000000..e84f9c9 --- /dev/null +++ b/src/hooks/queries/share/usePutShareStatus.ts @@ -0,0 +1,26 @@ +import type { ShareStatusType } from '@/types/friendship'; +import { queryClient } from '@/pages/_app'; +import { queryKeys } from '../queryKeys'; +import { useBaseMutation } from '../useBaseMutation'; + +const usePutShareStatus = ({ + id, + status, + onSuccessParam, +}: { + id: number; + status: ShareStatusType; + onSuccessParam: () => void; +}) => { + const onSuccess = () => { + onSuccessParam(); + void queryClient.invalidateQueries(); + }; + return useBaseMutation( + queryKeys.MODIFY_SHARE_STATUS(), + `/shares/${id}/status?updateShareStatusRequest=${status}`, + onSuccess, + 'PUT', + ); +}; +export default usePutShareStatus; From 2495c7e3ddce529066109109f85762bb2e9aa4ec Mon Sep 17 00:00:00 2001 From: hyeseon han Date: Sat, 2 Mar 2024 00:42:04 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=82=98=EB=88=94=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EB=B3=80=EA=B2=BD=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShareDetailAuthorBottomWrapper.tsx | 52 +++++++++++++----- src/hooks/queries/share/index.ts | 1 + src/hooks/queries/share/useGetShareDetail.ts | 4 +- src/pages/share/[id].tsx | 53 ++++++++++--------- src/types/share/index.d.ts | 6 ++- 5 files changed, 72 insertions(+), 44 deletions(-) diff --git a/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx b/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx index 0bc7959..7c7f8c0 100644 --- a/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx +++ b/src/components/organisms/ShareDetailAuthorBottomWrapper.tsx @@ -1,22 +1,30 @@ +import { Button, RadioButtonField } from '@/components/atoms'; import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; +import React, { useEffect, useState } from 'react'; +import { useGetShareApplicants, usePutShareStatus } from '@/hooks/queries/share'; -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'; +import type { ShareStatusType } from '@/types/friendship'; + +export interface ShareStatusKeyValue { + label: string; + value: ShareStatusType; +} -const SHARE_STATUSES = [ - { label: '나눔 신청', value: 'enroll' }, - { label: '나눔 중', value: 'proceeding' }, - { label: '나눔 완료', value: 'complete' }, +const SHARE_STATUSES: ShareStatusKeyValue[] = [ + { label: '나눔 신청', value: 'SHARE_START' }, + { label: '나눔 중', value: 'SHARE_IN_PROGRESS' }, + { label: '나눔 완료', value: 'SHARE_COMPLETE' }, ]; const ShareDetailAuthorBottomWrapper: React.FC<{ id: string | string[] | undefined; - curStatus: SortLabel; - onChangeStatus: React.Dispatch>; -}> = ({ id, curStatus, onChangeStatus }) => { + refetch: () => void; + curStatus: ShareStatusType; +}> = ({ id, refetch, curStatus }) => { + const [selectedStatus, setSelectedStatus] = useState( + SHARE_STATUSES.find((ele) => ele.value === curStatus) as ShareStatusKeyValue, + ); const { isOpen: isStatusModalOpen, onOpen: onStatusModalOpen, onClose: onStatusModalClose } = useDisclosure(); const { isOpen: isParticipantsModalOpen, @@ -25,6 +33,22 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ } = useDisclosure(); const applicants = useGetShareApplicants({ id }); + const modifyShareStatus = usePutShareStatus({ + id: Number(id), + status: selectedStatus.value as ShareStatusType, + onSuccessParam: refetch, + }); + + const onModifyShareStatus = () => { + onStatusModalClose(); + modifyShareStatus.mutate({}); + }; + + useEffect(() => { + const initialStatus = SHARE_STATUSES.find((ele) => ele.value === curStatus); + console.log(initialStatus); + setSelectedStatus(initialStatus as { label: string; value: ShareStatusType }); + }, []); return ( <> @@ -53,13 +77,13 @@ const ShareDetailAuthorBottomWrapper: React.FC<{ key={ele.value} label={ele.label} onClick={() => { - onChangeStatus(ele); + setSelectedStatus(ele); }} - checked={ele.value === curStatus.value} + checked={ele.value === selectedStatus.value} /> ))}
-
diff --git a/src/hooks/queries/share/index.ts b/src/hooks/queries/share/index.ts index 83f0f78..14f7288 100644 --- a/src/hooks/queries/share/index.ts +++ b/src/hooks/queries/share/index.ts @@ -3,3 +3,4 @@ export { default as useGetShareDetail } from './useGetShareDetail'; export { default as useGetShareApplicants } from './useGetShareApplicants'; export { default as usePostUpload } from './usePostUpload'; export { default as usePostShare } from './usePostShare'; +export { default as usePutShareStatus } from './usePutShareStatus'; diff --git a/src/hooks/queries/share/useGetShareDetail.ts b/src/hooks/queries/share/useGetShareDetail.ts index d902849..175eb3c 100644 --- a/src/hooks/queries/share/useGetShareDetail.ts +++ b/src/hooks/queries/share/useGetShareDetail.ts @@ -6,9 +6,9 @@ const useGetShareDetail = ({ id }: { id: string | string[] | undefined }) => { if (typeof id !== 'string') { return null; } - const { data } = useBaseQuery(queryKeys.SHARE_DETAIL(), `/shares/${id}`); + const { data, refetch } = useBaseQuery(queryKeys.SHARE_DETAIL(), `/shares/${id}`); - return data?.data; + return { data, refetch }; }; export default useGetShareDetail; diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx index 0e1092e..ffca321 100644 --- a/src/pages/share/[id].tsx +++ b/src/pages/share/[id].tsx @@ -1,40 +1,35 @@ import { ClockIcon, DateIcon, LocationIcon } from '@/assets/icons'; import { Header, ShareDetailAuthorBottomWrapper } from '@/components/organisms'; -import React, { useEffect, useState } from 'react'; import { ShareInfoRowItem, VerticalLabelValue } from '@/components/molecules'; import Image from 'next/image'; +import { Lottie } from '@/components/atoms'; import type { NextPage } from 'next'; -import type { SortLabel } from '@/types/common'; +import React from 'react'; import dayjs from 'dayjs'; import { useGetShareDetail } from '@/hooks/queries/share'; import { useRouter } from 'next/router'; -const MOCK_DATA_IS_AUTHOR: boolean = true; - -const MOCK_DATA_SHARE_STATUS = { label: '나눔 신청', value: 'enroll' }; - const ShareDetailPage: NextPage = () => { const router = useRouter(); const { id } = router.query; - const [curStatus, setCurStatus] = useState(MOCK_DATA_SHARE_STATUS); - const data = useGetShareDetail({ id }); + const shareDetail = useGetShareDetail({ id }); - useEffect(() => { - if (window) { - console.log(window.innerWidth); - } - }, []); + if (!shareDetail?.data) { + return ; + } + + const { data, refetch } = shareDetail; return ( <>
- {data?.thumbnailImage ? ( + {data.data?.thumbnailImage ? ( detailImage { )}
-

{MOCK_DATA_IS_AUTHOR ? '나의 나눔' : data?.userName}

-

{data?.title}

+

+ {data.data?.isCreatedByCurrentLoginUser ? '나의 나눔' : data.data?.nickname} +

+

{data.data?.title}

- +
- +
0 ? dayjs(data?.limitDate).diff(dayjs(), 'day') : 0}`} + value={`D-${dayjs(data.data?.limitDate).diff(dayjs(), 'day') > 0 ? dayjs(data.data?.limitDate).diff(dayjs(), 'day') : 0}`} />
- - - + + +

상세설명

-

{data?.content}

+

{data.data?.content}

- {MOCK_DATA_IS_AUTHOR ? ( - + {data.data?.isCreatedByCurrentLoginUser ? ( + ) : (
+
+ ); +}; + +export default ShareDetailFriendBottomWrapper; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index e97f17b..09ec9bd 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -15,3 +15,4 @@ export { default as FriendListItem } from './FriendListItem'; export { default as BulletNoticeBox } from './BulletNoticeBox'; export { default as SelectFridgeModal } from './SelectFridgeModal'; export { default as SelectFridgeBoard } from './SelectFridgeBoard'; +export { default as ShareDetailFriendBottomWrapper } from './ShareDetailFriendBottomWrapper'; diff --git a/src/pages/share/[id].tsx b/src/pages/share/[id].tsx index 2ffc85c..e8a96b6 100644 --- a/src/pages/share/[id].tsx +++ b/src/pages/share/[id].tsx @@ -1,5 +1,5 @@ import { ClockIcon, DateIcon, LocationIcon } from '@/assets/icons'; -import { Header, ShareDetailAuthorBottomWrapper } from '@/components/organisms'; +import { Header, ShareDetailAuthorBottomWrapper, ShareDetailFriendBottomWrapper } from '@/components/organisms'; import { Lottie, ShareStatusBadge } from '@/components/atoms'; import { ShareInfoRowItem, VerticalLabelValue } from '@/components/molecules'; @@ -85,11 +85,12 @@ const ShareDetailPage: NextPage = () => { {data.data?.isCreatedByCurrentLoginUser ? ( ) : ( -
- -
+ )} );