diff --git a/README.md b/README.md index 34486b7..b6b12fb 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,8 @@ **프로젝트 기간** 2023.04 - 2023.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) + ### 로그인 페이지 diff --git a/src/apis/vote.ts b/src/apis/vote.ts index 71724ed..5cbde5c 100644 --- a/src/apis/vote.ts +++ b/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; +} diff --git a/src/components/vote/VoteListItem.tsx b/src/components/vote/VoteListItem.tsx index 4ea9cbd..bfa0123 100644 --- a/src/components/vote/VoteListItem.tsx +++ b/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 (
  • @@ -85,10 +89,14 @@ function VoteListItem({ className="vote-list__item-img" > {!!image ? ( - votedImage ) : (

    {name}

    diff --git a/src/components/vote/VoteModal.tsx b/src/components/vote/VoteModal.tsx index 01ce841..b591e69 100644 --- a/src/components/vote/VoteModal.tsx +++ b/src/components/vote/VoteModal.tsx @@ -86,6 +86,7 @@ function VoteModal({ className="vote-input-box__nickname" placeholder="닉네임을 입력해 주세요." disabled={isAnonymous} + autoComplete="off" />
    익명 diff --git a/src/components/vote/VotedSticker.tsx b/src/components/vote/VotedSticker.tsx index ba81746..e19e66c 100644 --- a/src/components/vote/VotedSticker.tsx +++ b/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 ( <> {isFocused && ( diff --git a/src/pages/Vote.tsx b/src/pages/Vote.tsx index 550b57d..62033cc 100644 --- a/src/pages/Vote.tsx +++ b/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)]);