From de359fa1a67837635067dc23ed6e5fa83d08471c Mon Sep 17 00:00:00 2001 From: sscoderati Date: Tue, 9 Jan 2024 16:28:22 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Chore:=20=EB=AA=85=EC=83=81=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/meditation/types/index.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/pages/meditation/types/index.ts diff --git a/src/pages/meditation/types/index.ts b/src/pages/meditation/types/index.ts new file mode 100644 index 00000000..1e1f5a2d --- /dev/null +++ b/src/pages/meditation/types/index.ts @@ -0,0 +1,5 @@ +export interface MeditationStatusType { + started: boolean; + paused: boolean; + ended: boolean; +} From 3ff9427fb5e6c714cb56677b75cb9b8931f0c495 Mon Sep 17 00:00:00 2001 From: sscoderati Date: Tue, 9 Jan 2024 16:29:34 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Chore:=20=EB=AA=85=EC=83=81=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20styled=20Props=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=ED=91=9C=EA=B8=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 명상 상태 타입 대응 --- src/pages/meditation/Meditation.style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/meditation/Meditation.style.ts b/src/pages/meditation/Meditation.style.ts index dfb8d45b..60eafe05 100644 --- a/src/pages/meditation/Meditation.style.ts +++ b/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` From cfdf85dc9f51230044b61652522bae3159b23187 Mon Sep 17 00:00:00 2001 From: sscoderati Date: Tue, 9 Jan 2024 16:30:50 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Chore:=20=EB=AA=85=EC=83=81=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EB=B3=80=EA=B2=BD=20Setter=20Prop=20=EC=A0=84?= =?UTF-8?q?=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 명상 페이지 -> TimeSetter -> 종료 버튼까지 전달 --- src/pages/meditation/Meditation.tsx | 1 + src/pages/meditation/components/MeditationTimeSetter.tsx | 9 +++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/meditation/Meditation.tsx b/src/pages/meditation/Meditation.tsx index e5b10419..ab070b84 100644 --- a/src/pages/meditation/Meditation.tsx +++ b/src/pages/meditation/Meditation.tsx @@ -48,6 +48,7 @@ const Meditation = () => { {status.started && } {!status.started && ( diff --git a/src/pages/meditation/components/MeditationTimeSetter.tsx b/src/pages/meditation/components/MeditationTimeSetter.tsx index 8d513d03..330d8cf5 100644 --- a/src/pages/meditation/components/MeditationTimeSetter.tsx +++ b/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 + >; } const MeditationTimeSetter = ({ themePicked, - meditationStatus + meditationStatus, + meditationStatusSetter }: MeditationTimeSetterProps) => { const [time, setTime] = useRecoilState(meditationTime); const longClickIdRef = useRef(null); @@ -169,7 +174,7 @@ const MeditationTimeSetter = ({ )} {meditationStatus.started && !meditationStatus.ended && ( - + )} ); From abfac24c4570455935c67962b5d71400167c3843 Mon Sep 17 00:00:00 2001 From: sscoderati Date: Tue, 9 Jan 2024 16:31:37 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Chore:=20timerId=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/meditation/states/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/meditation/states/index.ts b/src/pages/meditation/states/index.ts index 8a18737a..9e2815fa 100644 --- a/src/pages/meditation/states/index.ts +++ b/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 +}); From 64e69d38cf990b0f93f9c4e5eebae5817dce4d81 Mon Sep 17 00:00:00 2001 From: sscoderati Date: Tue, 9 Jan 2024 16:32:17 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Refactor:=20timerId=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EB=A1=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../meditation/components/MeditationTimer.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/pages/meditation/components/MeditationTimer.tsx b/src/pages/meditation/components/MeditationTimer.tsx index 8cf300de..aeb43823 100644 --- a/src/pages/meditation/components/MeditationTimer.tsx +++ b/src/pages/meditation/components/MeditationTimer.tsx @@ -9,15 +9,12 @@ 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>; } const MeditationTimer = ({ @@ -25,6 +22,7 @@ const MeditationTimer = ({ 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 }); }; From 7008cb08a2fae8cd9a1b5315d52ba514af910f7e Mon Sep 17 00:00:00 2001 From: sscoderati Date: Tue, 9 Jan 2024 16:32:56 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Fix:=20=EB=AA=85=EC=83=81=20=EC=A2=85?= =?UTF-8?q?=EB=A3=8C=20=EB=B2=84=ED=8A=BC=20=ED=95=B8=EB=93=A4=EB=9F=AC?= =?UTF-8?q?=EC=97=90=20=EB=AA=85=EC=83=81=20=EA=B4=80=EB=A0=A8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MeditationEndButton.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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 ( <>