diff --git a/src/pages/meditation/components/MeditationEndButton.tsx b/src/pages/meditation/components/MeditationEndButton.tsx index 564ea1c4..63dc6811 100644 --- a/src/pages/meditation/components/MeditationEndButton.tsx +++ b/src/pages/meditation/components/MeditationEndButton.tsx @@ -2,16 +2,28 @@ import { useState } from 'react'; import { Confirm } from '@components/Confirm'; import { Button } from '@components/Button'; import { EndButtonContainer } from './MeditationEndButton.style'; +import { MeditationStatusType } from '@pages/meditation/types'; +import { intervalId, meditationTime } from '@pages/meditation/states'; +import { useRecoilState, useSetRecoilState } from 'recoil'; -const MeditationEndButton = () => { +const MeditationEndButton = ({ + statusSetter: meditationStatusSetter +}: { + statusSetter: React.Dispatch>; +}) => { const [confirmCaptured, setConfirmCaptured] = useState(false); + const setTime = useSetRecoilState(meditationTime); + const [timerId, setTimerId] = useRecoilState(intervalId); const handleCancelButton = () => { setConfirmCaptured(false); }; const handleConfirmButton = () => { - location.reload(); // 리팩토링 전 임시방편 + meditationStatusSetter({ started: false, paused: true, ended: false }); + clearInterval(timerId); + setTimerId(0); + setTime(0); }; return ( <>