next-step · wjdsbs · Jun 9, 2024 · Jun 9, 2024 · Jun 9, 2024 · Jun 9, 2024
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# react-todo-list-precourse
+# 미니 과제 - 할 일 목록 (React)
+
+카카오 테크 캠퍼스 2기
+
+### [STEP1] 2회차 미니과제 - 할 일 목록 (React)
+
+- 하루 또는 한 주의 할 일 목록을 업데이트하는 할 일 목록을 구현한다.
+- `React` 라이브러리를 사용하여 웹 앱으로 구현한다.
+
+## 기능 목록
+
+- 인터페이스 구현
+- 할 일 추가 기능
+- 할 일 삭제 기능
+- 할 일 완료 상태 전환 기능
+- 새로고침 시 목록 유지 기능
diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>Todos</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/App.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import "./styles/App.css";
+import ReactDOM from "react-dom/client";
+import Header from "./components/Header";
+import TodoList from "./components/TodoList";
+import {
+  loadTodos,
+  saveTodos,
+  createAddTodo,
+  createDelTodo,
+  createToggleTodo,
+} from "./utils/utils.js";
+
+function App() {
+  const [todos, setTodos] = useState(loadTodos);
+
+  useEffect(() => {
+    saveTodos(todos);
+  }, [todos]);
+
+  const addTodo = createAddTodo(setTodos);
+  const delTodo = createDelTodo(setTodos);
+  const toggleTodo = createToggleTodo(setTodos);
+
+  return (
+    <>
+      <Header addTodo={addTodo} />
+      <TodoList todos={todos} delTodo={delTodo} toggleTodo={toggleTodo} />
+    </>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("app"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+export default App;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+function Header({ addTodo }) {
+  const [newTodo, setNewTodo] = useState("");
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleAddTodo();
+    }
+  };
+
+  const handleAddTodo = () => {
+    if (newTodo.trim() !== "") {
+      addTodo(newTodo);
+      setNewTodo("");
+    }
+  };
+
+  return (
+    <header className="header">
+      <h1>todos</h1>
+      <div className="input-container">
+        <input
+          className="todo-input"
+          type="text"
+          placeholder="할 일 입력"
+          value={newTodo}
+          onChange={(e) => setNewTodo(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+function TodoItem({ todo, onDelete, onToggle }) {
+  return (
+    <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
+      <input
+        className="toggle"
+        type="checkbox"
+        checked={todo.completed}
+        onChange={() => onToggle(todo.id)}
+      ></input>
+      <label className="todo-item-label">{todo.text}</label>
+      <button className="delete" onClick={() => onDelete(todo.id)}>
+        ⨯
+      </button>
+    </li>
+  );
+}
+
+export default TodoItem;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import TodoItem from "./TodoItem";
+
+function TodoList({ todos, delTodo, toggleTodo }) {
+  return (
+    <ul className="todo-list">
+      {todos.map((todo) => (
+        <TodoItem
+          key={todo.id}
+          todo={todo}
+          onDelete={delTodo}
+          onToggle={toggleTodo}
+        />
+      ))}
+    </ul>
+  );
+}
+
+export default TodoList;
diff --git a/src/main.js b/src/main.js
diff --git a/src/styles/App.css b/src/styles/App.css
@@ -0,0 +1,66 @@
+body {
+  margin: 0px;
+  padding: 0px;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: whitesmoke;
+  box-sizing: border-box;
+}
+
+/*HEADER*/
+.header {
+  text-align: center;
+}
+
+.header h1 {
+  color: pink;
+  font-size: 60px;
+}
+
+.header .todo-input {
+  width: 400px;
+  font-size: 20px;
+  height: 50px;
+}
+
+/*TodoItem*/
+.todo-list {
+  list-style-type: none;
+  width: 406px;
+  padding: 0px;
+  font-size: 20px;
+  background-color: white;
+  margin: 0 auto;
+}
+
+.todo-list .todo-item {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  margin: 0 auto;
+  padding: 0 20px 0 20px;
+}
+.toggle {
+  accent-color: pink;
+}
+
+.todo-item input[type="checkbox"] {
+  margin-right: 1rem;
+}
+.todo-item-label {
+  width: 300px;
+}
+.todo-item .delete {
+  all: unset;
+  color: grey;
+}
+.todo-item .delete:hover {
+  color: pink;
+  cursor: pointer;
+}
+.completed .todo-item-label {
+  text-decoration: line-through;
+  text-decoration-color: pink;
+  color: grey;
+}
diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -0,0 +1,30 @@
+export const loadTodos = () => {
+  const savedTodos = JSON.parse(localStorage.getItem("todos-app"));
+  return savedTodos ? savedTodos : [];
+};
+
+export const saveTodos = (todos) => {
+  localStorage.setItem("todos-app", JSON.stringify(todos));
+};
+export const createAddTodo = (setTodos) => (todo) => {
+  setTodos((prevTodos) => [
+    ...prevTodos,
+    { id: Date.now(), text: todo, completed: false },
+  ]);
+};
+
+export const createDelTodo = (setTodos) => (id) => {
+  setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
+};
+
+export const createToggleTodo = (setTodos) => (id) => {
+  setTodos((prevTodos) =>
+    prevTodos.map((todo) => {
+      if (todo.id === id) {
+        return { ...todo, completed: !todo.completed };
+      } else {
+        return todo;
+      }
+    })
+  );
+};