From c2ef52cf504064790bb145093110a951b012c73c Mon Sep 17 00:00:00 2001 From: eunchokang Date: Fri, 5 Jan 2024 20:41:48 +0900 Subject: [PATCH 1/3] rename: rename the EndOfListAlert -> EndOfListAlertBottomSheet --- ...lert.styled.tsx => EndOfListAlertBottomSheet.styled.tsx} | 0 .../{EndOfListAlert.tsx => EndOfListAlertBottomSheet.tsx} | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/components/common/modal/children/{EndOfListAlert.styled.tsx => EndOfListAlertBottomSheet.styled.tsx} (100%) rename src/components/common/modal/children/{EndOfListAlert.tsx => EndOfListAlertBottomSheet.tsx} (76%) diff --git a/src/components/common/modal/children/EndOfListAlert.styled.tsx b/src/components/common/modal/children/EndOfListAlertBottomSheet.styled.tsx similarity index 100% rename from src/components/common/modal/children/EndOfListAlert.styled.tsx rename to src/components/common/modal/children/EndOfListAlertBottomSheet.styled.tsx diff --git a/src/components/common/modal/children/EndOfListAlert.tsx b/src/components/common/modal/children/EndOfListAlertBottomSheet.tsx similarity index 76% rename from src/components/common/modal/children/EndOfListAlert.tsx rename to src/components/common/modal/children/EndOfListAlertBottomSheet.tsx index 4370d8d..d796c53 100644 --- a/src/components/common/modal/children/EndOfListAlert.tsx +++ b/src/components/common/modal/children/EndOfListAlertBottomSheet.tsx @@ -1,9 +1,9 @@ import React from 'react'; import logo from 'assets/images/logo.svg'; import Button from 'components/common/Button/Button'; -import * as S from './EndOfListAlert.styled'; +import * as S from './EndOfListAlertBottomSheet.styled'; -const EndOfListAlert = () => { +const EndOfListAlertBottomSheet = () => { return ( @@ -16,4 +16,4 @@ const EndOfListAlert = () => { ); }; -export default EndOfListAlert; +export default EndOfListAlertBottomSheet; From 288bc719932ab51e7a22aa6d863984bad71dc20a Mon Sep 17 00:00:00 2001 From: eunchokang Date: Fri, 5 Jan 2024 20:44:29 +0900 Subject: [PATCH 2/3] feat: set EndOfListAlertBottomSheet when restaurant List is exhausted --- src/pages/RandomList/RandomList.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/RandomList/RandomList.tsx b/src/pages/RandomList/RandomList.tsx index 57cbdcc..07572c3 100644 --- a/src/pages/RandomList/RandomList.tsx +++ b/src/pages/RandomList/RandomList.tsx @@ -12,9 +12,9 @@ import { useRetryMutation } from 'apis/query/useRetryMutation'; import { useResuggestOneMutation } from 'apis/query/useResuggestOneMutation'; import Error from 'pages/Error/Error'; import BottomSheet from 'components/common/modal/BottomSheet'; -import EndOfListAlert from 'components/common/modal/children/EndOfListAlert'; import ReactGA from 'react-ga4'; import { convertToBase64 } from 'util/convertToFromBase64'; +import EndOfListAlertBottomSheet from 'components/common/modal/children/EndOfListAlertBottomSheet'; const RandomListWrapper = () => { return ( @@ -69,6 +69,7 @@ const RandomList = () => { action: '마이너스_버튼', label: '음식점 추천 화면', }); + const resuggestOneOnSuccess = (data: any) => { setRandomList((prev) => { if (prev) { @@ -81,7 +82,7 @@ const RandomList = () => { }); }; if (roomId && restaurantId) { - resuggestOneMutate({ roomId, restaurantId }, { onSuccess: resuggestOneOnSuccess }); + resuggestOneMutate({ roomId, restaurantId }, { onSuccess: resuggestOneOnSuccess, onError: () => setIsAlertModalOn(true) }); } }; @@ -96,7 +97,7 @@ const RandomList = () => { label: '음식점 추천 화면', }); if (roomId) { - retryMutate({ roomId }, { onSuccess: retryOnSuccess }); + retryMutate({ roomId }, { onSuccess: retryOnSuccess, onError: () => setIsAlertModalOn(true) }); } }; @@ -122,7 +123,7 @@ const RandomList = () => { {isAlertModalOn && ( - + )} From c8bfb0ed675e1a355556b5050c28ea85af4469e6 Mon Sep 17 00:00:00 2001 From: eunchokang Date: Fri, 5 Jan 2024 21:39:45 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20EndOfListAlertBottomSheet=EB=82=B4?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/api/postRetryListRoomApi.tsx | 13 +++++++++++++ src/apis/query/useRetryListRoom.tsx | 9 +++++++++ .../children/EndOfListAlertBottomSheet.tsx | 15 ++++++++++++--- src/pages/RandomList/RandomList.tsx | 18 +++++++++++++++++- 4 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 src/apis/api/postRetryListRoomApi.tsx create mode 100644 src/apis/query/useRetryListRoom.tsx diff --git a/src/apis/api/postRetryListRoomApi.tsx b/src/apis/api/postRetryListRoomApi.tsx new file mode 100644 index 0000000..6052535 --- /dev/null +++ b/src/apis/api/postRetryListRoomApi.tsx @@ -0,0 +1,13 @@ +import { axiosInstance } from 'apis/base/instance'; + +interface RetryRoomApiParams { + roomId: string; +} + +const postRetryListRoomApi = async ({ roomId }: RetryRoomApiParams) => { + const response = await axiosInstance.post(`/api/v1/retry/${roomId}`); + + return response.data; +}; + +export default postRetryListRoomApi; diff --git a/src/apis/query/useRetryListRoom.tsx b/src/apis/query/useRetryListRoom.tsx new file mode 100644 index 0000000..b9524b1 --- /dev/null +++ b/src/apis/query/useRetryListRoom.tsx @@ -0,0 +1,9 @@ +import { useMutation } from '@tanstack/react-query'; +import postRetryListRoomApi from 'apis/api/postRetryListRoomApi'; + +export const useRetryListRoom = () => { + const mutation = useMutation({ + mutationFn: postRetryListRoomApi, + }); + return mutation; +}; diff --git a/src/components/common/modal/children/EndOfListAlertBottomSheet.tsx b/src/components/common/modal/children/EndOfListAlertBottomSheet.tsx index d796c53..3a6206b 100644 --- a/src/components/common/modal/children/EndOfListAlertBottomSheet.tsx +++ b/src/components/common/modal/children/EndOfListAlertBottomSheet.tsx @@ -2,15 +2,24 @@ import React from 'react'; import logo from 'assets/images/logo.svg'; import Button from 'components/common/Button/Button'; import * as S from './EndOfListAlertBottomSheet.styled'; +import { useNavigate } from 'react-router-dom'; + +const EndOfListAlertBottomSheet = ({ onClickGetNewRestaurantList }: { onClickGetNewRestaurantList: React.MouseEventHandler }) => { + const navigate = useNavigate(); + + const handleToLocationPage = () => { + navigate('/'); + }; -const EndOfListAlertBottomSheet = () => { return ( 오늘 준비한 메뉴 추천은 여기까지에요! - - + + ); diff --git a/src/pages/RandomList/RandomList.tsx b/src/pages/RandomList/RandomList.tsx index 07572c3..3438a13 100644 --- a/src/pages/RandomList/RandomList.tsx +++ b/src/pages/RandomList/RandomList.tsx @@ -15,6 +15,7 @@ import BottomSheet from 'components/common/modal/BottomSheet'; import ReactGA from 'react-ga4'; import { convertToBase64 } from 'util/convertToFromBase64'; import EndOfListAlertBottomSheet from 'components/common/modal/children/EndOfListAlertBottomSheet'; +import { useRetryListRoom } from 'apis/query/useRetryListRoom'; const RandomListWrapper = () => { return ( @@ -36,6 +37,7 @@ const RandomList = () => { } const { mutate: retryMutate } = useRetryMutation(); const { mutate: resuggestOneMutate } = useResuggestOneMutation(); + const { mutate: retryListRoom, data: reloadedDataList } = useRetryListRoom(); useEffect(() => { ReactGA.send({ @@ -101,6 +103,20 @@ const RandomList = () => { } }; + const handleGetNewRestaurantList = () => { + if (roomId) { + retryListRoom( + { roomId }, + { + onSuccess: (reloadedDataList) => { + setIsAlertModalOn(false); + setRandomList(reloadedDataList.restaurantResList); + }, + }, + ); + } + }; + return ( <> @@ -123,7 +139,7 @@ const RandomList = () => { {isAlertModalOn && ( - + )}