From 8c3748dde1776cdb9971b74b310dd6b75c987197 Mon Sep 17 00:00:00 2001
From: kumsil1006 <39304306+kumsil1006@users.noreply.github.com>
Date: Mon, 5 Dec 2022 17:02:07 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20active=20todo=20=EC=97=86=EB=8A=94=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.tsx                        | 22 +++++++++-------
 client/src/container/todos/TableModal.tsx |  2 ++
 client/src/page/Main.tsx                  | 32 +++++++++++------------
 client/src/util/GlobalState.ts            | 14 +---------
 4 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index a260e73..f0f9abf 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -21,16 +21,18 @@ const App = (): ReactElement => {
   return (
     <Provider>
       <BrowserRouter>
-        <ToastContainer />
-        <OverLay />
-        <Menubar />
-        <Wrapper>
-          <Header />
-          <Routes>
-            <Route path="/" element={<Main />}></Route>
-            <Route path="/todos" element={<Todos />}></Route>
-          </Routes>
-        </Wrapper>
+        <Suspense fallback={<div>loading...</div>}>
+          <ToastContainer />
+          <OverLay />
+          <Menubar />
+          <Wrapper>
+            <Header />
+            <Routes>
+              <Route path="/" element={<Main />}></Route>
+              <Route path="/todos" element={<Todos />}></Route>
+            </Routes>
+          </Wrapper>
+        </Suspense>
       </BrowserRouter>
     </Provider>
   );
diff --git a/client/src/container/todos/TableModal.tsx b/client/src/container/todos/TableModal.tsx
index 463f5a2..4eb553e 100644
--- a/client/src/container/todos/TableModal.tsx
+++ b/client/src/container/todos/TableModal.tsx
@@ -15,6 +15,8 @@ import { InputTodo } from '@todo/todo.type';
 
 import Copy from '@images/Copy.svg';
 
+import 'react-toastify/dist/ReactToastify.css';
+
 const { create, update, none } = TABLE_MODALS;
 const { offWhite, red, blue, darkGray, lightGray } = PRIMARY_COLORS;
 
diff --git a/client/src/page/Main.tsx b/client/src/page/Main.tsx
index 30def52..158a79a 100644
--- a/client/src/page/Main.tsx
+++ b/client/src/page/Main.tsx
@@ -1,9 +1,9 @@
 import { useAtom } from 'jotai';
 import styled from 'styled-components';
-import React, { ReactElement, useEffect, Suspense } from 'react';
+import React, { ReactElement, useEffect } from 'react';
 import { toast } from 'react-toastify';
 
-import { activeTodo, isFinishedAtom, modalTypeAtom } from '@util/GlobalState';
+import { getActiveTodoAtom, isFinishedAtom, modalTypeAtom } from '@util/GlobalState';
 import { TABLE_MODALS } from '@util/Constants';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -24,7 +24,7 @@ const { none } = TABLE_MODALS;
 
 const Main = (): ReactElement => {
   const [isFinished] = useAtom(isFinishedAtom);
-  const [activeTodoAtom] = useAtom(activeTodo);
+  const [activeTodoAtom] = useAtom(getActiveTodoAtom);
   const [modalType, setModalType] = useAtom(modalTypeAtom);
 
   useEffect(() => {
@@ -40,20 +40,18 @@ const Main = (): ReactElement => {
   }, [isFinished]);
 
   return (
-    <Suspense fallback={<div>loading</div>}>
-      <Wrapper>
-        {activeTodoAtom !== undefined ? (
-          <>
-            <TodoStatus />
-            <TodoTitle />
-            <TodoTimeInteraction />
-            <TodoContents />
-          </>
-        ) : (
-          <div>Todo가 없습니다.</div>
-        )}
-      </Wrapper>
-    </Suspense>
+    <Wrapper>
+      {activeTodoAtom !== undefined ? (
+        <>
+          <TodoStatus />
+          <TodoTitle />
+          <TodoTimeInteraction />
+          <TodoContents />
+        </>
+      ) : (
+        <div>Todo가 없습니다.</div>
+      )}
+    </Wrapper>
   );
 };
 
diff --git a/client/src/util/GlobalState.ts b/client/src/util/GlobalState.ts
index fe24daf..790be73 100644
--- a/client/src/util/GlobalState.ts
+++ b/client/src/util/GlobalState.ts
@@ -43,19 +43,7 @@ export const asyncActiveTodo = atom(
   },
 );
 
-export const getActiveTodoAtom = atom(
-  (get) => get(asyncActiveTodo),
-  (get, set, newValue) => {
-    get(todoList)
-      .getActiveTodo()
-      .then(async (data) => {
-        return await set(asyncActiveTodo, data);
-      })
-      .catch((err) => {
-        throw new Error(err.message);
-      });
-  },
-);
+export const getActiveTodoAtom = atom((get) => get(asyncActiveTodo));
 
 export const targetElapsedTimeAtom = atom(0);