Merge pull request #185 from Make-A-Wish-Sopt/develop

Develop
Make-A-Wish-Sopt · Jan 9, 2024 · 4899412 · 4899412
2 parents 4fe2593 + 50008c3
commit 4899412
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git a/components/Common/VerticalProgressBar.tsx b/components/Common/VerticalProgressBar.tsx
@@ -19,7 +19,7 @@ export default function VerticalProgressBar(props: ProgressBarProps) {
 
       {/* 리팩토링 1순위 ㅋㅋㅋ */}
       <Styled.BarContainer>
-        {percent && percent >= 100 && (
+        {percent && percent > 0 && percent >= 100 ? (
           <Image
             src={FireIcImg}
             alt="불꽃 아이콘"
@@ -31,6 +31,8 @@ export default function VerticalProgressBar(props: ProgressBarProps) {
               transform: 'rotate(180deg)',
             }}
           />
+        ) : (
+          ''
         )}
         <Styled.Progress percent={Number(percent)} />
       </Styled.BarContainer>

diff --git 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<string | string[] | undefined>('');
@@ -36,7 +37,7 @@ export default function LinksContainer() {
             <Image src={LinkBeefCakeImg} alt="케이크" width={152} height={169} />
           </Styled.ImageContainer>
           <Styled.About onClick={handleMovePage}>모인 케이크 보러가기 {'>'} </Styled.About>
-          <Styled.AboutSmall>총 {wishData?.price}원</Styled.AboutSmall>
+          <Styled.AboutSmall>총 {convertMoneyText(String(wishData?.price))}원</Styled.AboutSmall>
         </Styled.ContentContainer>
 
         <VerticalProgressBar percent={wishData?.percent} />
@@ -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
@@ -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<number[]>([]);
   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() {
           />
         </Modal>
       )}
+      <Styled.DeleteIconButton onClick={() => selectedLinks.length > 0 && handleToggle()}>
+        <Image src={DeleteBtnIc} alt="삭제 아이콘" />
+      </Styled.DeleteIconButton>
 
       <Styled.Title>지난 소원 링크 모음</Styled.Title>
       <Styled.Container>
@@ -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
@@ -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<WishesDataInputType, any, u
  * 소원링크 삭제
  */
 export function useDeleteWishes() {
-  const mutation = useMutation((wishesData: number[]) => 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
@@ -3,7 +3,7 @@ import LinksContainer from '@/components/Mypage/Links/[id]';
 
 export default function LinksPage() {
   return (
-    <Layout layoutKey="empty">
+    <Layout layoutKey="header">
       <LinksContainer />
     </Layout>
   );