From 8aa0526cf9bbd22cf91ac81a9700f5c4bfa892e9 Mon Sep 17 00:00:00 2001 From: gahyeon Date: Fri, 16 Aug 2024 11:14:19 +0900 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=EB=82=B4=20=EC=9B=8C=EC=BC=80?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=AA=A9=EB=A1=9D=20=ED=95=84=ED=84=B0?= =?UTF-8?q?=EB=A7=81=20=EB=B0=8F=20=EC=A0=95=EB=A0=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(with-layout)/mypage/wk-history/page.tsx | 42 ++++++++++++++----- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx index 816b0e9b..649373fe 100644 --- a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx +++ b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx @@ -1,12 +1,11 @@ 'use client'; -import React, { useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import dayjs from 'dayjs'; import { usePatchWktStatusMutation } from '@/_hooks/user/usePatchWktStatusMutation'; import UserFilteringSectionContainer from '@/_components/user/common/containers/UserFilteringSectionContainer'; import UserStateFilteringContainer from '@/_components/user/common/containers/UserStateFilteringContainer'; -import UserPlaceFilteringContainer from '@/_components/user/common/containers/UserPlaceFilteringContainer'; import WorkationCard from '@/_components/user/mypage/UserWktCard'; import { useGetMyWktHistoryQuery } from '@/_hooks/user/useGetMyWktHistoryQuery'; import UserWktCancelModal from '@/_components/user/mypage/UserWktCancelModal'; @@ -15,6 +14,8 @@ import { useDeleteWktApplyMutation } from '@/_hooks/user/useDeleteWktApplyMutati import { useSession } from 'next-auth/react'; import UserLoading from '@/_components/user/userLoading'; import NetworkError from '@/_components/common/networkError'; +import UserDatePickerContainer from '@/_components/user/common/containers/UserDatePickerContainer'; +import { DatePickerTagType } from '@/_types/commonType'; const UserWkHistoryPage = () => { const router = useRouter(); @@ -43,9 +44,9 @@ const UserWkHistoryPage = () => { const [isFilteringSectionOpen, setIsFilteringSectionOpen] = useState< 'FILTER' | 'ORDER' | null >(null); - const [selectedState, setSelectedState] = useState('ALL'); + const [selectedState, setSelectedState] = useState(''); const [selectedOrder, setSelectedOrder] = useState('createdAt,DESC'); - const [selectedSpace, setSelectedSpace] = useState(['양양 쏠비치']); + const [selectedTag, setSelectedTag] = useState('ALL'); const [selectedWorkationId, setSelectedWorkationId] = useState( null, ); @@ -60,7 +61,7 @@ const UserWkHistoryPage = () => { >(null); const { data, isLoading, isError } = useGetMyWktHistoryQuery({ - // statuses: param.type.join(','), + statuses: param.type.join(','), startDate: startDate ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss') : undefined, @@ -140,6 +141,22 @@ const UserWkHistoryPage = () => { setConfirmModalType(null); }; + const updateParam = useCallback(() => { + setParam((prev) => ({ + ...prev, + type: selectedState ? [selectedState] : prev.type, + order: selectedOrder, + startDate: startDate + ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss') + : null, + endDate: endDate ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') : null, + })); + }, [selectedState, selectedOrder, startDate, endDate]); + + useEffect(() => { + updateParam(); + }, [selectedState, selectedOrder, startDate, endDate, updateParam]); + return (
@@ -155,16 +172,19 @@ const UserWkHistoryPage = () => { isFilterOpen: isFilteringSectionOpen === 'FILTER', filterChildren: ( <> + setSelectedTag(tag)} + startDate={startDate} + setStartDate={setStartDate} + endDate={endDate} + setEndDate={setEndDate} + /> - ), onRefresh: () => {}, @@ -194,7 +214,7 @@ const UserWkHistoryPage = () => { ) ) : data.pageInfo.totalElements <= 0 ? ( - +

내역이 존재하지 않습니다

) : ( data?.applyInfoList.map((wkt) => ( Date: Fri, 16 Aug 2024 13:15:59 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81=20refre?= =?UTF-8?q?shHandler=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(with-layout)/mypage/wk-history/page.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx index 649373fe..fc6df062 100644 --- a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx +++ b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx @@ -153,6 +153,24 @@ const UserWkHistoryPage = () => { })); }, [selectedState, selectedOrder, startDate, endDate]); + const refreshHandler = () => { + setParam({ + order: 'DESC', + type: [ + 'APPLIED', + 'RAFFLE_WAIT', + 'NO_WINNING', + 'CONFIRM_WAIT', + 'CANCEL', + 'CONFIRM', + 'WAIT', + 'VISITED', + ], + }); + setStartDate(null); + setEndDate(null); + }; + useEffect(() => { updateParam(); }, [selectedState, selectedOrder, startDate, endDate, updateParam]); @@ -187,7 +205,7 @@ const UserWkHistoryPage = () => { /> ), - onRefresh: () => {}, + onRefresh: refreshHandler, }} orderOption={{ onClickOrder: () => { From 104db5722cf2273cf675f0576fd470ed9757340a Mon Sep 17 00:00:00 2001 From: gahyeon Date: Fri, 16 Aug 2024 13:22:27 +0900 Subject: [PATCH 3/7] =?UTF-8?q?design:=20empty=20=EB=AC=B8=EA=B5=AC=20css?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(route)/(user)/(with-layout)/mypage/wk-history/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx index fc6df062..ff6515a0 100644 --- a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx +++ b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx @@ -232,7 +232,9 @@ const UserWkHistoryPage = () => { ) ) : data.pageInfo.totalElements <= 0 ? ( -

내역이 존재하지 않습니다

+

+ 내역이 존재하지 않습니다 +

) : ( data?.applyInfoList.map((wkt) => ( Date: Fri, 16 Aug 2024 13:25:42 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EC=A3=BC=EC=84=9D=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx index ff6515a0..1789f07b 100644 --- a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx +++ b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx @@ -253,7 +253,7 @@ const UserWkHistoryPage = () => { endDate={wkt.endDate} bettingPoint={wkt.bettingPoint} applyStatusType={wkt.applyStatusType} - waitingNumber={wkt.waitNumber} // 수정 필요 + waitingNumber={wkt.waitNumber} onClick={() => handleCardClick(wkt.applyStatusType, wkt.wktId)} /> )) From 14ffdb52f41ce74499af4583c121c78950016dac Mon Sep 17 00:00:00 2001 From: gahyeon Date: Fri, 16 Aug 2024 15:33:30 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=EC=9B=8C=EC=BC=80=EC=9D=B4=EC=85=98?= =?UTF-8?q?=20=EC=8B=A0=EC=B2=AD=20=EB=82=B4=EC=97=AD=EC=97=90=20=EB=AC=B4?= =?UTF-8?q?=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(with-layout)/mypage/wk-history/page.tsx | 85 +++++++++++-------- .../_hooks/user/useGetMyWktHistoryQuery.ts | 19 +++-- 2 files changed, 63 insertions(+), 41 deletions(-) diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx index 1789f07b..26e271e5 100644 --- a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx +++ b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useRouter } from 'next/navigation'; import dayjs from 'dayjs'; +import InfiniteScroll from 'react-infinite-scroller'; import { usePatchWktStatusMutation } from '@/_hooks/user/usePatchWktStatusMutation'; import UserFilteringSectionContainer from '@/_components/user/common/containers/UserFilteringSectionContainer'; import UserStateFilteringContainer from '@/_components/user/common/containers/UserStateFilteringContainer'; @@ -21,7 +22,6 @@ const UserWkHistoryPage = () => { const router = useRouter(); const session = useSession(); const accountId = String(session.data?.accountId || ''); - const [currentPage, setCurrentPage] = useState(1); const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); const [param, setParam] = useState<{ @@ -60,18 +60,21 @@ const UserWkHistoryPage = () => { | null >(null); - const { data, isLoading, isError } = useGetMyWktHistoryQuery({ - statuses: param.type.join(','), - startDate: startDate - ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss') - : undefined, - endDate: endDate ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') : undefined, - pageParam: { - page: currentPage, - size: 10, - sort: `createdAt,${param.order}`, - }, - }); + const { data, isLoading, isError, fetchNextPage, hasNextPage } = + useGetMyWktHistoryQuery({ + statuses: param.type.join(','), + startDate: startDate + ? dayjs(startDate).format('YYYY-MM-DDTHH:mm:ss') + : undefined, + endDate: endDate + ? dayjs(endDate).format('YYYY-MM-DDTHH:mm:ss') + : undefined, + pageable: { + page: 1, + size: 10, + sort: param.order, + }, + }); const { mutate: patchWktStatus } = usePatchWktStatusMutation({ wktId: selectedWorkationId || 0, @@ -231,32 +234,44 @@ const UserWkHistoryPage = () => { ) : ( ) - ) : data.pageInfo.totalElements <= 0 ? ( + ) : data.pages.length === 0 || + data.pages[0].applyInfoList.length <= 0 ? (

내역이 존재하지 않습니다

) : ( - data?.applyInfoList.map((wkt) => ( - handleCardClick(wkt.applyStatusType, wkt.wktId)} - /> - )) + fetchNextPage()} + hasMore={hasNextPage} + loader={} + useWindow + > + {data.pages.map((page) => + page.applyInfoList.map((wkt) => ( + + handleCardClick(wkt.applyStatusType, wkt.wktId) + } + /> + )), + )} + )}
diff --git a/src/app/_hooks/user/useGetMyWktHistoryQuery.ts b/src/app/_hooks/user/useGetMyWktHistoryQuery.ts index d41ebe53..8ddbd106 100644 --- a/src/app/_hooks/user/useGetMyWktHistoryQuery.ts +++ b/src/app/_hooks/user/useGetMyWktHistoryQuery.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; import { userApplyListSchema } from '@/_types/adminType'; import api from '../Axios'; @@ -8,26 +8,26 @@ export const useGetMyWktHistoryQuery = ({ startDate, endDate, statuses, - pageParam, + pageable, }: { startDate?: string; endDate?: string; statuses?: string; - pageParam: { + pageable: { page: number; size: number; sort?: string; }; }) => { - return useQuery({ + return useInfiniteQuery({ queryKey: [ useGetMyWktHistoryQueryKey, statuses, startDate, endDate, - pageParam, + pageable, ], - queryFn: async () => { + queryFn: async ({ pageParam = pageable }) => { const res = await api.get(`/api/apply/my`, { params: { startDate, @@ -38,5 +38,12 @@ export const useGetMyWktHistoryQuery = ({ }); return userApplyListSchema.parse(res.data.data); }, + initialPageParam: { page: 1, size: 10 }, + getNextPageParam: (lastPage) => { + return lastPage.pageInfo.totalElements === 0 || + lastPage.pageInfo.totalPages - 1 === lastPage.pageInfo.pageNum + ? undefined + : { page: lastPage.pageInfo.pageNum + 2, size: pageable.size }; + }, }); }; From ad6e1e59eafe10c157a3403fe835122f9326e161 Mon Sep 17 00:00:00 2001 From: gahyeon Date: Fri, 16 Aug 2024 16:24:37 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20sort=20=EC=A0=81=EC=9A=A9=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(with-layout)/mypage/wk-history/page.tsx | 2 +- src/app/_hooks/user/useGetMyWktHistoryQuery.ts | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx index 26e271e5..f0c21f76 100644 --- a/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx +++ b/src/app/(route)/(user)/(with-layout)/mypage/wk-history/page.tsx @@ -72,7 +72,7 @@ const UserWkHistoryPage = () => { pageable: { page: 1, size: 10, - sort: param.order, + sort: selectedOrder, }, }); diff --git a/src/app/_hooks/user/useGetMyWktHistoryQuery.ts b/src/app/_hooks/user/useGetMyWktHistoryQuery.ts index 8ddbd106..3b1358a9 100644 --- a/src/app/_hooks/user/useGetMyWktHistoryQuery.ts +++ b/src/app/_hooks/user/useGetMyWktHistoryQuery.ts @@ -16,7 +16,7 @@ export const useGetMyWktHistoryQuery = ({ pageable: { page: number; size: number; - sort?: string; + sort: string; }; }) => { return useInfiniteQuery({ @@ -28,22 +28,29 @@ export const useGetMyWktHistoryQuery = ({ pageable, ], queryFn: async ({ pageParam = pageable }) => { + const { page, size, sort } = pageable; const res = await api.get(`/api/apply/my`, { params: { startDate, endDate, statuses, - ...pageParam, + page, + size, + sort, }, }); return userApplyListSchema.parse(res.data.data); }, - initialPageParam: { page: 1, size: 10 }, + initialPageParam: { page: 1, size: 10, sort: 'createdAt,DESC' }, getNextPageParam: (lastPage) => { return lastPage.pageInfo.totalElements === 0 || lastPage.pageInfo.totalPages - 1 === lastPage.pageInfo.pageNum ? undefined - : { page: lastPage.pageInfo.pageNum + 2, size: pageable.size }; + : { + page: lastPage.pageInfo.pageNum + 2, + size: pageable.size, + sort: pageable.sort, + }; }, }); }; From 1ecde51277be6f46113982bc57416e9048084320 Mon Sep 17 00:00:00 2001 From: gahyeon Date: Sat, 17 Aug 2024 07:53:13 +0900 Subject: [PATCH 7/7] =?UTF-8?q?design:=20WorkationCard=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20margin=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/user/mypage/UserWktCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/user/mypage/UserWktCard.tsx b/src/app/_components/user/mypage/UserWktCard.tsx index a0e73740..d5307e83 100644 --- a/src/app/_components/user/mypage/UserWktCard.tsx +++ b/src/app/_components/user/mypage/UserWktCard.tsx @@ -122,7 +122,7 @@ const WorkationCard = ({ applyStatusType === 'VISITED' && reviewId !== null; return ( -
+