fix: 페이지 전환 시 timer 중지하도록 수정

boostcampwm-2022 · Dec 1, 2022 · 6e968fc · 6e968fc
1 parent 222408a
commit 6e968fc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/client/src/container/main/TodoTimeInteraction.tsx b/client/src/container/main/TodoTimeInteraction.tsx
@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { ReactElement } from 'react';
+import { ReactElement, useEffect } from 'react';
 import styled from 'styled-components';
 
 import PostponeBox from '@components/main/PostponeBox';
@@ -8,7 +8,7 @@ import TodoTimeText from '@components/main/TodoTimeText';
 
 import { PlainTodo } from '@todo/todo.type';
 
-import { postponeClicked } from '@util/GlobalState';
+import { postponeClicked, isOnProgress } from '@util/GlobalState';
 
 const Wrapper = styled.div`
   width: 850px;
@@ -29,6 +29,8 @@ interface ComponentTodo {
   displayTime: string;
   handleOnToggle: Function;
   buttonConfig: any;
+  beforeMovePage: Function;
+  stopTimer: Function;
 }
 
 const TodoTimeInteraction = ({
@@ -39,8 +41,18 @@ const TodoTimeInteraction = ({
   displayTime,
   handleOnToggle,
   buttonConfig,
+  stopTimer,
 }: ComponentTodo): ReactElement => {
   const [isPostpone] = useAtom(postponeClicked);
+  const [, setIsOnProgressAtom] = useAtom(isOnProgress);
+
+  useEffect(() => {
+    return () => {
+      setIsOnProgressAtom('relaxing');
+      stopTimer();
+    };
+  }, []);
+
   return (
     <Wrapper>
       <TodoInteractionButton

diff --git a/client/src/hooks/useTodoList.tsx b/client/src/hooks/useTodoList.tsx
@@ -1,5 +1,5 @@
 import { useAtom } from 'jotai';
-import { todoList, postponeClicked, isOnProgress } from '@util/GlobalState.js';
+import { todoList, postponeClicked, isOnProgress, elasedTimeAtom } from '@util/GlobalState.js';
 import useElapsedTime from './useElapsedTime.js';
 import useActiveTodo from './useActiveTodo.js';
 import usePostpone from './usePostpone';
@@ -15,6 +15,20 @@ const useTodoList = (): any => {
   const [setDone] = useDone(activeTodo, setActiveTodo, elapsedTime, setElapsedTime);
   const [userState] = useAtom(isOnProgress);
   const [buttonConfig, handleOnToggle] = useButtonConfig(userState, startTimer, stopTimer);
+  // const [time] = useAtom(elasedTimeAtom);
+
+  // const beforeMovePage = (): void => {
+  //   stopTimer();
+  //   handleOnToggle();
+  //   todoListAtom
+  //     .updateElapsedTime(time)
+  //     .then((newTodoList) => {
+  //       setTodoListAtom(newTodoList);
+  //     })
+  //     .catch((err) => {
+  //       throw new Error(err.message);
+  //     });
+  // };
 
   return {
     setPostpone,
@@ -27,6 +41,8 @@ const useTodoList = (): any => {
     displayTime,
     buttonConfig,
     handleOnToggle,
+    beforeMovePage,
+    stopTimer,
   };
 };