Feat: connect api with react-query in Vote

src/api/vote.ts

@@ -5,42 +5,55 @@ import {
   EditVoteTitleProps,
   PostNewCandidateProps,
   PostVoteTitleProps,
-  VoteInfo,
-  VoteListInfo,
+  PostVotingProps,
 } from '@/types/vote';
 
 /* ----------------------------------- G E T ---------------------------------- */
 
 //단일 보트
-export const getVoteInfo = async (voteId: number): Promise<VoteInfo> => {
-  const response = await axios.get(`/api/votes/${voteId}`);
+export const getVoteInfo = async (voteId: number) => {
+  const response = await axios.get(`/api/votes/${voteId}`, {withCredentials: true});
   return response.data;
 };
 
 //보트 리스트
-export const getVoteListInfo = async (spaceId: number): Promise<VoteListInfo[]> => {
-  const response = await axios.get(`/api/votes`, {params: {spaceId, voteStatusOption: 'ALL'}});
+export const getVoteListInfo = async (spaceId: number) => {
+  const response = await axios.get(`/api/votes`, {params: {spaceId, voteStatusOption: 'ALL', withCredentials: true}});
   return response.data;
 };
 
-//getVotesResults
+//투표 결과 조회
+export const getVoteResults = async (voteId: number) => {
+  const response = await axios.get(`/api/votes/${voteId}/result`, {withCredentials: true});
+  return response.data;
+};
 
 /* ----------------------------------- P O S T ---------------------------------- */
 
 //vote 추가
 export const postNewVote = async ({spaceId, title}: PostVoteTitleProps) => {
   try {
     const response = await axios.post('/api/votes', {spaceId, title});
-    console.log('axios 포스트 성공', response);
-    return response;
+    console.log('axios 포스트 성공', response.data);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+//투표하기&취소
+export const postVoting = async ({voteId, candidateId}: PostVotingProps) => {
+  try {
+    const response = await axios.post('/api/votes/voting', {voteId, candidateId});
+    return response.data;
   } catch (error) {
     console.error(error);
   }
 };
 
 //후보 메모 후 추가
-export const postNewCandidate = async ({voteId, candidates}: PostNewCandidateProps) => {
-  const response = await axios.post(`/api/votes/${voteId}`, {params: candidates});
+export const postNewCandidate = async ({voteId, candidateInfos}: PostNewCandidateProps) => {
+  const response = await axios.post(`/api/votes/${voteId}/candidates`, {params: {candidateInfos}});
   return response.data;
 };
 
@@ -49,7 +62,27 @@ export const postNewCandidate = async ({voteId, candidates}: PostNewCandidatePro
 //voteTitle 수정 PUT - api미정
 export const editVoteTitle = async ({title, voteId}: EditVoteTitleProps) => {
   try {
-    const response = await axios.put(`/api/votes/${voteId}`, {params: title});
+    const response = await axios.put(`/api/votes/${voteId}`, {params: {title, withCredentials: true}});
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+//투표 상태 결과보기로 변경
+export const changeStatusComplete = async (voteId: number) => {
+  try {
+    const response = await axios.put(`/api/votes/${voteId}/voteStatus`);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+//재투표, 리셋
+export const resetVoteStatus = async (voteId: number) => {
+  try {
+    const response = await axios.put(`/api/votes/${voteId}`);
     return response.data;
   } catch (error) {
     console.error(error);
@@ -61,26 +94,22 @@ export const editVoteTitle = async ({title, voteId}: EditVoteTitleProps) => {
 //votes/{voteId} vote 삭제
 export const deleteVote = async (voteId: number) => {
   try {
-    const response = await axios.delete(`/api/votes/${voteId}`);
+    const response = await axios.delete(`/api/votes/${voteId}/voteStatus`, {withCredentials: true});
+    console.log('투표삭제', response.data);
     return response.data;
   } catch (error) {
     console.error(error);
   }
 };
 
-//msw 돌려야함
 //candidate 삭제- api 미정 / candidateId:number[] 여러아이디 배열에 담음
-export const deleteCandidates = async ({voteId, candidateId}: DeleteCandidatesProps) => {
+export const deleteCandidates = async ({voteId, candidateIds}: DeleteCandidatesProps) => {
   try {
-    const response = await axios.delete(`/api/votes/${voteId}/candidates/${candidateId}`);
+    const response = await axios.delete(`/api/votes/${voteId}/candidates`, {
+      params: {candidateIds, withCredentials: true},
+    });
     return response.data;
   } catch (error) {
     console.error(error);
   }
 };
-
-///votes/{voteId}/candidates candidate메모와 함께 추가 POST
-
-//votes/{voteId}/candidates/{candidatesId} 별 투표하기 POST -> + DELETE 투표 삭제?
-
-//PUT 투표 상태 변경(재진행) -> ?

src/components/ButtonsInAddingCandidate/SelectButton/SelectButton.tsx

@@ -9,16 +9,6 @@ import {selectedPlaceState} from '@/recoil/vote/selectPlace';
 
 import {SearchItemType} from '@/types/home';
 
-// //"선택된 장소 객체"
-const placeInfo = {
-  placeId: 23,
-  placeName: '안녕호텔',
-  category: '호텔',
-  location: '서울',
-  placeImageURL: 'https://img-cf.kurly.com/shop/data/goodsview/20210218/gv30000159355_1.jpg',
-  latlng: {lat: 33.450936, lng: 126.569477},
-};
-
 interface Propstype {
   data: SearchItemType;
 }
@@ -32,7 +22,7 @@ const SelectButton = ({data}: Propstype) => {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     setIsClicked((prev) => !prev);
-    toggleItemInNewArray(placeInfo);
+    toggleItemInNewArray(data);
     console.log(data);
   };
 

src/components/CandidatesMap/CandidatesMapBody/CandidatesMapBody.tsx

@@ -6,7 +6,7 @@ import styles from './CandidatesMapBody.module.scss';
 
 import CandidatesSlide from '../CandidatesSlide/CandidatesSlide';
 import MapPinActive from '../MapPins/MapPinActive';
-import MapPinNumber from '../MapPins/MapPinNumber';
+import MapPinCommon from '../MapPins/MapPinCommon';
 
 import {CandidatesInfo, Latlng} from '@/types/vote';
 
@@ -37,7 +37,7 @@ const CandidatesMapBody = ({candidates}: {candidates: CandidatesInfo[]}) => {
               className={`pin ${selectedPinIndex === i ? 'active' : ''}`}
               onClick={() => handleMapMarkerClick(candidate.placeInfo.latlng, i)}
             >
-              {selectedPinIndex === i ? <MapPinActive number={i + 1} /> : <MapPinNumber number={i + 1} />}
+              {selectedPinIndex === i ? <MapPinActive number={i + 1} /> : <MapPinCommon number={i + 1} />}
             </div>
           </CustomOverlayMap>
         ))}

src/components/CandidatesMap/CandidatesSlide/CandidatesSlide.tsx

@@ -27,7 +27,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={false} />
+            <CandidateCard isMapStyle={true} candidate={candidate} index={i + 1} />
           </SwiperSlide>
         ))}
       </Swiper>

src/components/CandidatesMap/MapPins/MapPinNumber.module.scss → src/components/CandidatesMap/MapPins/MapPinCommon.module.scss

@@ -3,6 +3,8 @@
 .container {
   width: 32px;
   height: 32px;
+
+  border: 2px solid #fff;
   border-radius: 50%;
   background-color: $secondary400;
   display: flex;

src/components/CandidatesMap/MapPins/MapPinCommon.tsx

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

src/components/MapZoomIn/RouteMapBody/RouteMapBody.tsx

@@ -6,7 +6,7 @@ import styles from './RouteMapBody.module.scss';
 
 import RouteMapSlide from '../RouteMapSlide/RouteMapSlide';
 import MapPinActive from '../../CandidatesMap/MapPins/MapPinActive';
-import MapPinNumber from '../../CandidatesMap/MapPins/MapPinNumber';
+import MapPinCommon from '../../CandidatesMap/MapPins/MapPinCommon';
 
 import {Journeys, LatLng} from '@/types/route';
 
@@ -58,7 +58,7 @@ const RouteMapBody = ({journeys}: Journeys) => {
                 className={`pin ${selectedPinIndex === i ? 'active' : ''}`}
                 onClick={() => handleMapMarkerClick({lat: place.place.latitude, lng: place.place.latitude}, i)}
               >
-                {selectedPinIndex === i ? <MapPinActive number={i + 1} /> : <MapPinNumber number={i + 1} />}
+                {selectedPinIndex === i ? <MapPinActive number={i + 1} /> : <MapPinCommon number={i + 1} />}
               </div>
             </CustomOverlayMap>
           </React.Fragment>

src/components/Route/MapInTrip/MapInTrip.tsx

@@ -1,36 +1,25 @@
-import { CustomOverlayMap, Map, Polyline } from "react-kakao-maps-sdk";
+import {CustomOverlayMap, Map, Polyline} from 'react-kakao-maps-sdk';
 
-import styles from "./MapInTrip.module.scss";
+import styles from './MapInTrip.module.scss';
 
-import MapPinNumber from "@/components/CandidatesMap/MapPins/MapPinNumber";
+import MapPinCommon from '@/components/CandidatesMap/MapPins/MapPinCommon';
 
-import { MapInTripProps } from "@/types/route";
+import {MapInTripProps} from '@/types/route';
 
-function MapInTrip({ mapRef, center }: MapInTripProps) {
+function MapInTrip({mapRef, center}: MapInTripProps) {
   const linePath = [
-    { lat: 37.76437082535426, lng: 128.87675285339355 },
-    { lat: 37.7911054, lng: 128.9149116 },
-    { lat: 37.6964635, lng: 128.890664 },
+    {lat: 37.76437082535426, lng: 128.87675285339355},
+    {lat: 37.7911054, lng: 128.9149116},
+    {lat: 37.6964635, lng: 128.890664},
   ];
 
   return (
-    <Map
-      className={styles.mapInTripContainer}
-      center={center}
-      level={10}
-      ref={mapRef}
-    >
-      <Polyline
-        path={linePath}
-        strokeWeight={3}
-        strokeColor="#3F444D"
-        strokeOpacity={1}
-        strokeStyle="dashed"
-      />
+    <Map className={styles.mapInTripContainer} center={center} level={10} ref={mapRef}>
+      <Polyline path={linePath} strokeWeight={3} strokeColor='#3F444D' strokeOpacity={1} strokeStyle='dashed' />
       {linePath.map((item, index) => (
         <CustomOverlayMap position={item}>
           <div>
-            <MapPinNumber number={index + 1} />
+            <MapPinCommon number={index + 1} />
           </div>
         </CustomOverlayMap>
       ))}

src/components/Vote/DeleteCandidatesButton/DeleteCandidatesButton.tsx

@@ -24,7 +24,7 @@ const DeleteCandidatesButton = () => {
   const deleteCandidateMutation = useDeleteCandidates();
 
   const deleteCandidate = () => {
-    deleteCandidateMutation.mutate({voteId: Number(voteId), candidateId: [...selectedCandidates]});
+    deleteCandidateMutation.mutate({voteId: Number(voteId), candidateIds: [...selectedCandidates]});
     setSelectedCandidates(new Set());
   };
 

src/components/Vote/VoteBottomSlideContent/VoteMeatball/VoteMeatball.tsx

@@ -4,7 +4,7 @@ import {useRecoilState, useSetRecoilState} from 'recoil';
 
 import styles from './VoteMeatball.module.scss';
 
-import {useDeleteVote} from '@/hooks/Votes/vote';
+import {useChangeStatusComplete, useDeleteVote, useResetVoteStatus} from '@/hooks/Votes/vote';
 
 import AlertModal from '@/components/AlertModal/AlertModal';
 
@@ -30,10 +30,8 @@ const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: V
   const setIsCandidateSelecting = useSetRecoilState(isCandidateSelectingState);
 
   const deleteVoteMutation = useDeleteVote();
-
-  const modalConsole = () => {
-    console.log('변경');
-  };
+  const changeCompleteMutation = useChangeStatusComplete();
+  const resetStatusMutation = useResetVoteStatus();
 
   const showAlertModal = ({...content}: AlertModalProps) => {
     setIsBTOpen(false);
@@ -51,15 +49,25 @@ const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: V
     setIsCreateModalOpen(true);
   };
 
-  const deleteVote = async () => {
+  const handleDeleteVote = async () => {
     const res = await deleteVoteMutation.mutateAsync(Number(voteId));
-    console.log('delete 결과:', res);
+    console.log('delete 리액트쿼리:', res);
+  };
+
+  const handleChangeComplete = async () => {
+    const res = await changeCompleteMutation.mutateAsync(Number(voteId));
+    console.log('결정완료 리액트쿼리:', res);
+  };
+
+  const handleResetStatus = async () => {
+    const res = await resetStatusMutation.mutateAsync(Number(voteId));
+    console.log('재진행 리액트쿼리:', res);
   };
 
   return (
     <div className={styles.container}>
       {state === '결정완료' ? (
-        <button onClick={() => showAlertModal({onClickAction: modalConsole, ...retryVoteContent})}>
+        <button onClick={() => showAlertModal({onClickAction: handleResetStatus, ...retryVoteContent})}>
           <RepeatIcon />
           <p>투표 재진행</p>
         </button>
@@ -68,7 +76,7 @@ const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: V
           disabled={isZeroCandidates || allCandidatesNotVoted}
           onClick={() =>
             showAlertModal({
-              onClickAction: modalConsole,
+              onClickAction: handleChangeComplete,
               ...confirmVoteContent,
             })
           }
@@ -88,7 +96,7 @@ const VoteMeatball = ({state, title, isZeroCandidates, allCandidatesNotVoted}: V
         <p>후보 삭제</p>
       </button>
 
-      <button onClick={() => showAlertModal({onClickAction: deleteVote, ...deleteVoteContent})}>
+      <button onClick={() => showAlertModal({onClickAction: handleDeleteVote, ...deleteVoteContent})}>
         <TrashIcon />
         <p>투표 전체 삭제</p>
       </button>

src/components/Vote/VoteContent/CandidateCard/CandidateCard.module.scss

@@ -9,7 +9,6 @@
   padding-right: 16px;
 
   border-radius: 16px;
-  // border: 2px solid $neutral200;
   box-shadow: $shadow200;
   background-color: $neutral0;
 
@@ -62,14 +61,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
 
   &__contextBox {
     display: flex;
     flex-direction: column;
-    // gap: 8px;
 
     &__name {
       text-align: start;
+      white-space: pre-wrap;
       @include typography(titleSmall);
       color: $neutral900;
     }