next-step · daeun0726 · May 31, 2024 · Jun 8, 2024 · Jun 8, 2024 · Jun 8, 2024
diff --git a/README.md b/README.md
@@ -1 +1,34 @@
-# react-todo-list-precourse
+# 🖥️ react-todo-list-precourse
+카카오 테크 캠퍼스 2기 2회차 미니과제 - 할 일 목록
+
+<br>
+
+## ⚙️ 구현할 기능 목록
+
+### UI 구성
+
+<br>
+
+### 일정 입력 기능
+
+- [x] Enter 키나 추가 버튼을 사용하여 할 일 추가
+- [x] 아무것도 입력하지 않은 경우에는 할 일을 추가 불가
+- [x] 할일 목록 렌더링
+
+<br>
+
+### 할 일 삭제 
+- [x] "X" 버튼 클릭하여 삭제
+
+<br>
+
+### 할 일 상태 전환
+- [x] 완료, 미완료 상태 전환
+
+<br>
+
+### 추가 기능
+- [x] 미완료 일정, 완료 일정, 모든 일정 필터링
+- [x] 미완료 할 일 총 개수 확인 가능
+- [x] 모든 완료 일정 한 번에 삭제 가능
+
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title></title>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { FilterProvider } from "./context/FilterContext";
+import { TodoProvider } from "./context/TodosContext";
+import TodoTemplate from "./components/TodoTemplate";
+
+function App() {
+  return (
+    <TodoProvider>
+      <FilterProvider>
+        <TodoTemplate/>
+      </FilterProvider>
+    </TodoProvider>
+  );
+}
+
+export default App;
diff --git a/src/components/TodoInput.jsx b/src/components/TodoInput.jsx
@@ -0,0 +1,31 @@
+import React, { useState, useContext } from "react";
+import { TodoContext } from "../context/TodosContext";
+import "../styles/TodoInput.css";
+
+function TodoInput() {
+    const [inputValue, setInputValue] = useState("");
+    const { addTodo } = useContext(TodoContext);
+
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+    };
+
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" && inputValue.trim() !== "" ) {
+            addTodo(inputValue.trim());
+            setInputValue("");
+        }
+    };
+
+    return(
+        <input 
+         className="todo-input"
+         type="text"
+         value={inputValue}
+         onChange={handleInputChange}
+         onKeyDown={handleKeyDown}
+        />
+    );  
+}
+
+export default TodoInput;
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/TodoItem.css";
+
+function TodoItem({ todo, index, removeTodo, toggleTodo }) {
+  return (
+    <div className="todo" style={{ textDecoration: todo.done ? "line-through" : "none" }}>
+        <input type="checkbox" onClick={() => toggleTodo(index)}/>
+        {todo.text}
+        <div onClick={() => removeTodo(index)}>X</div>
+    </div>
+  );
+}
+
+export default TodoItem;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,36 @@
+import React, { useContext } from "react";
+import { FilterContext } from "../context/FilterContext";
+import { TodoContext } from "../context/TodosContext";
+import TodoItem from "./TodoItem";
+import "../styles/TodoList.css";
+
+function TodoList() {
+    const { todos, removeTodo, toggleTodo } = useContext(TodoContext);
+    const { filter } = useContext(FilterContext);
+
+    const filterTodos = todos.filter((todo) => {
+        if (filter === "Active") {
+          return !todo.done;
+        } else if (filter === "Completed") {
+          return todo.done;
+        } else {
+          return true;
+        }
+    });
+
+    return(
+        <div className="todo-list">
+            {filterTodos.map((todo, index) => (
+                <TodoItem 
+                key={index}
+                todo={todo} 
+                index={index} 
+                removeTodo={removeTodo}
+                toggleTodo={toggleTodo}
+                />
+            ))}
+        </div>
+    );  
+}
+
+export default TodoList;
diff --git a/src/components/TodoOption.jsx b/src/components/TodoOption.jsx
@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import { FilterContext } from "../context/FilterContext";
+import { TodoContext } from "../context/TodosContext";
+import "../styles/TodoOption.css";
+
+function TodoOption() {
+  const { filter, setFilter } = useContext(FilterContext);
+  const { todos, removeAllTodo } = useContext(TodoContext);
+
+  const handleFilterChange = (e) => {
+    setFilter(e.target.value);
+  };
+
+  const activeTodos = todos.filter((todo) =>!todo.done).length;
+
+  return (
+    <div className="footer">
+      {todos.length > 0 ? (
+        <div className="option-menu">
+          <div>{activeTodos} items left!</div>
+          <select value={filter} onChange={handleFilterChange}>
+            <option value="All">All</option>
+            <option value="Active">Active</option>
+            <option value="Completed">Completed</option>
+          </select>
+          <div className="removeall" onClick={removeAllTodo}>Clear completed </div>
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+}
+
+export default TodoOption;
diff --git a/src/components/TodoTemplate.jsx b/src/components/TodoTemplate.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import TodoInput from "./TodoInput";
+import TodoList from "./TodoList";
+import TodoOption from "./TodoOption";
+import "../styles/TodoTemplate.css";
+
+function TodoTemplate() {
+
+    return(
+        <div className="container">
+            <div className="title">TO DO</div>
+            <TodoInput/>
+            <TodoList/>
+            <TodoOption/>
+        </div>
+    );  
+}
+
+export default TodoTemplate;
diff --git a/src/context/FilterContext.jsx b/src/context/FilterContext.jsx
@@ -0,0 +1,16 @@
+import React, { createContext, useContext, useState } from "react";
+
+const FilterContext = createContext();
+
+const FilterProvider = ({ children }) => {
+    const [filter, setFilter] = useState("All");
+
+    return (
+        <FilterContext.Provider value={{filter, setFilter}}>
+            {children}
+        </FilterContext.Provider>
+    );
+};
+
+
+export { FilterContext, FilterProvider };
diff --git a/src/context/TodosContext.jsx b/src/context/TodosContext.jsx
@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState } from "react";
+
+const TodoContext = createContext();
+
+const TodoProvider = ({ children }) => {
+    const [todos, setTodos] = useState([]);
+
+    const addTodo = (todo) => {
+        const newTodo = { text: todo, done: false };
+        setTodos([...todos, newTodo]);
+    };
+
+    const removeTodo = (index) => {
+        setTodos(todos.filter((todo, i) => i !== index));
+    };
+
+    const removeAllTodo = () => {
+        setTodos(todos.filter(todo => !todo.done));
+    };
+
+    const toggleTodo = (index) => {
+        setTodos(
+            todos.map((todo, i) => 
+                i === index ? { ...todo, done: !todo.done } : todo
+            )
+        );
+    };
+
+    return (
+        <TodoContext.Provider value={{ todos, addTodo, removeTodo, removeAllTodo, toggleTodo }}>
+            {children}
+        </TodoContext.Provider>
+    );
+};
+
+export { TodoContext, TodoProvider };
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,7 @@
+body{
+    height: 100%;
+    background-color: #000;
+    font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+}
diff --git a/src/main.js b/src/main.js
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App.jsx";
+import "./main.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
diff --git a/src/styles/TodoInput.css b/src/styles/TodoInput.css
@@ -0,0 +1,7 @@
+.todo-input{
+    height: 60px;
+    width: 500px;
+    border: 2px solid #000;
+    margin: 10px;
+    font-size: 30px;
+}
diff --git a/src/styles/TodoItem.css b/src/styles/TodoItem.css
@@ -0,0 +1,30 @@
+.todo {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 30px;
+    margin: 5px 0;
+    padding-bottom: 5px;
+    padding-left: 5px;
+    font-size: 30px;
+    font-weight: 500;
+    border-bottom: 0.5px solid grey;
+}
+
+.todo > *:nth-child(1) {
+    margin-right: 10px;
+}
+
+.todo > *:nth-child(2) {
+    position: absolute;
+    right: 8px;
+    border: none;
+    color: gray;
+    font-size: 15px;
+    border: 400;
+}
+
+.todo > *:nth-child(2):hover {
+    color: #000;
+}
diff --git a/src/styles/TodoList.css b/src/styles/TodoList.css
@@ -0,0 +1,7 @@
+.todo-list{
+    display: flex;
+    flex-direction: column;
+    width: 500px;
+    height: 250px;
+    overflow-y: auto;
+}
diff --git a/src/styles/TodoOption.css b/src/styles/TodoOption.css
@@ -0,0 +1,25 @@
+.footer {
+    position: absolute;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    bottom: 0;
+    height: 70px;
+    width: 700px;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.option-menu {
+    display: flex;
+    flex-direction: row;
+    margin-right: 20px;
+}
+
+.option-menu > *:nth-child(2) {
+    margin: 0 20px; 
+}
+
+.removeall{
+    cursor: pointer;
+}
diff --git a/src/styles/TodoTemplate.css b/src/styles/TodoTemplate.css
@@ -0,0 +1,20 @@
+.container{
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 500px;
+    width: 700px;
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+.title {
+    font-size: 40px;
+    font-weight: 600;
+    margin: 10px;
+    text-align: center;
+}