Merge pull request #284 from Strong-Potato/283-fix-debug-in-vote-page

Fix: debug in vote page
Strong-Potato · Jan 28, 2024 · 15c829c · 15c829c
2 parents 9069f69 + 5357807
commit 15c829c
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 16 deletions.
diff --git a/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx b/src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx
@@ -30,7 +30,7 @@ const CandidatesSlide = ({candidates, setSelectedPinIndex, setCenterMarker, swip
         breakpoints={{400: {slidesPerView: 1.2}}}
       >
         {candidates.map((candidate, i) => (
-          <SwiperSlide key={`${candidate.id}-${i}`}>
+          <SwiperSlide key={`${candidate.id}-${i}`} style={{minWidth: '34rem'}}>
             <CandidateCard isMapStyle={true} candidate={candidate} index={i + 1} />
           </SwiperSlide>
         ))}

diff --git a/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx b/src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx
@@ -24,8 +24,9 @@ import {AlertModalProps, VoteMeatballProps} from '@/types/vote';
 
 const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: VoteMeatballProps) => {
   const location = useLocation();
+  const spaceId = Number(location.pathname.split('/')[2]);
   const voteId = Number(location.pathname.split('/')[4]);
-  const setShowResults = useSetRecoilState(isShowResultsState(voteId));
+  const [showResults, setShowResults] = useRecoilState(isShowResultsState(voteId));
   const navigate = useNavigate();
   const setIsCreateModalOpen = useSetRecoilState(isCreateModalOpenState);
   const setIsBTOpen = useSetRecoilState(isBottomSlideOpenState);
@@ -55,7 +56,7 @@ const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: V
 
   const handleDeleteVote = async () => {
     await deleteVoteMutation.mutateAsync(Number(voteId));
-    navigate('/trip/2');
+    navigate(`/trip/${spaceId}`);
     setIsModalOpen(false);
   };
 
@@ -98,7 +99,7 @@ const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: V
         <p>투표 제목 수정</p>
       </button>
 
-      <button disabled={isZeroCandidates || state === '결정완료'} onClick={changeToCandidateSelecting}>
+      <button disabled={isZeroCandidates || state === '결정완료' || showResults} onClick={changeToCandidateSelecting}>
         <TrashIcon />
         <p>후보 삭제</p>
       </button>

diff --git a/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx b/src/components/Vote/VoteContent/CandidateCard/CandidateCard.tsx
@@ -120,7 +120,7 @@ const CandidateCard = ({onBottomSlideOpen, candidate, isMapStyle, index}: Candid
 
           <div className={styles.main__contextBox__category}>
             {translateCategoryName(placeInfo.category)}
-            {'ꞏ'}
+            {'・'}
             {translateAreaCode(parseInt(placeInfo.areaCode))}
           </div>
 

diff --git a/...onents/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.module.scss b/...onents/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.module.scss
@@ -23,7 +23,7 @@
     }
   }
 
-  button {
+  .addButton {
     @include typography(captionSmall);
     height: 36px;
 
@@ -32,6 +32,7 @@
 
     border: 1px solid #cdcfd0;
     border-radius: 8px;
+    background-color: #fff;
 
     display: flex;
     gap: 4px;
@@ -42,6 +43,10 @@
     & > svg {
       font-size: 1.6rem;
     }
+
+    &:hover {
+      background: #fff;
+    }
   }
   .textBox {
     margin-bottom: 2px;

diff --git a/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.tsx b/src/components/Vote/VoteContent/VoteRecommendList/VoteRecommendItem/VoteRecommendItem.tsx
@@ -1,3 +1,4 @@
+import {Button} from '@chakra-ui/react';
 import {AiOutlineDownload} from 'react-icons/ai';
 import {BiTask} from 'react-icons/bi';
 import {Link, useLocation, useNavigate} from 'react-router-dom';
@@ -12,6 +13,7 @@ import AddToJourney from '@/components/Vote/VoteBottomSlideContent/AddToJourney/
 
 import nullImg from '@/assets/nullImg.png';
 import {journeyState} from '@/recoil/vote/addToJourney';
+import {isShowResultsState} from '@/recoil/vote/showResults';
 import areas from '@/utils/areas.json';
 import titleCaseChange from '@/utils/titleCaseChange';
 import {translateCategoryToStr} from '@/utils/translateSearchData';
@@ -25,7 +27,8 @@ const VoteRecommendItem = ({state, data, onBottomSlideOpen}: VoteRecommendItemPr
   const spaceId = Number(locations.pathname.split('/')[2]);
   const voteId = Number(locations.pathname.split('/')[4]);
   const journeyAtom = useRecoilValue(journeyState(spaceId));
-  const {mutateAsync: postCandidateMutateAsync} = usePostNewCandidate();
+  const showResults = useRecoilValue(isShowResultsState(voteId));
+  const {isPending, 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);
@@ -58,16 +61,16 @@ const VoteRecommendItem = ({state, data, onBottomSlideOpen}: VoteRecommendItemPr
         <img src={imgSrc} alt={`${data.title}의 사진`} style={{padding: data.thumbnail ? 0 : '40px'}} />
       </Link>
 
-      {state === '결정완료' ? (
-        <button onClick={handleAddToJourney}>
+      {state === '결정완료' || showResults ? (
+        <Button onClick={handleAddToJourney} className={styles.addButton}>
           <AiOutlineDownload />
           <span>일정에 담기</span>
-        </button>
+        </Button>
       ) : (
-        <button onClick={handleAddToCandidates}>
+        <Button onClick={handleAddToCandidates} className={styles.addButton} isLoading={isPending}>
           <BiTask />
           <span>후보에 추가</span>
-        </button>
+        </Button>
       )}
 
       <div>

diff --git a/src/components/VoteMemo/MemoItem/MemoItem.tsx b/src/components/VoteMemo/MemoItem/MemoItem.tsx
@@ -8,6 +8,7 @@ import useGetSelectedArray from '@/hooks/useGetSelectedArray';
 
 import {selectedTaglineState} from '@/recoil/vote/voteMemo';
 import titleCaseChange from '@/utils/titleCaseChange';
+import {translateAreaCode, translateCategoryName} from '@/utils/translateSearchData';
 
 import {MemoItemProps} from '@/types/vote';
 
@@ -61,9 +62,9 @@ const MemoItem = ({place, existingTagline}: MemoItemProps) => {
           <div className={styles.candidateBox__text}>
             <p className={styles.candidateBox__text__name}>{title}</p>
             <span className={styles.candidateBox__text__category}>
-              {place.contentTypeId}
-              {'ꞏ'}
-              {place.location.areaCode}
+              {translateCategoryName(place.category)}
+              {'・'}
+              {translateAreaCode(place.location.areaCode)}
             </span>
           </div>
         </label>

diff --git a/src/components/VoteTabPanel/TabsVoteCard/TabsVoteCard.tsx b/src/components/VoteTabPanel/TabsVoteCard/TabsVoteCard.tsx
@@ -24,7 +24,9 @@ const TabsVoteCard = ({data}: {data: VoteListInfo}) => {
         </div>
 
         <AvatarGroup variant='tabsVoteCard' max={3} spacing='0'>
-          {users?.map((user) => <Avatar name={user.nickName} variant='tabsVoteCard' key={user.id} />)}
+          {users?.map((user) => (
+            <Avatar name={user.nickName} src={user.profileImageUrl} variant='tabsVoteCard' key={user.id} />
+          ))}
         </AvatarGroup>
       </div>
     </Link>