Feature/vote page

README.md

@@ -7,8 +7,8 @@
 **프로젝트 기간**
 2023.04 - 2023.10
 
-<img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/61b44397-9c4d-4d89-aaaf-eefdcde9b006"  width="15%"/>
-<img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/20edfdd4-781e-4936-be10-b725167abb0c"  width="15%"/><img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/ea8e2545-a397-4c01-bed5-e1842f3b9b98"  width="15%"/><img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/3bd6010d-b4b3-43d4-85ad-d5c4af41830f"  width="15%"/><img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/f30a7757-774f-4684-aa18-ebd5743654b8"  width="15%"/>
+<img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/61b44397-9c4d-4d89-aaaf-eefdcde9b006"  width="10%"/>
+<img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/20edfdd4-781e-4936-be10-b725167abb0c"  width="10%"/><img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/ea8e2545-a397-4c01-bed5-e1842f3b9b98"  width="10%"/><img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/3bd6010d-b4b3-43d4-85ad-d5c4af41830f"  width="10%"/><img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/f30a7757-774f-4684-aa18-ebd5743654b8"  width="10%"/>
 
 ## 기술스택
 
@@ -21,7 +21,7 @@
 
 ### 데모 영상
 
-![화면 기록 2023-10-31 오후 9 43 47 (1)](https://github.com/TOO-IT/Tooit-frontend/assets/71440070/765c4393-75cb-4684-af6c-f2b8df8552ca)
+<img src="https://github.com/TOO-IT/Tooit-frontend/assets/71440070/3edc0dba-1424-433d-9fad-e58cdb379175"  width="100%"/>
 
 ### 로그인 페이지
 

src/apis/vote.ts

@@ -77,3 +77,10 @@ export async function reviewVote({
   const { data } = await client.post('myPage/review', { content, voteId });
   return data;
 }
+
+export async function deleteSticker(voteItemId: number, stickerId: number) {
+  const { data } = await client.delete('sticker', {
+    data: { voteItemId, stickerId },
+  });
+  return data;
+}

src/components/vote/VoteListItem.tsx

@@ -22,8 +22,8 @@ function VoteListItem({
   const { image, stickerCount, name, content, id, stickerList } = item;
 
   function saveHandler() {
-    //  TODO : CORS 에러 해결
     html2canvas(imgItemRef?.current, {
+      scale: 4,
       useCORS: true,
       allowTaint: true,
       ignoreElements: (element) =>
@@ -55,6 +55,10 @@ function VoteListItem({
     setStickerSize(getStickerSize());
   }, [stickerList, isTablet]);
 
+  const imgSrc = `https://d2j21jlzisi105.cloudfront.net/${
+    image.split('.com/')[1]
+  }?timestamp=${new Date().getTime()}`;
+
   return (
     <li className="vote-list__item">
       <div className="vote-list__item-header">
@@ -85,10 +89,14 @@ function VoteListItem({
         className="vote-list__item-img"
       >
         {!!image ? (
-          <img
-            src={image}
-            alt="votedImage"
+          <div
             className="vote-list__item-img__img"
+            style={{
+              backgroundImage: `url(${imgSrc})`,
+              backgroundSize: 'cover',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center center',
+            }}
           />
         ) : (
           <h1 className="vote-list__item-img__name">{name}</h1>

src/components/vote/VoteModal.tsx

@@ -86,6 +86,7 @@ function VoteModal({
               className="vote-input-box__nickname"
               placeholder="닉네임을 입력해 주세요."
               disabled={isAnonymous}
+              autoComplete="off"
             />
             <div className="vote-input-box__nickname-checkbox">
               <span>익명</span>

src/components/vote/VotedSticker.tsx

@@ -64,6 +64,11 @@ function VotedSticker({
 
   const mobileLeft = comment ? '50%' : `${STICKER_X}%`;
 
+  const stickerSrc =
+    'https://d2j21jlzisi105.cloudfront.net/' +
+    src.split('.com/')[1] +
+    `?timestamp=${new Date().getTime()}`;
+
   return (
     <>
       <button
@@ -83,7 +88,7 @@ function VotedSticker({
           stickerFocusHandler(sticker);
         }}
       >
-        <img alt="sticker" src={src} />
+        <img alt="sticker" src={stickerSrc} crossOrigin="anonymous" />
       </button>
 
       {isFocused && (

src/pages/Vote.tsx

@@ -14,7 +14,7 @@ import VoteInfoHeader from '../components/vote/VoteInfoHeader';
 import VoteDescription from '../components/vote/VoteDescription';
 import DeadlineShare from '../components/vote/DeadlineShare';
 import { useQuery, useQueryClient } from 'react-query';
-import { getVote, putsticker, deleteVote } from '../apis/vote';
+import { getVote, putsticker, deleteVote, deleteSticker } from '../apis/vote';
 import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import useVoteSticker from '../hooks/useVoteSticker';
 import { cancelVote } from '../slices/vote';
@@ -33,6 +33,7 @@ function Vote() {
   const {
     locateStickerHandler,
     inputStickerDataHandler,
+    unSelectStickerHandler,
     sticker: voteSticker,
   } = useVoteSticker();
   const { data: userData } = useQuery(['userData'], getUserInfo);
@@ -151,11 +152,13 @@ function Vote() {
     setRevoteModalVisible(false);
   }, []);
 
-  const revoteHandler = useCallback(() => {
-    // TODO : deleteVote
+  const revoteHandler = useCallback(async () => {
+    voteId && mySticker && (await deleteSticker(+voteId, mySticker.id));
+    await queryClient.invalidateQueries(['voteData', voteId]);
+    unSelectStickerHandler();
+
     setRevoteModalVisible(false);
-    queryClient.invalidateQueries(['voteData', voteId]);
-  }, []);
+  }, [voteId, mySticker]);
 
   const deleteHandler = useCallback(async () => {
     const data = await deleteVote([Number(voteId)]);