Fix debug candidate map pages

src/components/CandidatesMap/CandidatesMapBody/CandidatesMapBody.tsx

@@ -8,16 +8,16 @@ import CandidatesSlide from '../CandidatesSlide/CandidatesSlide';
 import MapPinActive from '../MapPins/MapPinActive';
 import MapPinCommon from '../MapPins/MapPinCommon';
 
-import {CandidatesInfo, LatLng} from '@/types/vote';
+import {CandidatesMapBodyProps, LatLng} from '@/types/vote';
 
-const CandidatesMapBody = ({candidates}: {candidates: CandidatesInfo[]}) => {
-  const [centerMarker, setCenterMarker] = useState(candidates[0].placeInfo.latLng);
+const CandidatesMapBody = ({candidates}: CandidatesMapBodyProps) => {
+  const [centerMarker, setCenterMarker] = useState<LatLng>(candidates[0].placeInfo.latLng);
   const [selectedPinIndex, setSelectedPinIndex] = useState(0);
   const swiperRef = useRef<SwiperRef>(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 ? <MapPinActive number={i + 1} /> : <MapPinCommon number={i + 1} />}
+              {selectedPinIndex === i ? (
+                <MapPinActive number={candidate.rank} />
+              ) : (
+                <MapPinCommon number={candidate.rank} />
+              )}
             </div>
           </CustomOverlayMap>
         ))}

src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx

@@ -1,5 +1,3 @@
-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,23 +6,19 @@ 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 location = useLocation();
+  // const voteId = Number(location.pathname.split('/')[4]);
+  // const showResults = useRecoilValue(isShowResultsState(voteId));
 
   const handleSlideChange = (swiper: SwiperClass) => {
     const activeCandidate = candidates[swiper.activeIndex];
     setCenterMarker(activeCandidate.placeInfo.latLng);
     setSelectedPinIndex(swiper.activeIndex);
   };
 
-  console.log('showResults', showResults);
-
   return (
     <div className={styles.container}>
       <Swiper
@@ -37,7 +31,7 @@ const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swip
       >
         {candidates.map((candidate, i) => (
           <SwiperSlide key={`${candidate.id}-${i}`}>
-            <CandidateCard isMapStyle={true} candidate={candidate} index={i + 1} showResults={showResults} />
+            <CandidateCard isMapStyle={true} candidate={candidate} index={i + 1} />
           </SwiperSlide>
         ))}
       </Swiper>

src/components/CandidatesMap/MapPins/MapPinActive.tsx

@@ -2,11 +2,11 @@ import styles from './MapPinActive.module.scss';
 
 import ActiveIcon from '@/assets/voteIcons/map_pin_active.svg?react';
 
-const MapPinActive = ({number}: {number: number}) => {
+const MapPinActive = ({number}: {number: number | undefined}) => {
   return (
     <div className={styles.container}>
       <ActiveIcon />
-      <p className={styles.number}>{number}</p>
+      {number && <p className={styles.number}>{number}</p>}
     </div>
   );
 };

src/components/CandidatesMap/MapPins/MapPinCommon.tsx

@@ -1,11 +1,7 @@
 import styles from './MapPinCommon.module.scss';
 
-const MapPinCommon = ({number}: {number: number}) => {
-  return (
-    <div className={styles.container}>
-      <p className={styles.number}>{number}</p>
-    </div>
-  );
+const MapPinCommon = ({number}: {number: number | undefined}) => {
+  return <div className={styles.container}>{number && <p className={styles.number}>{number}</p>}</div>;
 };
 
 export default MapPinCommon;

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));

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';
@@ -9,29 +9,30 @@ 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';
 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';
 import VotedUserList from '../../VoteBottomSlideContent/VotedUserList/VotedUserList';
 
 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(<FaRegStar />);
   const isCandidateSelecting = useRecoilValue(isCandidateSelectingState);
-  const journeyAtom = useRecoilValue(journeyState);
-  const {id: voteId} = useParams();
+  const showResults = useRecoilValue(isShowResultsState(voteId));
+  const journeyAtom = useRecoilValue(journeyState(spaceId));
   const {mutateAsync: votingMutateAsync} = usePostVoting();
   const showToast = CustomToast();
   const placeInfo = candidate.placeInfo;
@@ -109,7 +110,9 @@ const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index, showRes
         <div className={styles.main__contextBox}>
           <button
             className={styles.main__contextBox__name}
-            onClick={() => navigate(`/detail/${candidate.id}`)}
+            onClick={() =>
+              navigate(`/detail/${placeInfo.placeId} ${placeInfo.contentTypeId}?title=${placeInfo.placeName}`)
+            }
             disabled={isCandidateSelecting}
           >
             {placeInfo.placeName.length >= 10 ? placeInfo.placeName.slice(0, 10) + ' ⋯' : placeInfo.placeName}

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;
       }
     }

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
             )}
             <div className={styles.candidateBox}>
               <label htmlFor={`${i}checkbox`}>
-                <CandidateCard onBottomSlideOpen={onBottomSlideOpen} candidate={candidate} showResults={showResults} />
+                <CandidateCard onBottomSlideOpen={onBottomSlideOpen} candidate={candidate} />
               </label>
               {candidate.tagline && (
                 <div className={styles.candidateBox__memo}>

src/components/Vote/VoteContent/VoteContent.tsx

@@ -67,13 +67,13 @@ const VoteContent = ({onBottomSlideOpen, data}: VoteContentProps) => {
           candidates={candidates}
           onBottomSlideOpen={onBottomSlideOpen}
           isCandidateSelecting={isCandidateSelecting}
-          showResults={showResults}
         />
       </div>
       {candidates && (
         <VoteRecommendList
           state={data.voteStatus}
           isCandidateSelecting={isCandidateSelecting}
+          onBottomSlideOpen={onBottomSlideOpen}
           categoryCode={candidates[candidates.length - 1].placeInfo.category}
         />
       )}

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(<AddToJourney placeId={data.id} />);
+    } else if (journeyAtom) {
+      showToast('날짜를 정하면 일정에 추가할 수 있어요.', true, '바로가기', () => navigate(`/trip/${spaceId}`));
+    }
+  };
 
   return (
     <div className={styles.container}>
-      <Link to='' className={styles.imgBox}>
+      <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.imgBox}>
         <img src={imgSrc} alt={`${data.title}의 사진`} style={{padding: data.thumbnail ? 0 : '40px'}} />
       </Link>
 
       {state === '결정완료' ? (
-        <button>
+        <button onClick={handleAddToJourney}>
           <AiOutlineDownload />
           <span>일정에 담기</span>
         </button>
       ) : (
-        <button>
+        <button onClick={handleAddToCandidates}>
           <BiTask />
           <span>후보에 추가</span>
         </button>
       )}
 
       <div>
-        <Link to='' className={styles.textBox}>
+        <Link to={`/detail/${data.id} ${data.contentTypeId}?title=${data.title}`} className={styles.textBox}>
           <p className={styles.textBox__name}>{title}</p>
           <p className={styles.textBox__category}>
             {category}·{location}

src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendList.tsx

@@ -14,21 +14,13 @@ import {translateCategoryName} from '@/utils/translateSearchData';
 import VoteRecommendItem from './VoteRecommendItem/VoteRecommendItem';
 
 import {SearchItemType} from '@/types/home';
+import {VoteRecommendListProps} from '@/types/vote';
 
-// 후보지&여행지 X -> 상품 추천 없음
-interface PropsType {
-  state: string;
-  isCandidateSelecting: boolean;
-  categoryCode: string;
-}
-
-const VoteRecommendList = ({state, isCandidateSelecting, categoryCode}: PropsType) => {
+const VoteRecommendList = ({state, isCandidateSelecting, onBottomSlideOpen, categoryCode}: VoteRecommendListProps) => {
   const [data, setData] = useState<SearchItemType[] | undefined>();
   const [slideLocation, setSlideLocation] = useState<number>(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);
@@ -62,23 +54,12 @@ const VoteRecommendList = ({state, isCandidateSelecting, categoryCode}: PropsTyp
             left: slideLocation + 'px',
           }}
         >
-          {data && data.map((data) => <VoteRecommendItem data={data} state={state} key={data.id} />)}
+          {data &&
+            data.map((data) => (
+              <VoteRecommendItem data={data} state={state} key={data.id} onBottomSlideOpen={onBottomSlideOpen} />
+            ))}
         </div>
       </div>
-      {/* <Swiper slidesPerView={2} navigation={true} modules={[Navigation]} breakpoints={{400: {slidesPerView: 2.4}}}>
-        <SwiperSlide>
-          <VoteRecommendItem state={state} />
-        </SwiperSlide>
-        <SwiperSlide>
-          <VoteRecommendItem state={state} />
-        </SwiperSlide>
-        <SwiperSlide>
-          <VoteRecommendItem state={state} />
-        </SwiperSlide>
-        <SwiperSlide>
-          <VoteRecommendItem state={state} />
-        </SwiperSlide>
-      </Swiper> */}
     </div>
   );
 };

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 (
     <div className={styles.container}>
       <div className={styles.leftSide}>
-        <button onClick={() => navigate(`/trip/${spaceId}`)} className={styles.leftSide__backIcon}>
+        <button onClick={handleBackClick} className={styles.leftSide__backIcon}>
           <MdOutlineArrowBackIosNew />
         </button>
         <p className={styles.leftSide__title}>{title}</p>