🚨 Fix: 명상 끝내기 액션 개선

src/pages/meditation/Meditation.style.ts

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
+import { MeditationStatusType } from '@pages/meditation/types';
 
 interface MeditationPageProps {
-  meditationStatus: { started: boolean; paused: boolean; ended: boolean };
+  meditationStatus: MeditationStatusType;
 }
 
 export const MeditationPage = styled.div<MeditationPageProps>`

src/pages/meditation/Meditation.tsx

@@ -48,6 +48,7 @@ const Meditation = () => {
         {status.started && <MeditationAudioPlayer />}
         <MeditationTimeSetter
           meditationStatus={status}
+          meditationStatusSetter={setStatus}
           themePicked={selectedTheme}
         />
         {!status.started && (

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<React.SetStateAction<MeditationStatusType>>;
+}) => {
   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 (
     <>

src/pages/meditation/components/MeditationTimeSetter.tsx

@@ -18,15 +18,20 @@ import {
 import MeditationEndButton from '@pages/meditation/components/MeditationEndButton';
 import { meditationTime, totalMeditationTime } from '@pages/meditation/states';
 import { ThemeInfoType } from '@components/ThemePicker/ThemePicker';
+import { MeditationStatusType } from '@pages/meditation/types';
 
 interface MeditationTimeSetterProps {
   themePicked: ThemeInfoType;
   meditationStatus: { started: boolean; paused: boolean; ended: boolean };
+  meditationStatusSetter?: React.Dispatch<
+    React.SetStateAction<MeditationStatusType>
+  >;
 }
 
 const MeditationTimeSetter = ({
   themePicked,
-  meditationStatus
+  meditationStatus,
+  meditationStatusSetter
 }: MeditationTimeSetterProps) => {
   const [time, setTime] = useRecoilState<number>(meditationTime);
   const longClickIdRef = useRef<number>(null);
@@ -169,7 +174,7 @@ const MeditationTimeSetter = ({
         </TimeSetterContainer>
       )}
       {meditationStatus.started && !meditationStatus.ended && (
-        <MeditationEndButton />
+        <MeditationEndButton statusSetter={meditationStatusSetter} />
       )}
     </>
   );

src/pages/meditation/components/MeditationTimer.tsx

@@ -9,22 +9,20 @@ import {
   TimerElementBorder
 } from './MeditationTimer.style';
 import { ICON_NAME_PAUSE, ICON_NAME_PLAY } from '@pages/meditation/constants';
-import { meditationTime } from '../states';
-
-let timerId = 0;
+import { intervalId, meditationTime } from '@pages/meditation/states';
+import { MeditationStatusType } from '@pages/meditation/types';
 
 interface MeditationTimerProps {
-  meditationStatus: { started: boolean; paused: boolean; ended: boolean };
-  statusSetter: React.Dispatch<
-    React.SetStateAction<{ started: boolean; paused: boolean; ended: boolean }>
-  >;
+  meditationStatus: MeditationStatusType;
+  statusSetter: React.Dispatch<React.SetStateAction<MeditationStatusType>>;
 }
 
 const MeditationTimer = ({
   meditationStatus,
   statusSetter
 }: MeditationTimerProps) => {
   const [time, setTime] = useRecoilState(meditationTime);
+  const [timerId, setTimerId] = useRecoilState(intervalId);
   const [hovered, setHovered] = useState(false);
 
   const startTimer = () => {
@@ -33,17 +31,19 @@ const MeditationTimer = ({
     }
     statusSetter({ ...meditationStatus, paused: false });
 
-    timerId = setInterval(() => {
-      setTime((prevTime) => {
-        if (prevTime > 0) {
-          return prevTime - 1;
-        }
-        clearInterval(timerId);
-        statusSetter({ ...meditationStatus, paused: true, ended: true });
-        timerId = 0;
-        return prevTime;
-      });
-    }, 1000);
+    setTimerId(
+      setInterval(() => {
+        setTime((prevTime) => {
+          if (prevTime > 0) {
+            return prevTime - 1;
+          }
+          clearInterval(timerId);
+          statusSetter({ ...meditationStatus, paused: true, ended: true });
+          setTimerId(0);
+          return prevTime;
+        });
+      }, 1000)
+    );
 
     statusSetter({ ...meditationStatus, started: true, paused: false });
   };

src/pages/meditation/states/index.ts

@@ -9,3 +9,8 @@ export const totalMeditationTime = atom({
   key: 'totalMeditationTime',
   default: 0
 });
+
+export const intervalId = atom({
+  key: 'intervalId',
+  default: 0
+});

src/pages/meditation/types/index.ts

@@ -0,0 +1,5 @@
+export interface MeditationStatusType {
+  started: boolean;
+  paused: boolean;
+  ended: boolean;
+}