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} `} ))} - share result icon 공유하기 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) => ( { ))} )} - - share result icon - 공유하기 - - refetch()}> - {totalVote}명째 투표중 - retry icon - - + + + share result icon + 공유하기 + + refetch()}> + {totalVote}명째 투표중 + retry icon + + + - {/* 모달은 포탈 써서 전역으로 나중에 바꿀게요!! */} {IsModalOn && } );