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 (
-
+
);