Merge pull request #72 from Bibumhada/feat/71-set-EndOfBottomSheet

추천 식당 리스트가 없을 경우 bottomSheet 띄우기

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;

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;
+};

src/components/common/modal/children/EndOfListAlertBottomSheet.tsx

@@ -0,0 +1,28 @@
+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<HTMLButtonElement> }) => {
+  const navigate = useNavigate();
+
+  const handleToLocationPage = () => {
+    navigate('/');
+  };
+
+  return (
+    <S.Layout>
+      <S.Logo src={logo} alt="오늘의 메뉴 로고" />
+      <S.Title>오늘 준비한 메뉴 추천은 여기까지에요!</S.Title>
+      <S.ButtonLayout>
+        <Button onClick={handleToLocationPage}>처음으로</Button>
+        <Button $variant="orange" onClick={onClickGetNewRestaurantList}>
+          이어서 고르기
+        </Button>
+      </S.ButtonLayout>
+    </S.Layout>
+  );
+};
+
+export default EndOfListAlertBottomSheet;

src/pages/RandomList/RandomList.tsx

@@ -12,9 +12,10 @@ 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';
+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({
@@ -69,6 +71,7 @@ const RandomList = () => {
       action: '마이너스_버튼',
       label: '음식점 추천 화면',
     });
+
     const resuggestOneOnSuccess = (data: any) => {
       setRandomList((prev) => {
         if (prev) {
@@ -81,7 +84,7 @@ const RandomList = () => {
       });
     };
     if (roomId && restaurantId) {
-      resuggestOneMutate({ roomId, restaurantId }, { onSuccess: resuggestOneOnSuccess });
+      resuggestOneMutate({ roomId, restaurantId }, { onSuccess: resuggestOneOnSuccess, onError: () => setIsAlertModalOn(true) });
     }
   };
 
@@ -96,7 +99,21 @@ const RandomList = () => {
       label: '음식점 추천 화면',
     });
     if (roomId) {
-      retryMutate({ roomId }, { onSuccess: retryOnSuccess });
+      retryMutate({ roomId }, { onSuccess: retryOnSuccess, onError: () => setIsAlertModalOn(true) });
+    }
+  };
+
+  const handleGetNewRestaurantList = () => {
+    if (roomId) {
+      retryListRoom(
+        { roomId },
+        {
+          onSuccess: (reloadedDataList) => {
+            setIsAlertModalOn(false);
+            setRandomList(reloadedDataList.restaurantResList);
+          },
+        },
+      );
     }
   };
 
@@ -122,7 +139,7 @@ const RandomList = () => {
       </S.Layout>
       {isAlertModalOn && (
         <BottomSheet handleModalClose={handleModalClose}>
-          <EndOfListAlert />
+          <EndOfListAlertBottomSheet onClickGetNewRestaurantList={handleGetNewRestaurantList} />
         </BottomSheet>
       )}
     </>