Merge pull request #195 from Make-A-Wish-Sopt/feature/194-Add_Modal

Feature/194 add modal
Make-A-Wish-Sopt · Feb 2, 2024 · 561727c · 561727c
2 parents 4ad1cd7 + ffd074f
commit 561727c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx
@@ -10,6 +10,10 @@ import { BankListType } from '@/types/bankListType';
 import Button from '../Common/Button';
 import { useState } from 'react';
 import { useGetPublicWishes } from '@/hooks/queries/public';
+import ConfirmCancleModal from '../Common/Modal/ModalForm/ConfirmCancleModal';
+import useModal from '@/hooks/common/useModal';
+import { MainCakeImg } from '@/public/assets/images';
+import Modal from '../Common/Modal';
 
 interface CakesPayProps {
   handlePrevStep: () => void;
@@ -26,6 +30,8 @@ export default function CakesPay(props: CakesPayProps) {
   const PAYMENTS: BankListType[] = [BANK_LIST[5], BANK_LIST[1]];
   const [selectedPayment, setSelected] = useState<BankListType>();
 
+  const { isOpen, handleToggle } = useModal();
+
   const handlePaymentSelect = (payment: BankListType) => {
     setSelected(payment);
   };
@@ -82,13 +88,29 @@ export default function CakesPay(props: CakesPayProps) {
             : 'https://apps.apple.com/app/id1258016944',
         );
       }
-
-      handleNextStep();
     }
+    handleToggle();
   };
 
   return (
     <>
+      {isOpen && (
+        <Modal isOpen={isOpen} handleToggle={handleToggle}>
+          <ConfirmCancleModal
+            handleToggle={handleToggle}
+            handleConfirmFn={handleNextStep}
+            leftText="송금 안했어요"
+            rightText="송금했어요"
+          >
+            <Image src={MainCakeImg} alt={'케이크'} width={60} height={60} />
+            <Styled.DeleteText>
+              {
+                '친구 계좌로 돈을 송금하셨나요?\n\n※ 연결된 은행으로 직접 송금하지 않았다면,\n실제로 돈이 보내진 게 아니니 안심하세요!'
+              }
+            </Styled.DeleteText>
+          </ConfirmCancleModal>
+        </Modal>
+      )}
       <Styled.Header>
         <Image src={BackBtnIc} alt="뒤로가기" onClick={handlePrevStep} />
       </Styled.Header>
@@ -178,4 +200,15 @@ const Styled = {
   ButtonWrapper: styled.div`
     padding-bottom: 4.6rem;
   `,
+
+  DeleteText: styled.span`
+    ${theme.fonts.body14};
+    color: ${theme.colors.dark_blue};
+    margin: 0.7rem 0 1rem;
+
+    line-height: 140%;
+    text-align: center;
+
+    white-space: pre-line;
+  `,
 };
diff --git a/components/Common/Modal/CancelWishesModal.tsx b/components/Common/Modal/CancelWishesModal.tsx
@@ -14,7 +14,7 @@ export default function CancleWishesModal(props: CancleWishesModalProps) {
   return (
     <ConfirmCancleModal
       handleToggle={handleToggle}
-      handleDelete={handleCancleWishes}
+      handleConfirmFn={handleCancleWishes}
       rightText="중단하기"
     >
       <Image src={MainCakeImg} alt={'케이크'} width={60} height={60} />

diff --git a/components/Common/Modal/DeleteModal.tsx b/components/Common/Modal/DeleteModal.tsx
@@ -14,13 +14,14 @@ export default function DeleteModal(props: DeleteModalProps) {
   const { clickModal, handleDelete, linksCount } = props;
 
   return (
-    <ConfirmCancleModal handleToggle={clickModal} handleDelete={handleDelete}>
+    <ConfirmCancleModal handleToggle={clickModal} handleConfirmFn={handleDelete}>
       <Image src={MainCakeImg} alt={'케이크'} width={60} height={60} />
       <Styled.DeleteText>총 {linksCount}개의 소원링크를 삭제합니다.</Styled.DeleteText>
     </ConfirmCancleModal>
   );
 }
 
+
 const Styled = {
   DeleteText: styled.div`
     ${theme.fonts.body14};

diff --git a/components/Common/Modal/ModalForm/ConfirmCancleModal.tsx b/components/Common/Modal/ModalForm/ConfirmCancleModal.tsx
@@ -8,13 +8,13 @@ import { PropsWithChildren } from 'react';
 
 interface ConfirmCancleModalPrpos {
   handleToggle: () => void;
-  handleDelete: () => void;
+  handleConfirmFn: () => void;
   leftText?: string;
   rightText?: string;
 }
 
 export default function ConfirmCancleModal(props: PropsWithChildren<ConfirmCancleModalPrpos>) {
-  const { handleToggle, handleDelete, leftText, rightText, children } = props;
+  const { handleToggle, handleConfirmFn, leftText, rightText, children } = props;
   return (
     <Styled.Container>
       <Styled.IconContainer>
@@ -31,7 +31,7 @@ export default function ConfirmCancleModal(props: PropsWithChildren<ConfirmCancl
           boxType="half"
           colorSystem="mainBlue_white"
           handleClickFn={() => {
-            handleDelete();
+            handleConfirmFn();
             handleToggle();
           }}
         >
@@ -44,12 +44,11 @@ export default function ConfirmCancleModal(props: PropsWithChildren<ConfirmCancl
 
 const Styled = {
   Container: styled.div`
-    width: 31.6rem;
+    width: 32.8rem;
 
     background-color: ${theme.colors.pastel_blue};
     padding: 2rem;
     border-radius: 1.6rem;
-    margin: 0 1rem 0;
 
     position: absolute;
     top: 50%;

diff --git a/constant/cakeList.ts b/constant/cakeList.ts
@@ -39,6 +39,15 @@ import {
 import { CakeListType } from '@/types/cakes/cakeListType';
 
 export const CAKE_LIST: CakeListType[] = [
+  {
+    name: '구리구리 똥 케이크',
+    price: 0,
+    cakeImage: PoopCakeImg,
+    detailImage: PoopCakeDetailImg,
+    thanksImage: PoopCakeThanksImg,
+    smallImage: PoopCakeSmallImg,
+    cakeNumber: 1,
+  },
   {
     name: '달콤 커피 케이크',
     price: 4900,
@@ -102,15 +111,7 @@ export const CAKE_LIST: CakeListType[] = [
     smallImage: PerfumeCakeSmallImg,
     cakeNumber: 8,
   },
-  {
-    name: '구리구리 똥 케이크',
-    price: 0,
-    cakeImage: PoopCakeImg,
-    detailImage: PoopCakeDetailImg,
-    thanksImage: PoopCakeThanksImg,
-    smallImage: PoopCakeSmallImg,
-    cakeNumber: 1,
-  },
+
   // {
   //   name: '루돌프 사슴코 케이크',
   //   price: 0,