Merge branch 'develop' into feat/47-동적으로-roomId-받아오기-전체-페이지-연결

src/App.tsx

@@ -7,6 +7,7 @@ import { AppLayout } from 'styles/AppLayout';
 import { GlobalStyle } from 'styles/GlobalStyle.js';
 import Error from 'pages/Error/Error';
 import { RecoilRoot } from 'recoil';
+import Loading from 'pages/Loading/Loading';
 
 function App() {
   const queryClient = new QueryClient({
@@ -30,14 +31,14 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <GlobalStyle />
-      <RecoilRoot>
-        <AsyncBoundary errorFallback={<Error />} suspenseFallback={<>...loading</>}>
-          <ReactQueryDevtools initialIsOpen={false} />
-          <AppLayout>
+      <AppLayout>
+        <RecoilRoot>
+          <AsyncBoundary errorFallback={<Error />} suspenseFallback={<Loading message="로딩중" />}>
+            <ReactQueryDevtools initialIsOpen={false} />
             <AppRoutes />
-          </AppLayout>
-        </AsyncBoundary>
-      </RecoilRoot>
+          </AsyncBoundary>
+        </RecoilRoot>
+      </AppLayout>
     </QueryClientProvider>
   );
 }

src/apis/api/getPoll.tsx

@@ -2,8 +2,7 @@ import { axiosInstance } from 'apis/base/instance';
 
 const getPoll = async (roomId: string | undefined) => {
   const response = await axiosInstance.get(`/${roomId}`);
-  await new Promise((resolve) => setTimeout(resolve, 3000));
-  console.log('axios return@@@@ : ', response);
+  // await new Promise((resolve) => setTimeout(resolve, 2000));
   return response;
 };
 

src/apis/api/getRandomListApi.tsx

@@ -10,7 +10,6 @@ const getRandomListApi = async () => {
     longitude,
     latitude,
   });
-  // const response = await axiosInstance.get('/create');
   await new Promise((resolve) => setTimeout(resolve, 3000));
   return response;
 };

src/apis/api/postRandomListApi.tsx

@@ -9,7 +9,7 @@ const postRandomListApi = async ({ longitude, latitude }: RandomListApiParams) =
     longitude,
     latitude,
   });
-  // await new Promise((resolve) => setTimeout(resolve, 3000));
+  await new Promise((resolve) => setTimeout(resolve, 2000));
   return response;
 };
 

src/apis/api/postResuggestOneApi.tsx

@@ -6,7 +6,6 @@ interface ResuggestProps {
 }
 
 const postResuggestOneApi = async ({ roomId, restaurantId }: ResuggestProps) => {
-  console.log(roomId, restaurantId);
   const response = await postInstance.post(`/${roomId}/resuggest/${restaurantId}`);
   console.log(response);
   return response.data;

src/apis/api/postVoteApi.tsx

@@ -6,8 +6,8 @@ interface VoteApiParams {
 }
 
 const postVoteApi = async ({ roomId, voteList }: VoteApiParams) => {
-  console.log(roomId, voteList);
   const response = await postInstance.post(`${roomId}/vote`, { restaurantIdList: voteList });
+  await new Promise((resolve) => setTimeout(resolve, 2000));
   return response.data;
 };
 

src/apis/query/useGetResult.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getResult } from 'apis/api/getResult';
 
-const useGetResult = (roomId: number | string | undefined) => {
+const useGetResult = (roomId: string | undefined) => {
   const isFirstRun = useRef(true);
 
   const queryFn = async () => {

src/components/common/MenuCard/MenuCard.tsx

@@ -14,13 +14,14 @@ interface MenuCardProps {
     category: string;
     link: string;
     distance: number;
+    address: string;
   };
   isPoll?: boolean;
   handleClick: any;
 }
 
 const MenuCard = (props: MenuCardProps) => {
-  const { restaurantId, index, title, category, link, distance } = props.information;
+  const { restaurantId, index, title, category, link, distance, address } = props.information;
   const handleClick = props.handleClick;
   const categories = splitCategory(category);
   const [isSelected, setIsSelected] = useState(false);
@@ -51,7 +52,7 @@ const MenuCard = (props: MenuCardProps) => {
             <S.RestaurantTag key={i}>{`# ${category}`}</S.RestaurantTag>
           ))}
         </S.RestaurantTagsUl>
-        <S.RestaurantDistance>{`${distance}m | 주소어쩌고저쩌고 `}</S.RestaurantDistance>
+        <S.RestaurantDistance>{`${distance}m | ${address} `}</S.RestaurantDistance>
       </section>
       <S.ButtonsDiv onClick={handleIconClick}>
         <button>

src/components/common/ResultCard/ResultCard.tsx

@@ -10,6 +10,7 @@ import splitCategory from 'util/splitCategory';
 
 type ResultCardProps = {
   key: number;
+  roomId: string | undefined;
   winnerNum: number;
   rank: number;
   name: string;

src/pages/Location/Location.styled.ts

@@ -8,7 +8,6 @@ export const Layout = styled.div`
   padding: 176px 18px 25px;
   display: flex;
   flex-direction: column;
-  /* justify-content: space-between; */
 `;
 
 export const Title = styled.h1`
@@ -24,7 +23,6 @@ export const Form = styled.form`
   height: 100%;
   display: flex;
   flex-direction: column;
-  /* justify-content: space-between; */
 `;
 
 export const AddressInput = styled.input`

src/pages/Location/Location.tsx

@@ -7,7 +7,7 @@ import * as S from './Location.styled';
 import getAddressAPI from 'apis/api/getAddressApi';
 import { randomListData } from 'recoil/randomListData';
 import { roomIdData } from 'recoil/roomIdData';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { useRandomListMutation } from 'apis/query/useRandomListMutation';
 
 const Location: React.FC = () => {
@@ -19,7 +19,7 @@ const Location: React.FC = () => {
   const [buttonActive, setButtonActive] = useState<boolean>(false);
   const [latitude, setLatitude] = useState<string | null>(null);
   const [longitude, setLongitude] = useState<string | null>(null);
-  const [randomList, setRandomList] = useRecoilState(randomListData);
+  const setRandomList = useSetRecoilState(randomListData);
   const setRoomId = useSetRecoilState(roomIdData);
   const { mutate, isLoading } = useRandomListMutation();
 
@@ -29,10 +29,6 @@ const Location: React.FC = () => {
     }
   }, [address]);
 
-  useEffect(() => {
-    console.log(randomList);
-  }, [randomList]);
-
   useEffect(() => {
     if (latitude && longitude) {
       setButtonActive(true);

src/pages/OverallRanking/OverallRanking.styled.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.div`
   width: 100%;
-  height: 100%;
+  height: 100vh;
   background-color: var(--color-main-orange);
 `;
 

src/pages/OverallRanking/OverallRanking.tsx

@@ -11,6 +11,9 @@ import splitCategory from 'util/splitCategory';
 import AsyncBoundary from 'components/common/AsyncBoundary';
 import Loading from 'pages/Loading/Loading';
 import Error from 'pages/Error/Error';
+import { useRecoilState } from 'recoil';
+import { roomIdData } from 'recoil/roomIdData';
+import { randomListData } from 'recoil/randomListData';
 
 const OverallRankingWrapper = () => {
   return (
@@ -24,7 +27,8 @@ function OverallRanking() {
   const [IsModalOn, setIsModalOn] = useState<boolean>(false);
   const navigate = useNavigate();
   const { id: roomId } = useParams();
-
+  const [recoilRoomId, setRecoilRoomId] = useRecoilState(roomIdData);
+  const [randomList, setRandomList] = useRecoilState(randomListData);
   const resultData = useGetResult(roomId).voteOverallResultData?.data;
   console.log('resultData', resultData);
   const totalVote = resultData.total;
@@ -42,6 +46,12 @@ function OverallRanking() {
   };
 
   const handleRetry = () => {
+    if (recoilRoomId !== null) {
+      setRecoilRoomId(null);
+    }
+    if (randomList !== null) {
+      setRandomList([]);
+    }
     navigate('/');
   };
 
@@ -76,7 +86,6 @@ function OverallRanking() {
                 </button>
               </S.RestaurantItem>
             ))}
-
             <S.ButtonShare onClick={handleModalClick}>
               <img src={shareResult} alt="share result icon" />
               공유하기

src/pages/Poll/Poll.tsx

@@ -10,8 +10,6 @@ import ShareBottomSheet from 'components/common/modal/ShareBottomSheet';
 import icon_share from 'assets/icons/icon-share.svg';
 import { roomIdData } from 'recoil/roomIdData';
 import { useRecoilValue } from 'recoil';
-import BottomSheet from 'components/common/modal/BottomSheet';
-import EndOfListAlert from 'components/common/modal/children/EndOfListAlert';
 import { useVoteMutation } from 'apis/query/useVoteMutation';
 import Error from 'pages/Error/Error';
 
@@ -26,15 +24,18 @@ const PollWrapper = () => {
 const Poll = () => {
   const isSharedPage = useRecoilValue(roomIdData);
   const [isShareModalOn, setIsShareModalOn] = useState<boolean>(!!isSharedPage);
-  const [isAlertModalOn, setIsAlertModalOn] = useState<boolean>(false);
   const [clickedIndexArray, setClickedIndexArray] = useState<number[]>([]);
+  const [buttonActive, setButtonActive] = useState<boolean>(false);
   const navigate = useNavigate();
   const { id: roomId } = useParams();
   const { data } = useGetRoom(roomId);
   const { mutate, isLoading } = useVoteMutation();
 
   useEffect(() => {
     console.log(clickedIndexArray);
+    // if (clickedIndexArray.length) {
+    //   setButtonActive(true);
+    // }
   }, [clickedIndexArray]);
 
   const onSuccessFn = (data: any) => {
@@ -45,6 +46,7 @@ const Poll = () => {
   const handleSubmit = () => {
     if (clickedIndexArray && roomId) {
       mutate({ roomId, voteList: clickedIndexArray }, { onSuccess: onSuccessFn });
+      navigate(`/random-menu/${roomId}/result`);
     }
   };
 
@@ -54,9 +56,7 @@ const Poll = () => {
 
   const handleModalClose = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
-    event.preventDefault();
     setIsShareModalOn(false);
-    setIsAlertModalOn(false);
   };
 
   const handleClick = (restaurantId: number) => {
@@ -68,40 +68,51 @@ const Poll = () => {
       } else {
         updatedList.splice(i, 1);
       }
+      if (updatedList.length) {
+        setButtonActive(true);
+      } else {
+        setButtonActive(false);
+      }
       return updatedList.sort((a, b) => a - b);
     });
   };
 
   return (
     <>
-      <S.Layout>
-        <S.Title>오늘 당기는 메뉴는? 🤤</S.Title>
-        <S.CardUl>
-          {data?.data.restaurantResList.map((el: any, i: number) => (
-            <MenuCard
-              key={i}
-              information={{ restaurantId: el.id, index: i, title: el.title, category: el.category, link: el.link, distance: el.distance }}
-              isPoll={true}
-              handleClick={handleClick}
-            ></MenuCard>
-          ))}
-        </S.CardUl>
-        <S.ButtonLayout>
-          <Button onClick={handleShareClick} $style={{ width: '25%' }}>
-            <S.ShareImg src={icon_share} alt="공유하기 버튼" />
-          </Button>
-          <Button $variant={'orange'} onClick={handleSubmit}>
-            투표 공유하기
-          </Button>
-        </S.ButtonLayout>
-      </S.Layout>
-      {/* 모달은 포탈 써서 전역으로 나중에 바꿀게요!! */}
-      {isShareModalOn && <ShareBottomSheet handleModalClose={handleModalClose} />}
-      {isAlertModalOn && (
-        <BottomSheet handleModalClose={handleModalClose}>
-          <EndOfListAlert />
-        </BottomSheet>
+      {isLoading ? (
+        <Loading message={'투표 결과 가져오는중'} />
+      ) : (
+        <S.Layout>
+          <S.Title>오늘 당기는 메뉴는? 🤤</S.Title>
+          <S.CardUl>
+            {data?.data.restaurantResList.map((el: any, i: number) => (
+              <MenuCard
+                key={i}
+                information={{
+                  restaurantId: el.id,
+                  index: i,
+                  title: el.title,
+                  category: el.category,
+                  link: el.link,
+                  distance: el.distance,
+                  address: el.address,
+                }}
+                isPoll={true}
+                handleClick={handleClick}
+              ></MenuCard>
+            ))}
+          </S.CardUl>
+          <S.ButtonLayout>
+            <Button onClick={handleShareClick} $style={{ width: '25%' }}>
+              <S.ShareImg src={icon_share} alt="공유하기 버튼" />
+            </Button>
+            <Button $variant={buttonActive ? 'orange' : 'gray'} onClick={handleSubmit} disabled={!buttonActive}>
+              투표하고 결과보기
+            </Button>
+          </S.ButtonLayout>
+        </S.Layout>
       )}
+      {isShareModalOn && <ShareBottomSheet handleModalClose={handleModalClose} />}
     </>
   );
 };