From 8cd4e2e5b39861ec7db588e32426e05180ac94c1 Mon Sep 17 00:00:00 2001
From: Jiyoung Kim <kimm.jeongs@gmail.com>
Date: Sat, 30 Jul 2022 18:41:21 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8B=A4=EC=8B=9C=20=EB=A7=A4=EC=B9=AD?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/Modal.tsx                 |  1 +
 .../domain/matching/buttons/EndButton.tsx     | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/base/Modal.tsx b/src/components/base/Modal.tsx
index 1d26ce4..0980e5d 100644
--- a/src/components/base/Modal.tsx
+++ b/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`
diff --git a/src/components/domain/matching/buttons/EndButton.tsx b/src/components/domain/matching/buttons/EndButton.tsx
index b289e3b..9141008 100644
--- a/src/components/domain/matching/buttons/EndButton.tsx
+++ b/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}