Feat: Todo 삭제 기능 구현

src/Components/DoneList.jsx

@@ -2,12 +2,9 @@
 import { css } from '@emotion/react';
 import { updateFromLocalStorage } from '../utils/updateFromLocalStorage';
 import { getLocalStorage } from '../utils/getLocalStorage';
+import { deleteFromLocalStorage } from '../utils/deleteFromLocalStorage';
 
 function DoneList({ doneTodoList, setTodoList }) {
-  const goNotDone = (id) => {
-    updateFromLocalStorage(id);
-    setTodoList(getLocalStorage());
-  };
   return (
     <div
       css={css({
@@ -42,11 +39,21 @@ function DoneList({ doneTodoList, setTodoList }) {
               *
               <div
                 css={css({ textDecoration: 'line-through' })}
-                onClick={() => goNotDone(todo.id)}
+                onClick={() => {
+                  updateFromLocalStorage(todo.id);
+                  setTodoList(getLocalStorage());
+                }}
               >
                 {todo.todo}
               </div>
-              <div>❌</div>
+              <div
+                onClick={() => {
+                  deleteFromLocalStorage(todo.id);
+                  setTodoList(getLocalStorage());
+                }}
+              >
+                ❌
+              </div>
             </div>
           </div>
         ))}

src/Components/TodoList.jsx

@@ -2,6 +2,7 @@
 import { css } from '@emotion/react';
 import { updateFromLocalStorage } from '../utils/updateFromLocalStorage';
 import { getLocalStorage } from '../utils/getLocalStorage';
+import { deleteFromLocalStorage } from '../utils/deleteFromLocalStorage';
 
 function TodoList({ notDoneTodoList, setTodoList }) {
   const doneTodo = (id) => {
@@ -50,8 +51,23 @@ function TodoList({ notDoneTodoList, setTodoList }) {
                 width: '100%',
               })}
             >
-              *<div onClick={() => doneTodo(todo.id)}>{todo.todo}</div>
-              <div>❌</div>
+              *
+              <div
+                onClick={() => {
+                  updateFromLocalStorage(todo.id);
+                  setTodoList(getLocalStorage());
+                }}
+              >
+                {todo.todo}
+              </div>
+              <div
+                onClick={() => {
+                  deleteFromLocalStorage(todo.id);
+                  setTodoList(getLocalStorage());
+                }}
+              >
+                ❌
+              </div>
             </div>
           </div>
         ))}

src/utils/deleteFromLocalStorage.js

@@ -0,0 +1,8 @@
+import { getLocalStorage } from './getLocalStorage';
+
+export const deleteFromLocalStorage = (id) => {
+  const prevTodo = getLocalStorage();
+  const newTodo = prevTodo.filter((todo) => todo.id !== id);
+  localStorage.setItem('todo', JSON.stringify(newTodo));
+  alert('삭제되었습니다.');
+};