fix: active todo 없는 경우 처리 추가

boostcampwm-2022 · Dec 5, 2022 · 8c3748d · 8c3748d
1 parent fe5cd55
commit 8c3748d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);