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` 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 ( <> + {isModal && ( + setConfirm(true)} + /> + )} {isErrorModal && (