Merge pull request #211 from YAPP-Github/feature/rematch-modal

feat: 다시 매칭 모달 추가

src/components/base/Modal.tsx

@@ -93,6 +93,7 @@ const ModalInner = styled.div<IModalInnerProps>`
   height: ${({ height }) => height}px;
   border-radius: 4px;
   animation: ${({ isClose }) => (isClose ? transitions.popOut : transitions.popIn)} 0.2s ease-in-out;
+  word-break: keep-all;
 `;
 
 const ModalTitle = styled.h2`

src/components/domain/matching/buttons/EndButton.tsx

@@ -3,7 +3,7 @@ import { useToggle } from '@/hooks/common';
 import { postReMatchMeetingSurvey } from '@/lib/api/meeting';
 import { postReMatchDatingSurvey } from '@/lib/api/dating';
 import { useLocation } from 'react-router-dom';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Status } from '@/pages/MatchingPage';
 
 interface EndButtonProps {
@@ -12,12 +12,18 @@ interface EndButtonProps {
 
 function EndButton({ handleStatus }: EndButtonProps) {
   const location = useLocation();
+  const [isModal, onToggleModal] = useToggle();
   const [isErrorModal, onToggleErrorModal] = useToggle();
   const [errorMessage, setErrorMessage] = useState('에러가 발생했습니다😭 다시한번 시도해 주세요!');
+  const [isConfirm, setConfirm] = useState(false);
 
   const handleClick = async () => {
-    const matchMeeting = location.pathname.includes('meeting');
+    onToggleModal();
+  };
+
+  const handleRematch = async () => {
     try {
+      const matchMeeting = location.pathname.includes('meeting');
       matchMeeting ? await postReMatchMeetingSurvey() : await postReMatchDatingSurvey();
       handleStatus('waiting');
     } catch (e) {
@@ -26,11 +32,29 @@ function EndButton({ handleStatus }: EndButtonProps) {
       onToggleErrorModal();
     }
   };
+
+  useEffect(() => {
+    if (isConfirm) {
+      handleRematch();
+    }
+  }, [isConfirm]);
+
   return (
     <>
       <Button onClick={handleClick} size="medium">
         다시 매칭하기
       </Button>
+      {isModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="다시 매칭하시겠습니까?"
+          text="　이전 설문 내용을 토대로　　다시 매칭해드립니다"
+          onToggleModal={onToggleModal}
+          onClick={() => setConfirm(true)}
+        />
+      )}
       {isErrorModal && (
         <Modal
           width={200}