URECA-ReCoder · hyorish03 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from '@eslint/js';
+import globals from 'globals';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default [
   { ignores: ['dist'] },
@@ -20,6 +20,7 @@ export default [
     settings: { react: { version: '18.3' } },
     plugins: {
       react,
+      emotion,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
     },
@@ -35,4 +36,4 @@ export default [
       ],
     },
   },
-]
+];
diff --git a/index.css b/index.css
@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: border-box;
+}
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/public/redHeart.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Todo</title>
   </head>

diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "eslint-plugin-emotion": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/public/redHeart.svg b/public/redHeart.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,54 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import Header from './Components/Header';
-import Header from './Components/Header';
+import Header from './components/Header';
-import Header from './Components/Header';
+import Header from './components/Header';
+import { useEffect, useState } from 'react';
+import { getLocalStorage } from './utils/getLocalStorage';
+import List from './Components/List';
+
 function App() {
-  return <div>React Todo</div>;
+  const [todoList, setTodoList] = useState(getLocalStorage() || []);
+  useEffect(() => {
+    if (getLocalStorage() === null) {
+      localStorage.setItem('todo', JSON.stringify([]));
+    }
+  }, []);
+  const notDoneTodoList = todoList.filter((todo) => todo.done === false);
+  const doneTodoList = todoList.filter((todo) => todo.done === true);
+  return (
+    <div
+      css={css({
+        width: '100vw',
+        height: '100vh',
+        color: 'black',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: 'linear-gradient(pink,skyblue)',
+      })}
+    >
+      <div
+        css={css({
+          width: '360px',
+          height: '600px',
+          backgroundColor: 'white',
+          borderRadius: '20px',
+          boxShadow: '0px 0px 25px rgba(0, 0, 0, 0.25)',
+        })}
+      >
+        <Header setTodoList={setTodoList} />
+        <List
+          listName="📋 TO DO"
-          listName="📋 TO DO"
+const LISTNAME = {
+    TODO: "TO DO",
+    DONE: "DONE",
+}
+
+<List
+    listName={`📋 ${LISTNAME.TODO}`}
-          listName="📋 TO DO"
+const LISTNAME = {
+    TODO: "TO DO",
+    DONE: "DONE",
+}
+
+<List
+    listName={`📋 ${LISTNAME.TODO}`}
+          list={notDoneTodoList}
+          setTodoList={setTodoList}
+        />
+        <List
+          listName="💿 DONE"
+          list={doneTodoList}
+          setTodoList={setTodoList}
+        />
+      </div>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/Components/DeleteButton.jsx b/src/Components/DeleteButton.jsx
@@ -0,0 +1,18 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { deleteFromLocalStorage } from '../utils/deleteFromLocalStorage';
+import { getLocalStorage } from '../utils/getLocalStorage';
+
+export const DeleteButton = ({ id, setTodoList }) => {
+  return (
+    <div
+      css={css({ cursor: 'pointer' })}
+      onClick={() => {
+        deleteFromLocalStorage(id);
+        setTodoList(getLocalStorage());
+      }}
+    >
+      🗑️
+    </div>
+  );
+};
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
@@ -0,0 +1,68 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useEffect, useRef } from 'react';
+import { addToLocalStorage } from '../utils/addToLocalStorage';
+import { getLocalStorage } from '../utils/getLocalStorage';
+
+function Header({ setTodoList }) {
+  const inputRef = useRef(null);
+
+  const addTodo = () => {
+    const input = inputRef.current;
+    if (input.value === '') {
+      return;
+    }
+    addToLocalStorage(input.value);
+    input.value = '';
+    inputRef.current.focus();
+    setTodoList(getLocalStorage());
+  };
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, []);
+
+  return (
+    <div css={css({ height: '118px' })}>
+      <div css={css({ fontSize: '24px', margin: '18px 18px 0 18px' })}>
+        📚 투두리스트
+      </div>
+      <div
+        css={css({
+          width: '100%',
+          height: '81px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '10px',
+          borderBottom: 'solid 1px lightgray',
+        })}
+      >
+        <input
+          type="text"
+          ref={inputRef}
+          onKeyDown={(e) => {
+            if (e.nativeEvent.isComposing) return;
+            if (e.key === 'Enter') {
+              addTodo();
+            }
+          }}
+          css={css({
+            width: '288px',
+            height: '48px',
+            borderRadius: '15px',
+            border: 'solid 1px lightgray',
+            paddingLeft: '15px',
+            '&:focus': {
+              outline: 'none',
+            },
+          })}
+          placeholder="할 일을 입력하세요"
+        />
+        <div onClick={addTodo}>➕</div>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/Components/List.jsx b/src/Components/List.jsx
@@ -0,0 +1,35 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { TodoItem } from './TodoItem';
+
+function List({ list, setTodoList, listName }) {
+  return (
+    <div
+      css={css({
+        height: '220px',
+        width: '100%',
+        padding: '18px 18px 0 18px',
+        borderBottom: listName == 'TO DO' ? 'solid 1px lightgray' : 'none',
+      })}
+    >
+      <div css={css({ fontSize: '18px', marginBottom: '15px' })}>
+        {listName} ({list.length})
+      </div>
+      <div
+        css={css({
+          width: '100%',
+          height: '156px',
+          overflowY: 'scroll',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+          paddingRight: '20px',
+        })}
+      >
+        <TodoItem todoList={list} setTodoList={setTodoList} />
-        <TodoItem todoList={list} setTodoList={setTodoList} />
+  todoList.map((todo, index) => (
+        <TodoItem key={index} todo={todo} setTodoList={setTodoList} />
+   )
-        <TodoItem todoList={list} setTodoList={setTodoList} />
+  todoList.map((todo, index) => (
+        <TodoItem key={index} todo={todo} setTodoList={setTodoList} />
+   )
+      </div>
+    </div>
+  );
+}
+
+export default List;
diff --git a/src/Components/TodoItem.jsx b/src/Components/TodoItem.jsx
@@ -0,0 +1,46 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { DeleteButton } from './DeleteButton';
+import { updateFromLocalStorage } from '../utils/updateFromLocalStorage';
+import { getLocalStorage } from '../utils/getLocalStorage';
+
+export const TodoItem = ({ todoList, setTodoList }) =>
+  todoList.map((todo, index) => (
+    <div
+      key={index}
+      css={css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '20px',
+        width: '100%',
+      })}
+    >
+      <div
+        css={css({
+          display: 'flex',
+          flexDirection: 'row',
+          textAlign: 'center',
+          alignItems: 'center',
+          width: '100%',
+          justifyContent: 'space-between',
+        })}
+      >
+        <div
+          css={css({
+            cursor: 'pointer',
+            textDecoration: todo.done ? 'line-through' : 'none',
+            color: todo.done ? '#D3D3D3' : '#000',
+            textAlign: 'center',
+          })}
+          onClick={() => {
+            updateFromLocalStorage(todo.id);
+            setTodoList(getLocalStorage());
+          }}
+        >
+          • {todo.todo}
+        </div>
+        <DeleteButton id={todo.id} setTodoList={setTodoList} />
+      </div>
+    </div>
+  ));
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,9 +1,4 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import '../index.css';
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/src/utils/addToLocalStorage.js b/src/utils/addToLocalStorage.js
@@ -0,0 +1,11 @@
+import { getLocalStorage } from './getLocalStorage';
+
+export const addToLocalStorage = (value) => {
+  const prevTodo = getLocalStorage();
+  const newTodo = prevTodo.concat({
+    id: prevTodo.length + 1,
+    todo: value,
+    done: false,
+  });
+  localStorage.setItem('todo', JSON.stringify(newTodo));
+};
diff --git a/src/utils/deleteFromLocalStorage.js b/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('삭제되었습니다.');
+};
diff --git a/src/utils/getLocalStorage.js b/src/utils/getLocalStorage.js
@@ -0,0 +1,3 @@
+export const getLocalStorage = () => {
+  return JSON.parse(localStorage.getItem('todo'));
+};
diff --git a/src/utils/updateFromLocalStorage.js b/src/utils/updateFromLocalStorage.js
@@ -0,0 +1,14 @@
+import { getLocalStorage } from './getLocalStorage';
+
+export const updateFromLocalStorage = (id) => {
+  const prevTodo = getLocalStorage();
+  const newTodo = prevTodo.map((todo) => {
+    return todo.id === id
+      ? {
+          ...todo,
+          done: !todo.done,
+        }
+      : todo;
+  });
+  localStorage.setItem('todo', JSON.stringify(newTodo));
+};