diff --git a/src/App.tsx b/src/App.tsx
index 30164ca..c69ade0 100644
--- a/src/App.tsx
+++ b/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 (
-
- } suspenseFallback={<>...loading>}>
-
-
+
+
+ } suspenseFallback={}>
+
-
-
-
+
+
+
);
}
diff --git a/src/apis/api/getPoll.tsx b/src/apis/api/getPoll.tsx
index 4909c09..f449fa7 100644
--- a/src/apis/api/getPoll.tsx
+++ b/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;
};
diff --git a/src/apis/api/getRandomListApi.tsx b/src/apis/api/getRandomListApi.tsx
index c6332b4..6920816 100644
--- a/src/apis/api/getRandomListApi.tsx
+++ b/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;
};
diff --git a/src/apis/api/postRandomListApi.tsx b/src/apis/api/postRandomListApi.tsx
index 3434f25..7427c71 100644
--- a/src/apis/api/postRandomListApi.tsx
+++ b/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;
};
diff --git a/src/apis/api/postResuggestOneApi.tsx b/src/apis/api/postResuggestOneApi.tsx
index 786d103..c8e8b69 100644
--- a/src/apis/api/postResuggestOneApi.tsx
+++ b/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;
diff --git a/src/apis/api/postVoteApi.tsx b/src/apis/api/postVoteApi.tsx
index f752eca..7c27569 100644
--- a/src/apis/api/postVoteApi.tsx
+++ b/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;
};
diff --git a/src/apis/query/useGetResult.tsx b/src/apis/query/useGetResult.tsx
index db3975e..8582fec 100644
--- a/src/apis/query/useGetResult.tsx
+++ b/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 () => {
diff --git a/src/components/common/MenuCard/MenuCard.tsx b/src/components/common/MenuCard/MenuCard.tsx
index e4dfde6..5202009 100644
--- a/src/components/common/MenuCard/MenuCard.tsx
+++ b/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) => {
{`# ${category}`}
))}
- {`${distance}m | 주소어쩌고저쩌고 `}
+ {`${distance}m | ${address} `}
))}
-
공유하기
diff --git a/src/pages/Poll/Poll.tsx b/src/pages/Poll/Poll.tsx
index 72b6ccb..b17d4f9 100644
--- a/src/pages/Poll/Poll.tsx
+++ b/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,8 +24,8 @@ const PollWrapper = () => {
const Poll = () => {
const isSharedPage = useRecoilValue(roomIdData);
const [isShareModalOn, setIsShareModalOn] = useState(!!isSharedPage);
- const [isAlertModalOn, setIsAlertModalOn] = useState(false);
const [clickedIndexArray, setClickedIndexArray] = useState([]);
+ const [buttonActive, setButtonActive] = useState(false);
const navigate = useNavigate();
const { id: roomId } = useParams();
const { data } = useGetRoom(roomId);
@@ -35,6 +33,9 @@ const Poll = () => {
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) => {
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 (
<>
-
- 오늘 당기는 메뉴는? 🤤
-
- {data?.data.restaurantResList.map((el: any, i: number) => (
-
- ))}
-
-
-
-
-
-
- {/* 모달은 포탈 써서 전역으로 나중에 바꿀게요!! */}
- {isShareModalOn && }
- {isAlertModalOn && (
-
-
-
+ {isLoading ? (
+
+ ) : (
+
+ 오늘 당기는 메뉴는? 🤤
+
+ {data?.data.restaurantResList.map((el: any, i: number) => (
+
+ ))}
+
+
+
+
+
+
)}
+ {isShareModalOn && }
>
);
};
diff --git a/src/pages/RandomList/RandomList.tsx b/src/pages/RandomList/RandomList.tsx
index 7d1cc80..daf9aa9 100644
--- a/src/pages/RandomList/RandomList.tsx
+++ b/src/pages/RandomList/RandomList.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Loading from 'pages/Loading/Loading';
import MenuCard from 'components/common/MenuCard/MenuCard';
@@ -11,6 +11,8 @@ 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 (
@@ -23,6 +25,8 @@ const RandomListWrapper = () => {
const RandomList = () => {
const navigate = useNavigate();
const [randomList, setRandomList] = useRecoilState(randomListData);
+ const [isAlertModalOn, setIsAlertModalOn] = useState(false);
+
const roomId = useRecoilValue(roomIdData);
const { mutate: retryMutate } = useRetryMutation();
const { mutate: resuggestOneMutate } = useResuggestOneMutation();
@@ -30,7 +34,11 @@ const RandomList = () => {
const handleSubmit = () => {
navigate(`/random-menu/${roomId}`);
};
-
+ const handleModalClose = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+ setIsAlertModalOn(false);
+ };
const handleClick = (restaurantId: number, index: number) => {
const resuggestOneOnSuccess = (data: any) => {
setRandomList((prev) => {
@@ -59,24 +67,31 @@ const RandomList = () => {
};
return (
-
- 오늘의 메뉴 후보
-
- {randomList?.map((el: any, i: number) => (
-
- ))}
-
-
-
-
-
-
+ <>
+
+ 오늘의 메뉴 후보
+
+ {randomList?.map((el: any, i: number) => (
+
+ ))}
+
+
+
+
+
+
+ {isAlertModalOn && (
+
+
+
+ )}
+ >
);
};
diff --git a/src/pages/Result/Result.styled.ts b/src/pages/Result/Result.styled.ts
index 8e60993..166b6af 100644
--- a/src/pages/Result/Result.styled.ts
+++ b/src/pages/Result/Result.styled.ts
@@ -8,10 +8,12 @@ interface ShareResultProps {
export const Wrapper = styled.div`
width: 100%;
- height: 100%;
+ height: 100vh;
background-color: var(--color-main-orange);
- padding: 110px 26px 0;
+ padding: 110px 26px 25px;
position: relative;
+ display: flex;
+ flex-direction: column;
`;
export const ShareResult = styled.div`
@@ -30,6 +32,13 @@ export const ShareResult = styled.div`
transition: opacity 5ms;
`;
+export const ButtonLayout = styled.div`
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`;
+
export const ButtonShare = styled.button`
display: block;
background-color: rgba(255, 255, 255, 0.2);
@@ -37,6 +46,7 @@ export const ButtonShare = styled.button`
padding: 11px 48px;
border-radius: 20px;
margin: 23px auto 55px;
+ margin-bottom: auto;
img {
margin-right: 10px;
diff --git a/src/pages/Result/Result.tsx b/src/pages/Result/Result.tsx
index 14a016e..45344e7 100644
--- a/src/pages/Result/Result.tsx
+++ b/src/pages/Result/Result.tsx
@@ -13,6 +13,9 @@ 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 (
@@ -28,6 +31,8 @@ const Result = () => {
const [opacity, setOpacity] = useState(1);
const navigate = useNavigate();
const { id: roomId } = useParams();
+ const [recoilRoomId, setRecoilRoomId] = useRecoilState(roomIdData);
+ const [randomList, setRandomList] = useRecoilState(randomListData);
const { voteOverallResultData, refetch } = useGetResult(roomId);
@@ -36,15 +41,12 @@ const Result = () => {
const totalVote = voteResult.total;
const winnerData = voteResult.win;
- console.log('winnerData', winnerData);
-
const handleModalClick = () => {
setIsModalOn(true);
};
const handleModalClose = (event: React.MouseEvent) => {
event.stopPropagation();
- event.preventDefault();
setIsModalOn(false);
};
@@ -73,6 +75,12 @@ const Result = () => {
}, []);
const handleClickFromScratch = () => {
+ if (recoilRoomId !== null) {
+ setRecoilRoomId(null);
+ }
+ if (randomList !== null) {
+ setRandomList([]);
+ }
navigate('/');
};
@@ -87,6 +95,7 @@ const Result = () => {
winnerData.map((item: any, i: number) => (
{
{winnerData.map((item: any, i: number) => (
{
))}
)}
-
-
- 공유하기
-
- refetch()}>
- {totalVote}명째 투표중
-
-
-
+
+
+
+ 공유하기
+
+ refetch()}>
+ {totalVote}명째 투표중
+
+
+
+
- {/* 모달은 포탈 써서 전역으로 나중에 바꿀게요!! */}
{IsModalOn && }
>
);