fix: elapsed time 0으로 보여지는 문제 수정

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

Hide file tree

Showing 7 changed files with 54 additions and 44 deletions.
diff --git a/client/src/components/main/PostponeBox.tsx b/client/src/components/main/PostponeBox.tsx
@@ -31,19 +31,17 @@ const StyledPostponeBox = styled.div`
 interface PostponeProps {
   setPostpone: Function;
   postponeOptions: string[];
-  time: number;
-  setTime: Function;
+  time?: number;
+  setTime?: Function;
   handleOnToggle: Function;
 }
 
 const PostponeBox = (props: PostponeProps): ReactElement => {
-  const { setPostpone, postponeOptions, time, setTime, handleOnToggle } = props;
+  const { setPostpone, postponeOptions, handleOnToggle } = props;
   const [progressState] = useAtom(isOnProgress);
 
   const handlePosponeClicked = (text: string): void => {
-    setPostpone(time, text);
-    setTime(0);
-
+    setPostpone(text);
     if (progressState === ACTIVE_TODO_STATE.working) {
       handleOnToggle();
     }

diff --git a/client/src/components/main/TodoInteractionButton.tsx b/client/src/components/main/TodoInteractionButton.tsx
@@ -10,8 +10,7 @@ import Image from '../Image';
 import { postponeClicked, isOnProgress } from '@util/GlobalState.js';
 import { ACTIVE_TODO_STATE } from '@util/Constants';
 
-import useElapsedTime from '../../hooks/useElapsedTime.js';
-import useDone from '../../hooks/useDone.js';
+import { PlainTodo } from '@todo/todo.type';
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -23,21 +22,20 @@ interface ButtonConfig {
 interface ButtonProps {
   buttonConfig: ButtonConfig;
   handleOnToggle: Function;
+  activeTodo: PlainTodo;
+  setDone: Function;
 }
 
-const TodoInteractionButton = ({ buttonConfig, handleOnToggle }: ButtonProps): ReactElement => {
+const TodoInteractionButton = ({ buttonConfig, handleOnToggle, activeTodo, setDone }: ButtonProps): ReactElement => {
   const [isPostpone, setIsPostpone] = useAtom(postponeClicked);
   const [progressState] = useAtom(isOnProgress);
-  const [, , , time, setTime] = useElapsedTime();
-  const [setDone] = useDone();
 
   const startPauseButton = useMemo(() => {
     return <Button context={<Image src={buttonConfig.src} />} onClick={() => handleOnToggle()} />;
   }, [buttonConfig.src]);
 
   const handleDoneClicked = (): void => {
-    setDone(time);
-    setTime(0);
+    setDone(activeTodo.elapsedTime);
     if (progressState === ACTIVE_TODO_STATE.working) {
       handleOnToggle();
     }

diff --git a/client/src/components/main/TodoTimeText.tsx b/client/src/components/main/TodoTimeText.tsx
@@ -1,8 +1,8 @@
-import { ReactElement, useMemo } from 'react';
+import { ReactElement, useMemo, memo } from 'react';
 import styled from 'styled-components';
 
 import Text from '@components/Text';
-import useElapsedTime from '../../hooks/useElapsedTime';
+
 import { getTodoUntilText } from '@util/Common';
 
 const TextWrapper = styled.div`
@@ -12,9 +12,7 @@ const TextWrapper = styled.div`
   text-align: right;
 `;
 
-const TodoTimeText = ({ until }: { until: string }): ReactElement => {
-  const [displayTime] = useElapsedTime();
-
+const TodoTimeText = ({ until, displayTime }: { until: string; displayTime: string }): ReactElement => {
   const todoUntilText = useMemo(() => {
     return getTodoUntilText(until);
   }, [until]);
@@ -27,4 +25,4 @@ const TodoTimeText = ({ until }: { until: string }): ReactElement => {
   );
 };
 
-export default TodoTimeText;
+export default memo(TodoTimeText);
diff --git a/client/src/container/Menubar.tsx b/client/src/container/Menubar.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import Home from '@images/Home.svg';
 import Table from '@images/Table.svg';
 import Image from '@components/Image';
+import Button from '@components/Button';
 
 const Wrapper = styled.div`
   height: 100vh;
@@ -20,7 +21,7 @@ const Menubar = (): ReactElement => {
         <Image src={Home} margin={'30px 0 0 0'} />
       </Link>
       <Link to="/todos">
-        <Image src={Table} margin={'30px 0 0 0'} />
+        <Button context={<Image src={Table} margin={'30px 0 0 0'} />} />
       </Link>
     </Wrapper>
   );

diff --git a/client/src/container/main/TodoStatus.tsx b/client/src/container/main/TodoStatus.tsx
@@ -38,7 +38,7 @@ const TodoStatus = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement =>
     <>
       <Wrapper>
         <Text
-          text={todoStatusText(activeTodo.until.toString())}
+          text={todoStatusText(activeTodo.until?.toString())}
           fontFamily={'roboto'}
           fontSize={'18px'}
           fontWeight={'700'}

diff --git a/client/src/container/main/TodoTimeInteraction.tsx b/client/src/container/main/TodoTimeInteraction.tsx
@@ -8,11 +8,7 @@ import TodoTimeText from '@components/main/TodoTimeText';
 
 import { PlainTodo } from '@todo/todo.type';
 
-import { isOnProgress, postponeClicked } from '@util/GlobalState';
-
-import useTodoList from '../../hooks/useTodoList';
-import useElapsedTime from '../../hooks/useElapsedTime';
-import useButtonConfig from '../../hooks/useButtonConfig';
+import { postponeClicked } from '@util/GlobalState';
 
 const Wrapper = styled.div`
   width: 850px;
@@ -22,25 +18,42 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
-const TodoTimeInteraction = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => {
+interface ComponentTodo {
+  setPostpone: Function;
+  postpone?: boolean;
+  activeTodo: PlainTodo;
+  postponeOptions: string[];
+  elapsedTime: number;
+  setElapsedTime: Function;
+  setDone: Function;
+  displayTime: string;
+  handleOnToggle: Function;
+  buttonConfig: any;
+}
+
+const TodoTimeInteraction = ({
+  activeTodo,
+  setDone,
+  postponeOptions,
+  setPostpone,
+  displayTime,
+  handleOnToggle,
+  buttonConfig,
+}: ComponentTodo): ReactElement => {
   const [isPostpone] = useAtom(postponeClicked);
-  const [userState] = useAtom(isOnProgress);
-  const [setPostpone, , postponeOptions] = useTodoList();
-  const [, , , time, setTime] = useElapsedTime();
-  const [buttonConfig, handleOnToggle] = useButtonConfig(userState);
-
   return (
     <Wrapper>
-      <TodoInteractionButton buttonConfig={buttonConfig} handleOnToggle={handleOnToggle} />
-      {activeTodo.until !== undefined && <TodoTimeText until={activeTodo.until.toString()} />}
+      <TodoInteractionButton
+        buttonConfig={buttonConfig}
+        handleOnToggle={handleOnToggle}
+        activeTodo={activeTodo}
+        setDone={setDone}
+      />
+      {activeTodo?.until !== undefined && (
+        <TodoTimeText until={activeTodo.until.toString()} displayTime={displayTime} />
+      )}
       {isPostpone && (
-        <PostponeBox
-          postponeOptions={postponeOptions}
-          setPostpone={setPostpone}
-          time={time}
-          setTime={setTime}
-          handleOnToggle={handleOnToggle}
-        />
+        <PostponeBox postponeOptions={postponeOptions} setPostpone={setPostpone} handleOnToggle={handleOnToggle} />
       )}
     </Wrapper>
   );

diff --git a/client/src/page/Main.tsx b/client/src/page/Main.tsx
@@ -26,10 +26,12 @@ const Wrapper = styled.div`
 const { none } = TABLE_MODALS;
 
 const Main = (): ReactElement => {
-  const [, activeTodo] = useTodoList();
+  const useTodoListHook = useTodoList();
   const [isFinished] = useAtom(isFinishedAtom);
   const [modalType, setModalType] = useAtom(modalTypeAtom);
 
+  const { activeTodo } = useTodoListHook;
+
   useEffect(() => {
     if (modalType !== none) {
       setModalType(none);
@@ -44,11 +46,11 @@ const Main = (): ReactElement => {
 
   return (
     <Wrapper>
-      {activeTodo !== undefined ? (
+      {activeTodo?.id !== undefined ? (
         <>
           <TodoStatus activeTodo={activeTodo} />
           <TodoTitle activeTodo={activeTodo} />
-          <TodoTimeInteraction activeTodo={activeTodo} />
+          <TodoTimeInteraction {...useTodoListHook} />
           <TodoContents activeTodo={activeTodo} />
         </>
       ) : (