diff --git a/components/Common/VerticalProgressBar.tsx b/components/Common/VerticalProgressBar.tsx index fc647f2c..1d56a60a 100644 --- a/components/Common/VerticalProgressBar.tsx +++ b/components/Common/VerticalProgressBar.tsx @@ -19,7 +19,7 @@ export default function VerticalProgressBar(props: ProgressBarProps) { {/* 리팩토링 1순위 ㅋㅋㅋ */} - {percent && percent >= 100 && ( + {percent && percent > 0 && percent >= 100 ? ( 불꽃 아이콘 + ) : ( + '' )} diff --git a/components/Mypage/Links/[id].tsx b/components/Mypage/Links/[id].tsx index 2c0ae8f8..447a5597 100644 --- a/components/Mypage/Links/[id].tsx +++ b/components/Mypage/Links/[id].tsx @@ -7,6 +7,7 @@ import { useEffect, useState } from 'react'; import { convertDateFormat } from '@/hooks/common/useDate'; import VerticalProgressBar from '@/components/Common/VerticalProgressBar'; import { useGetSingleWishInfo } from '@/hooks/queries/wishes'; +import { convertMoneyText } from '@/utils/common/convertMoneyText'; export default function LinksContainer() { const [wishId, setWishId] = useState(''); @@ -36,7 +37,7 @@ export default function LinksContainer() { 케이크 모인 케이크 보러가기 {'>'} - 총 {wishData?.price}원 + 총 {convertMoneyText(String(wishData?.price))}원 @@ -69,6 +70,10 @@ const Styled = { display: flex; flex-direction: column; justify-content: center; + + width: 100%; + + margin-left: 4.3rem; `, BarContainer: styled.div` @@ -79,7 +84,6 @@ const Styled = { ImageContainer: styled.div` width: 100%; text-align: center; - padding: 4rem 0 0; `, About: styled.div` diff --git a/components/Mypage/Links/index.tsx b/components/Mypage/Links/index.tsx index ef676d7d..c8e9a87c 100644 --- a/components/Mypage/Links/index.tsx +++ b/components/Mypage/Links/index.tsx @@ -6,16 +6,15 @@ import DeleteModal from '@/components/Common/Modal/DeleteModal'; import { useState } from 'react'; import WishLists from './WishLists'; import NoWishLists from './NoWishLists'; -import { useQueryClient } from 'react-query'; -import { QUERY_KEY } from '@/constant/queryKey'; import { useDeleteWishes, useGetWishLinks } from '@/hooks/queries/wishes'; +import Image from 'next/image'; +import { DeleteBtnIc } from '@/public/assets/icons'; export default function LinksMainContainer() { const [selectedLinks, setSelectedLinks] = useState([]); const { isOpen, handleToggle } = useModal(); - const queryClient = useQueryClient(); - const deleteWishesMutation = useDeleteWishes(); + const { handleDeleteWishes } = useDeleteWishes(); const { wishLinks, noWishes } = useGetWishLinks(); @@ -29,11 +28,7 @@ export default function LinksMainContainer() { const handleDeleteConfirm = () => { if (selectedLinks.length > 0) { - deleteWishesMutation.mutate(selectedLinks, { - onSuccess: () => { - queryClient.invalidateQueries(QUERY_KEY.WISH_LINKS); - }, - }); + handleDeleteWishes(selectedLinks); } }; @@ -48,6 +43,9 @@ export default function LinksMainContainer() { /> )} + selectedLinks.length > 0 && handleToggle()}> + 삭제 아이콘 + 지난 소원 링크 모음 @@ -77,4 +75,10 @@ const Styled = { color: ${theme.colors.gray4}; margin: 2rem 1rem 2rem; `, + + DeleteIconButton: styled.button` + position: fixed; + top: 1.9rem; + right: 2.2rem; + `, }; diff --git a/hooks/queries/wishes.ts b/hooks/queries/wishes.ts index a9942aa2..1598829e 100644 --- a/hooks/queries/wishes.ts +++ b/hooks/queries/wishes.ts @@ -15,7 +15,7 @@ import { WishLinksType } from '@/types/links/wishLinksType'; import router from 'next/router'; import { useState } from 'react'; import { UseFormReturn } from 'react-hook-form'; -import { useMutation, useQuery } from 'react-query'; +import { useMutation, useQuery, useQueryClient } from 'react-query'; import { useSetRecoilState } from 'recoil'; /** @@ -77,9 +77,17 @@ export function usePostWishes(methods: UseFormReturn deleteWishes(wishesData)); + const queryClient = useQueryClient(); + const { data, mutate: handleDeleteWishes } = useMutation( + (wishesData: number[]) => deleteWishes(wishesData), + { + onSuccess: () => { + queryClient.invalidateQueries(QUERY_KEY.WISH_LINKS); + }, + }, + ); - return mutation; + return { data, handleDeleteWishes }; } /** diff --git a/pages/mypage/links/[id].tsx b/pages/mypage/links/[id].tsx index 2f5b3214..fbef8626 100644 --- a/pages/mypage/links/[id].tsx +++ b/pages/mypage/links/[id].tsx @@ -3,7 +3,7 @@ import LinksContainer from '@/components/Mypage/Links/[id]'; export default function LinksPage() { return ( - + );