Merge pull request #49 from Bibumhada/feat/47-동적으로-roomId-받아오기-전체-페이지-연결

동적으로 roomId 받아오기 및 전체 페이지 연결, 로딩중 및 에러 페이지 연결

src/components/common/ResultCard/ResultCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import * as S from './ResultCard.styled';
 import toDetail from 'assets/icons/icon-to-detail-black.svg';
 import soup from 'assets/icons/icon-soup.svg';
@@ -22,6 +23,7 @@ type ResultCardProps = {
 
 const ResultCard = (props: ResultCardProps) => {
   const categories = splitCategory(props.categories);
+  const { id: roomId } = useParams();
 
   const handleLinkClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
@@ -62,7 +64,7 @@ const ResultCard = (props: ResultCardProps) => {
       <S.VoteNumber>
         <span>{props.pollNumber}</span>/15명
       </S.VoteNumber>
-      <S.ToOverallRanking to={`/random-menu/${props.roomId}/result/overall-ranking`}>전체 순위 보기</S.ToOverallRanking>
+      <S.ToOverallRanking to={`/random-menu/${roomId}/result/overall-ranking`}>전체 순위 보기</S.ToOverallRanking>
     </S.RestaurantDetail>
   );
 };

src/pages/OverallRanking/OverallRanking.tsx

@@ -8,11 +8,22 @@ import shareResult from 'assets/icons/icon-share-resut.svg';
 import winner from 'assets/icons/icon-winner.svg';
 import { useGetResult } from 'apis/query/useGetResult';
 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';
 
-export default function OverallRanking() {
+const OverallRankingWrapper = () => {
+  return (
+    <AsyncBoundary errorFallback={<Error />} suspenseFallback={<Loading message={'투표 결과 가져오는 중'} />}>
+      <OverallRanking />
+    </AsyncBoundary>
+  );
+};
+
+function OverallRanking() {
   const [IsModalOn, setIsModalOn] = useState<boolean>(false);
   const navigate = useNavigate();
   const { id: roomId } = useParams();
@@ -66,10 +77,7 @@ export default function OverallRanking() {
                   </p>
                 </S.Ranking>
                 <S.RestaurantData>
-                  <div className="name-and-distance">
-                    <strong className="name">{item.title}</strong>
-                    <p className="distance">{item.distance}m</p>
-                  </div>
+                  <strong className="name">{item.title}</strong>
                   <div className="tags">{`# ${splitCategory(item.category)}`}</div>
                 </S.RestaurantData>
                 <S.Distance className="distance">{item.distance}m</S.Distance>
@@ -91,3 +99,5 @@ export default function OverallRanking() {
     </>
   );
 }
+
+export default OverallRankingWrapper;

src/pages/Poll/Poll.tsx

@@ -11,10 +11,11 @@ import icon_share from 'assets/icons/icon-share.svg';
 import { roomIdData } from 'recoil/roomIdData';
 import { useRecoilValue } from 'recoil';
 import { useVoteMutation } from 'apis/query/useVoteMutation';
+import Error from 'pages/Error/Error';
 
 const PollWrapper = () => {
   return (
-    <AsyncBoundary errorFallback={<>...error</>} suspenseFallback={<Loading message={'오늘의 메뉴 생성중'} />}>
+    <AsyncBoundary errorFallback={<Error />} suspenseFallback={<Loading message={'오늘의 메뉴 생성중'} />}>
       <Poll />
     </AsyncBoundary>
   );
@@ -37,8 +38,9 @@ const Poll = () => {
     // }
   }, [clickedIndexArray]);
 
-  const onSuccessFn = () => {
-    // navigate(`/random-menu/${roomId}/result`);
+  const onSuccessFn = (data: any) => {
+    navigate(`/random-menu/${roomId}/result`);
+    console.log(data);
   };
 
   const handleSubmit = () => {

src/pages/RandomList/RandomList.tsx

@@ -10,12 +10,13 @@ import { randomListData } from 'recoil/randomListData';
 import { roomIdData } from 'recoil/roomIdData';
 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';
 
 const RandomListWrapper = () => {
   return (
-    <AsyncBoundary errorFallback={<>...error</>} suspenseFallback={<Loading message={'음식점을 추천 중이에요'} />}>
+    <AsyncBoundary errorFallback={<Error />} suspenseFallback={<Loading message={'음식점을 추천 중이에요'} />}>
       <RandomList />
     </AsyncBoundary>
   );

src/pages/Result/Result.tsx

@@ -10,10 +10,21 @@ import Button from 'components/common/Button/Button';
 import ShareBottomSheet from 'components/common/modal/ShareBottomSheet';
 import shareResult from 'assets/icons/icon-share-result.svg';
 import retry from 'assets/icons/icon-retry-orange.svg';
+import AsyncBoundary from 'components/common/AsyncBoundary';
+import Loading from 'pages/Loading/Loading';
+import Error from 'pages/Error/Error';
 import { useRecoilState } from 'recoil';
 import { randomListData } from 'recoil/randomListData';
 import { roomIdData } from 'recoil/roomIdData';
 
+const ResultWrapper = () => {
+  return (
+    <AsyncBoundary errorFallback={<Error />} suspenseFallback={<Loading message={'투표 결과 가져오는 중'} />}>
+      <Result />
+    </AsyncBoundary>
+  );
+};
+
 const Result = () => {
   const [IsModalOn, setIsModalOn] = useState<boolean>(false);
   const [text, setText] = useState('1등 음식점을 확인해보세요 👀');
@@ -130,4 +141,4 @@ const Result = () => {
   );
 };
 
-export default Result;
+export default ResultWrapper;