From d3d4e42020143222ccea2eb4e46ae1ef8211f32f Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Sun, 28 Jan 2024 17:56:45 +0900 Subject: [PATCH 1/4] Feat: add rank design on CandidateMap --- .../CandidatesSlide/CandidatesSlide.tsx | 9 +++----- .../CandidateCard/CandidateCard.tsx | 11 ++++++---- .../CandidateList/CandidateList.tsx | 4 ++-- .../Vote/VoteContent/VoteContent.tsx | 1 - src/components/Vote/VoteHeader/VoteHeader.tsx | 10 ++++++++- src/pages/CandidatesMap/CandidatesMap.tsx | 21 ++++++++++++++++--- src/pages/Vote/Vote.tsx | 4 +++- src/types/vote.ts | 2 -- 8 files changed, 42 insertions(+), 20 deletions(-) diff --git a/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx b/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx index f9c44f0c..b45a89ff 100644 --- a/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx +++ b/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx @@ -1,5 +1,4 @@ import {useLocation} from 'react-router-dom'; -import {useRecoilValue} from 'recoil'; import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react'; import 'swiper/scss'; import 'swiper/scss/navigation'; @@ -8,14 +7,12 @@ import styles from './CandidatesSlide.module.scss'; import CandidateCard from '@/components/Vote/VoteContent/CandidateCard/CandidateCard'; -import {isShowResultsState} from '@/recoil/vote/showResults'; - import {CandidatesSlideProps} from '@/types/vote'; const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swiperRef}: CandidatesSlideProps) => { const location = useLocation(); const voteId = Number(location.pathname.split('/')[4]); - const showResults = useRecoilValue(isShowResultsState(voteId)); + // const showResults = useRecoilValue(isShowResultsState(voteId)); const handleSlideChange = (swiper: SwiperClass) => { const activeCandidate = candidates[swiper.activeIndex]; @@ -23,7 +20,7 @@ const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swip setSelectedPinIndex(swiper.activeIndex); }; - console.log('showResults', showResults); + // console.log('showResults', showResults); return (
@@ -37,7 +34,7 @@ const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swip > {candidates.map((candidate, i) => ( - + ))} diff --git a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx index 317d64ff..a0074ccf 100644 --- a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx +++ b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx @@ -1,6 +1,6 @@ import {useEffect, useState} from 'react'; import {FaRegStar, FaStar} from 'react-icons/fa'; -import {useLocation, useNavigate, useParams} from 'react-router-dom'; +import {useLocation, useNavigate} from 'react-router-dom'; import {useRecoilValue} from 'recoil'; import styles from './CandidateCard.module.scss'; @@ -16,6 +16,7 @@ import ThirdIcon from '@/assets/voteIcons/rank_3.svg?react'; import AddDayIcon from '@/assets/voteIcons/vote_addDay.svg?react'; import {journeyState} from '@/recoil/vote/addToJourney'; import {isCandidateSelectingState} from '@/recoil/vote/alertModal'; +import {isShowResultsState} from '@/recoil/vote/showResults'; import {translateAreaCode, translateCategoryName} from '@/utils/translateSearchData'; import AddToJourney from '../../VoteBottomSlideContent/AddToJourney/AddToJourney'; @@ -23,21 +24,23 @@ import VotedUserList from '../../VoteBottomSlideContent/VotedUserList/VotedUserL import {CandidateCardProps, ResultCandidatesInfo} from '@/types/vote'; -const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index, showResults}: CandidateCardProps) => { +const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index}: CandidateCardProps) => { const navigate = useNavigate(); const location = useLocation(); const spaceId = Number(location.pathname.split('/')[2]); - + const voteId = Number(location.pathname.split('/')[4]); const [starIcon, setStarIcon] = useState(); const isCandidateSelecting = useRecoilValue(isCandidateSelectingState); + const showResults = useRecoilValue(isShowResultsState(voteId)); const journeyAtom = useRecoilValue(journeyState); - const {id: voteId} = useParams(); const {mutateAsync: votingMutateAsync} = usePostVoting(); const showToast = CustomToast(); const placeInfo = candidate.placeInfo; const imgSrc = placeInfo.placeImageUrl ? placeInfo.placeImageUrl : nullImg; const votedMembers = candidate.votedMemberProfiles; + console.log('showResults', showResults); + useEffect(() => { if (candidate.amIVote) { setStarIcon(); diff --git a/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx b/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx index 36ad7da4..58435ccd 100644 --- a/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx +++ b/src/components/Vote/VoteContent/CandidateList/CandidateList.tsx @@ -12,7 +12,7 @@ import VoteContentEmpty from '../VoteContentEmpty/VoteContentEmpty'; import {CandidateListProps} from '@/types/vote'; -const CandidateList = ({candidates, onBottomSlideOpen, showResults, isCandidateSelecting}: CandidateListProps) => { +const CandidateList = ({candidates, onBottomSlideOpen, isCandidateSelecting}: CandidateListProps) => { const setSelectedCandidates = useSetRecoilState(selectedCandidatesState); const {addItemInNewSet} = useGetSelectedSet(setSelectedCandidates); @@ -33,7 +33,7 @@ const CandidateList = ({candidates, onBottomSlideOpen, showResults, isCandidateS )}
{candidate.tagline && (
diff --git a/src/components/Vote/VoteContent/VoteContent.tsx b/src/components/Vote/VoteContent/VoteContent.tsx index aa00dbbb..9a50a494 100644 --- a/src/components/Vote/VoteContent/VoteContent.tsx +++ b/src/components/Vote/VoteContent/VoteContent.tsx @@ -67,7 +67,6 @@ const VoteContent = ({onBottomSlideOpen, data}: VoteContentProps) => { candidates={candidates} onBottomSlideOpen={onBottomSlideOpen} isCandidateSelecting={isCandidateSelecting} - showResults={showResults} />
{candidates && ( diff --git a/src/components/Vote/VoteHeader/VoteHeader.tsx b/src/components/Vote/VoteHeader/VoteHeader.tsx index 74b9f5af..ecde76b2 100644 --- a/src/components/Vote/VoteHeader/VoteHeader.tsx +++ b/src/components/Vote/VoteHeader/VoteHeader.tsx @@ -45,10 +45,18 @@ const VoteHeader = ({onBottomSlideOpen, title, isZeroCandidates}: VoteHeaderProp } }; + const handleBackClick = () => { + if (path === 'map') { + navigate(-1); + } else { + navigate(`/trip/${spaceId}`); + } + }; + return (
-

{title}

diff --git a/src/pages/CandidatesMap/CandidatesMap.tsx b/src/pages/CandidatesMap/CandidatesMap.tsx index 0f907dc7..d9b9d65a 100644 --- a/src/pages/CandidatesMap/CandidatesMap.tsx +++ b/src/pages/CandidatesMap/CandidatesMap.tsx @@ -1,20 +1,35 @@ +import {useEffect, useState} from 'react'; import {useLocation} from 'react-router-dom'; +import {useRecoilValue} from 'recoil'; import styles from './CandidatesMap.module.scss'; -import {useGetVotesInfo} from '@/hooks/Votes/vote'; +import {useGetVotesInfo, useGetVotesResults} from '@/hooks/Votes/vote'; import CandidatesMapBody from '@/components/CandidatesMap/CandidatesMapBody/CandidatesMapBody'; import VoteHeader from '@/components/Vote/VoteHeader/VoteHeader'; +import {isShowResultsState} from '@/recoil/vote/showResults'; + import {VoteInfo} from '@/types/vote'; const CandidatesMap = () => { const location = useLocation(); const voteId = Number(location.pathname.split('/')[4]); - const {data: voteInfoData} = useGetVotesInfo(voteId); const voteInfo = voteInfoData?.data as VoteInfo; + const showResults = useRecoilValue(isShowResultsState(voteId)); + const resultsInfoData = useGetVotesResults(showResults, Number(voteId)); + const resultsInfo = resultsInfoData.data?.data; + const [candidates, setCandidates] = useState(voteInfo.candidates); + + useEffect(() => { + if (resultsInfo && showResults) { + setCandidates(resultsInfo!.candidatesResponses); + } else { + setCandidates(voteInfo.candidates); + } + }, [resultsInfo, showResults]); if (!voteInfo) { return; @@ -23,7 +38,7 @@ const CandidatesMap = () => { return (
- +
); }; diff --git a/src/pages/Vote/Vote.tsx b/src/pages/Vote/Vote.tsx index 667de658..cd41acf1 100644 --- a/src/pages/Vote/Vote.tsx +++ b/src/pages/Vote/Vote.tsx @@ -44,7 +44,9 @@ const Vote = () => { useEffect(() => { const isShowResults = showResultIds.some((id) => id === voteId); - setShowResults(isShowResults); + if (isShowResults) { + setShowResults(isShowResults); + } setIsBTOpen(false); }, []); diff --git a/src/types/vote.ts b/src/types/vote.ts index 09ccb8be..eb51aaf6 100644 --- a/src/types/vote.ts +++ b/src/types/vote.ts @@ -110,7 +110,6 @@ export interface VoteHeaderProps { export interface CandidateCardProps { onBottomSlideOpen?: (content: ReactNode) => void | undefined; candidate: CandidatesInfo; - showResults?: boolean; isMapStyle?: boolean; index?: number; } @@ -134,7 +133,6 @@ export interface AlertModalProps { export interface CandidateListProps { candidates: CandidatesInfo[]; onBottomSlideOpen: (content: ReactNode) => void; - showResults: boolean; isCandidateSelecting: boolean; } From a63f2f1e61310864deda30a846e828902418d594 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Sun, 28 Jan 2024 21:18:14 +0900 Subject: [PATCH 2/4] Design: edit tagline style --- .../Vote/VoteContent/CandidateList/CandidateList.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss b/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss index 342c668b..f5d73269 100644 --- a/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss +++ b/src/components/Vote/VoteContent/CandidateList/CandidateList.module.scss @@ -22,12 +22,12 @@ margin-top: 16px; &__text { - height: 2.2rem; + min-height: 2.2rem; @include typography(bodySmall); color: $neutral900; background-color: $neutral100; - padding: 0 16px; + padding: 0 12px; border-radius: 8px; } } From 0ede7142c02102ec4d7688badbbb00acf6299902 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Sun, 28 Jan 2024 22:27:13 +0900 Subject: [PATCH 3/4] Feat: adding add to journey or candidate --- .../AddToJourney/AddToJourney.tsx | 2 +- .../CandidateCard/CandidateCard.tsx | 4 +- .../VoteRecommendItem/VoteRecommendItem.tsx | 57 ++++++++++++++----- .../VoteRecommendList/VoteRecommendList.tsx | 17 ------ src/pages/Trip/Trip.tsx | 2 +- src/recoil/vote/addToJourney.ts | 13 +++-- src/types/vote.ts | 37 ++++++------ 7 files changed, 71 insertions(+), 61 deletions(-) diff --git a/src/components/Vote/VoteBottomSlideContent/AddToJourney/AddToJourney.tsx b/src/components/Vote/VoteBottomSlideContent/AddToJourney/AddToJourney.tsx index 56163bf5..1819200a 100644 --- a/src/components/Vote/VoteBottomSlideContent/AddToJourney/AddToJourney.tsx +++ b/src/components/Vote/VoteBottomSlideContent/AddToJourney/AddToJourney.tsx @@ -16,7 +16,7 @@ const AddToJourney = ({placeId}: {placeId: number}) => { const navigate = useNavigate(); const location = useLocation(); const spaceId = Number(location.pathname.split('/')[2]); - const journeyAtom = useRecoilValue(journeyState); + const journeyAtom = useRecoilValue(journeyState(spaceId)); const setIsBTOpen = useSetRecoilState(isBottomSlideOpenState); const days = journeyAtom.journeys.length; const [selectedDays, setSelectedDays] = useState(Array(days).fill(false)); diff --git a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx index a0074ccf..8a483cc1 100644 --- a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx +++ b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx @@ -9,7 +9,7 @@ import {usePostVoting} from '@/hooks/Votes/vote'; import CustomToast from '@/components/CustomToast/CustomToast'; -import nullImg from '@/assets/homeIcons/search/nullImg.svg'; +import nullImg from '@/assets/nullImg.png'; import FirstIcon from '@/assets/voteIcons/rank_1.svg?react'; import SecondIcon from '@/assets/voteIcons/rank_2.svg?react'; import ThirdIcon from '@/assets/voteIcons/rank_3.svg?react'; @@ -32,7 +32,7 @@ const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index}: Candid const [starIcon, setStarIcon] = useState(); const isCandidateSelecting = useRecoilValue(isCandidateSelectingState); const showResults = useRecoilValue(isShowResultsState(voteId)); - const journeyAtom = useRecoilValue(journeyState); + const journeyAtom = useRecoilValue(journeyState(spaceId)); const {mutateAsync: votingMutateAsync} = usePostVoting(); const showToast = CustomToast(); const placeInfo = candidate.placeInfo; diff --git a/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.tsx b/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.tsx index 8db5866e..a447a99d 100644 --- a/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.tsx +++ b/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.tsx @@ -1,48 +1,77 @@ import {AiOutlineDownload} from 'react-icons/ai'; import {BiTask} from 'react-icons/bi'; -import {Link} from 'react-router-dom'; +import {Link, useLocation, useNavigate} from 'react-router-dom'; +import {useRecoilValue} from 'recoil'; import styles from './VoteRecommendItem.module.scss'; -import nullImg from '@/assets/homeIcons/search/nullImg.svg'; +import {usePostNewCandidate} from '@/hooks/Votes/vote'; + +import CustomToast from '@/components/CustomToast/CustomToast'; +import AddToJourney from '@/components/Vote/VoteBottomSlideContent/AddToJourney/AddToJourney'; + +import nullImg from '@/assets/nullImg.png'; +import {journeyState} from '@/recoil/vote/addToJourney'; import areas from '@/utils/areas.json'; import titleCaseChange from '@/utils/titleCaseChange'; import {translateCategoryToStr} from '@/utils/translateSearchData'; -import {SearchItemType} from '@/types/home'; - -interface PropsType { - state: string; - data: SearchItemType; -} +import {VoteRecommendItemProps} from '@/types/vote'; -const VoteRecommendItem = ({state, data}: PropsType) => { +const VoteRecommendItem = ({state, data, onBottomSlideOpen}: VoteRecommendItemProps) => { + const locations = useLocation(); + const showToast = CustomToast(); + const navigate = useNavigate(); + const spaceId = Number(locations.pathname.split('/')[2]); + const voteId = Number(locations.pathname.split('/')[4]); + const journeyAtom = useRecoilValue(journeyState(spaceId)); + const {mutateAsync: postCandidateMutateAsync} = usePostNewCandidate(); const location = areas.filter((area) => area.areaCode === data.location.areaCode)[0].name; const category = translateCategoryToStr(data.contentTypeId); const title = titleCaseChange(data.title); const imgSrc = data.thumbnail ? data.thumbnail : nullImg; - // 이미지, 정보 텍스트 -> 장소상페 이동 + + const handleAddToCandidates = async () => { + await postCandidateMutateAsync({ + voteId: Number(voteId), + candidateInfos: [ + { + placeId: data.id, + placeTypeId: data.contentTypeId, + tagline: '', + }, + ], + }); + }; + + const handleAddToJourney = async () => { + if (journeyAtom && onBottomSlideOpen) { + onBottomSlideOpen(); + } else if (journeyAtom) { + showToast('날짜를 정하면 일정에 추가할 수 있어요.', true, '바로가기', () => navigate(`/trip/${spaceId}`)); + } + }; return (
- + {`${data.title}의 {state === '결정완료' ? ( - ) : ( - )}
- +

{title}

{category}·{location} diff --git a/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendList.tsx b/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendList.tsx index 81d0b9fd..8593720f 100644 --- a/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendList.tsx +++ b/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendList.tsx @@ -15,7 +15,6 @@ import VoteRecommendItem from './VoteRecommendItem/VoteRecommendItem'; import {SearchItemType} from '@/types/home'; -// 후보지&여행지 X -> 상품 추천 없음 interface PropsType { state: string; isCandidateSelecting: boolean; @@ -27,8 +26,6 @@ const VoteRecommendList = ({state, isCandidateSelecting, categoryCode}: PropsTyp const [slideLocation, setSlideLocation] = useState(0); const [componentRef, size] = useComponentSize(); const category = translateCategoryName(categoryCode); - // 저 keyword자리에 A5480380 이런 것을 넣고 categorycode를 keywordSearch의 '카페'자리에 넣어주시고 title에 이런 ${category}는 어때요? 해주시면 완성되는 로직... - // const categoryCode = translateCategoryName(keyword); async function getData() { const fetchData = await keywordSearch(category, '전국', '인기순', 0, 5); @@ -65,20 +62,6 @@ const VoteRecommendList = ({state, isCandidateSelecting, categoryCode}: PropsTyp {data && data.map((data) => )}

- {/* - - - - - - - - - - - - - */}
); }; diff --git a/src/pages/Trip/Trip.tsx b/src/pages/Trip/Trip.tsx index f1fc745b..996deead 100644 --- a/src/pages/Trip/Trip.tsx +++ b/src/pages/Trip/Trip.tsx @@ -52,7 +52,7 @@ function Trip() { const [center, setCenter] = useState(getMapCenter(journeysData.data)); const navigate = useNavigate(); const users = spaceData?.data?.members; - const SetJourneyAtom = useSetRecoilState(journeyState); + const SetJourneyAtom = useSetRecoilState(journeyState(Number(id))); if (journeysData) { SetJourneyAtom(journeysData.data); diff --git a/src/recoil/vote/addToJourney.ts b/src/recoil/vote/addToJourney.ts index 0bda5f23..8771c106 100644 --- a/src/recoil/vote/addToJourney.ts +++ b/src/recoil/vote/addToJourney.ts @@ -2,9 +2,10 @@ import {atom} from 'recoil'; import {Journeys} from '@/types/route'; -export const journeyState = atom({ - key: 'journeyState', - default: { - journeys: [], - }, -}); +export const journeyState = (spaceId: number) => + atom({ + key: `journeyState_${spaceId}`, + default: { + journeys: [], + }, + }); diff --git a/src/types/vote.ts b/src/types/vote.ts index eb51aaf6..4ffae9b2 100644 --- a/src/types/vote.ts +++ b/src/types/vote.ts @@ -186,23 +186,20 @@ export interface PostNewCandidateProps { tagline: string; }[]; } -///// - -// export interface SearchItemType { -// id: number; -// contentTypeId: number; -// title: string; -// thumbnail: string; -// location: SearchItemLocationType; -// category: string; -// } -// export interface SearchItemLocationType { -// address: string; -// addressDetail: string; -// phone: string; -// areaCode: number; -// sigunguCode: number; -// zipCode: number; -// latitude: number; -// longitude: number; -// } + +export interface CandidatesMapBodyProps { + candidates: CandidatesInfo[]; +} + +export interface VoteRecommendListProps { + state: string; + isCandidateSelecting: boolean; + categoryCode: string; + onBottomSlideOpen: (content: ReactNode) => void; +} + +export interface VoteRecommendItemProps { + state: string; + data: SearchItemType; + onBottomSlideOpen: (content: ReactNode) => void; +} From 24e0d1c526bb3b66d6970a795b06df403d8c3806 Mon Sep 17 00:00:00 2001 From: SKY-PEY Date: Sun, 28 Jan 2024 23:18:36 +0900 Subject: [PATCH 4/4] Feat: add rank style in candidate map --- src/assets/nullImg.png | Bin 0 -> 1306 bytes .../CandidatesMapBody/CandidatesMapBody.tsx | 14 +++++++++----- .../CandidatesSlide/CandidatesSlide.tsx | 7 ++----- .../CandidatesMap/MapPins/MapPinActive.tsx | 4 ++-- .../CandidatesMap/MapPins/MapPinCommon.tsx | 8 ++------ .../VoteContent/CandidateCard/CandidateCard.tsx | 6 +++--- src/components/Vote/VoteContent/VoteContent.tsx | 1 + .../VoteRecommendList/VoteRecommendList.tsx | 14 ++++++-------- src/pages/CandidatesMap/CandidatesMap.tsx | 2 +- src/types/vote.ts | 4 ++-- 10 files changed, 28 insertions(+), 32 deletions(-) create mode 100644 src/assets/nullImg.png diff --git a/src/assets/nullImg.png b/src/assets/nullImg.png new file mode 100644 index 0000000000000000000000000000000000000000..0fc7368bf0c1b1741c43daf10281b8fb80c24eed GIT binary patch literal 1306 zcmeAS@N?(olHy`uVBq!ia0vp^6F``Q4M;wBd$a>caTa()7Bet#3xhBt!>l*8o|0J>kx$8Y$978G?-`*_@y6q;?@Nv7)B;MTR-+0e( zdigo*WVCdwZvMuWnK$8%!cND$2}Mm8gda$scsZd-*E`yF=dwl#gF53$VKw__p0Vhh zT>qouR&3(!lhZcoNFOb%(JHKYvscFQqp+a4(3gh!m4(6TMRB%v+MoU$uCSSx`&s{P zvj2)hGvBB--`_K3ztEY@pVplaU%z_7GJe~a_Zmtbg*@Ez=~2D7O|;*g*{OE*wf9|a zNlfsYYvF6(HNBI;Z`skL!cCb{uI2w1bUp8=DDb}8WHvE2PVVmC)zQKoC!5)GXSkR% zUfsRMlb`KXatnJ+$}A+CR(ZIecBJ?WxalBWUYU`zzj&wvDSQ z;y6FBT#O5nf4`&Z?c^mh8T^eeYl1}T&I@!t0Z0-8&hzUFcX1{_|u?%zZ^#RY9I^K_1cFSys<5Vas% z@$Ss8jEq|y9=|*-qO@R|j@aio89ku@@33HvKe@JyTQfFBufLHCxb9Ucy{i`u(Ep;vg$Go$L`C*c<`}VzB_!e3{`B}?AC+>qG;xv}!#I-3BF3{UH_qx5JzCE6=0La4 z;!RWbv)pJDwp_0k@N+qX^~ZF*)0+b4ED^u@-i^t|aiadQi@=Ok8NW~bLFT#ylL zX*aK`_?_Zr+!pfW;=_tP_G`~KesMHyy~nkI_5I)ITsQgqHK$guYh9G`VdbrB{wzD% z#m#j;{}q3{arJrre7{9stHPeWbD6JjfNgcfos(8_rLV)<`j!Trn(orFJM7~W{p-`$ zZS9p0S=aqak}IgWqrEAx&oHoNC@RsG+OzXuh$vtKk-ZhiLCOzx@NZ~j-ABI5Ns zPW)A>5ZiNI`pv)Eojv#Oh@ZQ)m~n0D%=Lb2_RskhRJZQgHUCF { - const [centerMarker, setCenterMarker] = useState(candidates[0].placeInfo.latLng); +const CandidatesMapBody = ({candidates}: CandidatesMapBodyProps) => { + const [centerMarker, setCenterMarker] = useState(candidates[0].placeInfo.latLng); const [selectedPinIndex, setSelectedPinIndex] = useState(0); const swiperRef = useRef(null); useEffect(() => { setCenterMarker(candidates[0].placeInfo.latLng); - }, []); + }, [candidates]); const handleMapMarkerClick = (latLng: LatLng, i: number) => { setCenterMarker(latLng); @@ -37,7 +37,11 @@ const CandidatesMapBody = ({candidates}: {candidates: CandidatesInfo[]}) => { className={`pin ${selectedPinIndex === i ? 'active' : ''}`} onClick={() => handleMapMarkerClick(candidate.placeInfo.latLng, i)} > - {selectedPinIndex === i ? : } + {selectedPinIndex === i ? ( + + ) : ( + + )}
))} diff --git a/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx b/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx index b45a89ff..5adaf649 100644 --- a/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx +++ b/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx @@ -1,4 +1,3 @@ -import {useLocation} from 'react-router-dom'; import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react'; import 'swiper/scss'; import 'swiper/scss/navigation'; @@ -10,8 +9,8 @@ import CandidateCard from '@/components/Vote/VoteContent/CandidateCard/Candidate import {CandidatesSlideProps} from '@/types/vote'; const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swiperRef}: CandidatesSlideProps) => { - const location = useLocation(); - const voteId = Number(location.pathname.split('/')[4]); + // const location = useLocation(); + // const voteId = Number(location.pathname.split('/')[4]); // const showResults = useRecoilValue(isShowResultsState(voteId)); const handleSlideChange = (swiper: SwiperClass) => { @@ -20,8 +19,6 @@ const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swip setSelectedPinIndex(swiper.activeIndex); }; - // console.log('showResults', showResults); - return (
{ +const MapPinActive = ({number}: {number: number | undefined}) => { return (
-

{number}

+ {number &&

{number}

}
); }; diff --git a/src/components/CandidatesMap/MapPins/MapPinCommon.tsx b/src/components/CandidatesMap/MapPins/MapPinCommon.tsx index be2f5b38..d259feb9 100644 --- a/src/components/CandidatesMap/MapPins/MapPinCommon.tsx +++ b/src/components/CandidatesMap/MapPins/MapPinCommon.tsx @@ -1,11 +1,7 @@ import styles from './MapPinCommon.module.scss'; -const MapPinCommon = ({number}: {number: number}) => { - return ( -
-

{number}

-
- ); +const MapPinCommon = ({number}: {number: number | undefined}) => { + return
{number &&

{number}

}
; }; export default MapPinCommon; diff --git a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx index 8a483cc1..bc09c7c2 100644 --- a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx +++ b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx @@ -39,8 +39,6 @@ const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index}: Candid const imgSrc = placeInfo.placeImageUrl ? placeInfo.placeImageUrl : nullImg; const votedMembers = candidate.votedMemberProfiles; - console.log('showResults', showResults); - useEffect(() => { if (candidate.amIVote) { setStarIcon(); @@ -112,7 +110,9 @@ const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index}: Candid
diff --git a/src/pages/CandidatesMap/CandidatesMap.tsx b/src/pages/CandidatesMap/CandidatesMap.tsx index d9b9d65a..f101ae24 100644 --- a/src/pages/CandidatesMap/CandidatesMap.tsx +++ b/src/pages/CandidatesMap/CandidatesMap.tsx @@ -29,7 +29,7 @@ const CandidatesMap = () => { } else { setCandidates(voteInfo.candidates); } - }, [resultsInfo, showResults]); + }, []); if (!voteInfo) { return; diff --git a/src/types/vote.ts b/src/types/vote.ts index 4ffae9b2..53925675 100644 --- a/src/types/vote.ts +++ b/src/types/vote.ts @@ -17,6 +17,7 @@ export interface LatLng { export interface PlaceInfo { placeId: number; placeName: string; + contentTypeId: number; category: string; areaCode: string; placeImageUrl: string; @@ -98,7 +99,6 @@ export interface VoteContentProps { onBottomSlideOpen: (content: ReactNode) => void; data: VoteInfo; showResults?: boolean; - // isZeroCandidates: boolean; } export interface VoteHeaderProps { @@ -188,7 +188,7 @@ export interface PostNewCandidateProps { } export interface CandidatesMapBodyProps { - candidates: CandidatesInfo[]; + candidates: CandidatesInfo[] | ResultCandidatesInfo[]; } export interface VoteRecommendListProps {