CEOS-Developers · jhj2713 · Mar 20, 2022 · Mar 21, 2022 · Mar 21, 2022 · Mar 21, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,16 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.24",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/bin.png b/public/bin.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>투두리스트</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useCallback, useContext } from "react";
+import styled from "styled-components";
+import { TodoInputForm, TodoList, DoneList } from "components";
+import { TodoContext } from "contexts";
+import { ITodoItem } from "interface";
+
+const App = () => {
+  const { todoList, doneList } = useContext(TodoContext);
+
+  // save to localStorage
+  const _saveLocalStorage = useCallback(
+    (type: string, list: Array<ITodoItem>): void => {
+      localStorage.setItem(type, JSON.stringify(list));
+    },
+    [],
+  );
+
+  // list가 변할 때마다 localStorage에 list 저장
+  useEffect(() => {
+    _saveLocalStorage("todoList", todoList);
+  }, [todoList, _saveLocalStorage]);
+  useEffect(() => {
+    _saveLocalStorage("doneList", doneList);
+  }, [doneList, _saveLocalStorage]);
+
+  return (
+    <Container>
+      <Box>
+        <TitleContents>
+          <TodoTitle>📝 투두리스트</TodoTitle>
+        </TitleContents>
+        <TodoInputForm />
+        <TodoList />
+        <DoneList />
+      </Box>
+    </Container>
+  );
+};
+
+const TitleContents = styled.section``;
+const TodoTitle = styled.h2`
+  padding-left: 20px;
+`;
+const Container = styled.div`
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const Box = styled.main`
+  width: 350px;
+  height: 600px;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 1px 1px 30px grey;
+`;
+
+export default App;
diff --git a/src/components/DoneList.tsx b/src/components/DoneList.tsx
@@ -0,0 +1,54 @@
+import { useContext, useCallback } from "react";
+import styled from "styled-components";
+import TodoItem from "./TodoItem";
+import { TodoContext } from "contexts";
+
+const DoneList = () => {
+  const { doneList, dispatch } = useContext(TodoContext);
+
+  // todo item 추가
+  const _addTodoList = useCallback(
+    (todo: string): void => {
+      dispatch({
+        type: "ADD_TODO",
+        todo: { text: todo },
+      });
+    },
+    [dispatch],
+  );
+
+  // done item 삭제
+  const _deleteDoneList = useCallback(
+    (idx: number): void => {
+      dispatch({
+        type: "DELETE_DONE",
+        idx,
+      });
+    },
+    [dispatch],
+  );
+
+  return (
+    <TodoContents>
+      <h3>DONE ({doneList.length})</h3>
+      <ul>
+        {doneList.map(({ text }, idx) => (
+          <TodoItem
+            key={idx}
+            type="done"
+            todo={text}
+            idx={idx}
+            deleteCurrentList={_deleteDoneList}
+            addToggleList={_addTodoList}
+          />
+        ))}
+      </ul>
+    </TodoContents>
+  );
+};
+
+const TodoContents = styled.section`
+  padding: 0 20px;
+`;
+
+export default DoneList;
diff --git a/src/components/TodoInputForm.tsx b/src/components/TodoInputForm.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback, useContext } from "react";
+import styled from "styled-components";
+import { TodoContext } from "contexts";
+import { useInput } from "hooks";
+
+const TodoInputForm = () => {
+  const { dispatch } = useContext(TodoContext);
+  const { text, _handleTextChange, _resetText } = useInput("");
+
+  // todo item 추가
+  const _addTodoItem = useCallback(
+    (e: React.FormEvent): void => {
+      e.preventDefault();
+
+      if (text.trim()) {
+        // list에 todo item 추가
+        dispatch({
+          type: "ADD_TODO",
+          todo: { text },
+        });
+      }
+      _resetText();
+    },
+    [text, _resetText, dispatch],
+  );
+
+  return (
+    <TodoInputItems onSubmit={_addTodoItem}>
+      <TodoInput
+        placeholder="할 일을 입력하세요"
+        value={text}
+        onChange={_handleTextChange}
+      />
+      <TodoInputBtn type="submit">+</TodoInputBtn>
+    </TodoInputItems>
+  );
+};
+
+const TodoInputItems = styled.form`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 15px;
+  border-bottom: 1px solid lightgrey;
+`;
+const TodoInput = styled.input`
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  padding: 15px;
+  width: 230px;
+  :focus {
+    outline: none;
+    transition: 0.2s;
+    box-shadow: 0px 0px 5px lightgrey;
+  }
+`;
+const TodoInputBtn = styled.button`
+  background: none;
+  border: none;
+  font-size: 30px;
+  margin-left: 10px;
+  cursor: pointer;
+  border-radius: 30px;
+  :hover {
+    color: grey;
+    transition: 0.2s;
+  }
+`;
+
+export default TodoInputForm;
diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -0,0 +1,67 @@
+import React, { useCallback } from "react";
+import styled, { css } from "styled-components";
+import { ITodoItemProps } from "interface";
+
+const TodoItem = ({
+  type,
+  todo,
+  idx,
+  deleteCurrentList,
+  addToggleList,
+}: ITodoItemProps) => {
-const TodoItem = ({
-  type,
-  todo,
-  idx,
-  deleteCurrentList,
-  addToggleList,
-}: ITodoItemProps) => {
+const TodoItem = ({
+  type,
+  todo,
+  idx,
+  deleteCurrentList,
+  addToggleList,
+}: ITodoItemProps): React.FC<ITodoItemProps> => {
-const TodoItem = ({
-  type,
-  todo,
-  idx,
-  deleteCurrentList,
-  addToggleList,
-}: ITodoItemProps) => {
+const TodoItem = ({
+  type,
+  todo,
+  idx,
+  deleteCurrentList,
+  addToggleList,
+}: ITodoItemProps): React.FC<ITodoItemProps> => {
+  // todo <-> done
+  const _toggleTodo = useCallback((): void => {
+    // toggle된 리스트에 item 추가
+    addToggleList(todo);
+
+    // 현재 리스트에서 item 삭제
+    deleteCurrentList(idx);
+  }, [addToggleList, todo, deleteCurrentList, idx]);
+
+  // delete item
+  const _deleteTodo = useCallback((): void => {
+    deleteCurrentList(idx);
+  }, [idx, deleteCurrentList]);
+
+  return (
+    <ListItem>
+      <ListToggleItem onClick={_toggleTodo}>
+        <span>{type === "todo" ? "□" : "✔"}</span>
+        <ListItemText type={type}>{todo}</ListItemText>
+      </ListToggleItem>
+      <TodoDeleteBtn src="bin.png" alt="delete-btn" onClick={_deleteTodo} />
+    </ListItem>
+  );
+};
+
+const TodoDeleteBtn = styled.img`
+  width: 14px;
+  padding-left: 5px;
+  cursor: pointer;
+  opacity: 0;
+`;
+const ListItem = styled.li`
+  margin-bottom: 13px;
+  :hover {
+    ${TodoDeleteBtn} {
+      opacity: 1;
+      transition: 0.1s;
+    }
+  }
+`;
+const ListToggleItem = styled.section`
+  display: inline;
+  cursor: pointer;
+`;
+const ListItemText = styled.span<{ type: "todo" | "done" }>`
+  font-size: 15px;
+  padding-left: 5px;
+  ${({ type }) =>
+    type === "done" &&
+    css`
+      text-decoration: line-through;
+      color: lightgrey;
+    `}
+`;
+
+export default React.memo(TodoItem);
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -0,0 +1,55 @@
+import { useContext, useCallback } from "react";
+import styled from "styled-components";
+import TodoItem from "./TodoItem";
+import { TodoContext } from "contexts";
+
+const TodoList = () => {
+  const { todoList, dispatch } = useContext(TodoContext);
+
+  // done item 추가
+  const _addDoneList = useCallback(
+    (todo: string): void => {
+      dispatch({
+        type: "ADD_DONE",
+        todo: { text: todo },
+      });
+    },
+    [dispatch],
+  );
+
+  // todo item 삭제
+  const _deleteTodoList = useCallback(
+    (idx: number): void => {
+      dispatch({
+        type: "DELETE_TODO",
+        idx,
+      });
+    },
+    [dispatch],
+  );
+
+  return (
+    <TodoContents>
+      <h3>TO DO ({todoList.length})</h3>
+      <ul>
+        {todoList.map(({ text }, idx) => (
+          <TodoItem
+            key={idx}
+            type="todo"
+            todo={text}
+            idx={idx}
+            deleteCurrentList={_deleteTodoList}
+            addToggleList={_addDoneList}
+          />
+        ))}
+      </ul>
+    </TodoContents>
+  );
+};
+
+const TodoContents = styled.section`
+  padding: 0 20px;
+  border-bottom: 1px solid lightgrey;
+`;
+
+export default TodoList;
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -0,0 +1,5 @@
+import TodoInputForm from "./TodoInputForm";
+import TodoList from "./TodoList";
+import DoneList from "./DoneList";
+
+export { TodoInputForm, TodoList, DoneList };