next-step · geonbur · Jun 9, 2024 · Jun 9, 2024 · Jun 9, 2024 · Jun 9, 2024
diff --git a/README.md b/README.md
@@ -1 +1,21 @@
-# react-todo-list-precourse
+# react-todo-list-precourse
+
+TodoList: 할 일 목록 렌더링
+Header: 할 일 추가 & 입력창 초기화
+Footer: 필터
+
+
+App.jsx 파일 내 기능들:
+
+초기 할 일 List 가져오는 함수
+초기 할 일 List 설정
+
+Filter 설정
+할 일 Filtered 목록 가져오는 함수
+(할 일 Filtered 목록 가져오는 함수) 호출
+
+할 일 추가 함수
+할 일 완료 업데이트 함수
+할 일 삭제 함수
+
+할 일 목록이 변경될 때마다 로컬에 저장
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>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>React Todo List</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
 </html>
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import Header from './Header';
+import TodoList from './TodoList';
+import Footer from './Footer';
+
+// 초기 할 일 List 가져오는 함수
+const InitTodo = () => {
+  return JSON.parse(localStorage.getItem('todos')) || [];
+};
+
+// 할 일 완료 업데이트 함수
+const updateTodo = (todos, index) => {
+  return todos.map((todo, i) =>
+    i === index ? { ...todo, completed: !todo.completed } : todo
+  );
+};
+
+// 할 일 Filtered 목록 가져오는 함수
+const filteredTodo = (todos, filter) => {
+  return todos.filter(todo =>
+    filter === 'all' ? true : filter === 'completed' ? todo.completed : !todo.completed
+  );
+};
+
+const App = () => {
+  const [todos, setTodos] = useState(InitTodo()); // 초기 할 일 List 설정
+  const [filter, setFilter] = useState('all'); // 필터 설정
+
+  useEffect(() => {
+    localStorage.setItem('todos', JSON.stringify(todos)); // 할 일 목록이 변경될 때마다 로컬에 저장
+  }, [todos]);
+
+  // 할 일 추가 함수
+  const addTodo = (text) => {
+    if (text.trim().length === 0) return;
+    setTodos([...todos, { text, completed: false }]);
+  };
+
+  // 할 일 완료 업데이트 함수
+  const toTodo = (index) => {
+    setTodos(updateTodo(todos, index));
+  };
+
+  // 할 일 삭제 함수
+  const deleteTodo = (index) => {
+    setTodos(todos.filter((_, i) => i !== index));
+  };
+
+  // (할 일 Filtered 목록 가져오는 함수) 호출
+  const filteredTodos = filteredTodo(todos, filter);
+
+  return (
+    <div>
+      <Header addTodo={addTodo} />
+      <TodoList todos={filteredTodos} toTodo={toTodo} deleteTodo={deleteTodo} />
+      <Footer setFilter={setFilter} filter={filter} totalCount={todos.length} />
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+// 필터 함수
+const Footer = ({ setFilter, filter, totalCount }) => (
+  <footer>
+    <span>{totalCount} items left</span>
+    <button onClick={() => setFilter('all')} disabled={filter === 'all'}>All</button>
+    <button onClick={() => setFilter('active')} disabled={filter === 'active'}>Active</button>
+    <button onClick={() => setFilter('completed')} disabled={filter === 'completed'}>Completed</button>
+  </footer>
+);
+
+export default Footer;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+const Header = ({ addTodo }) => {
+  const [text, setText] = useState('');
+
+  // 제출 함수 (할 일 추가 및 입력창 초기화)
+  const submit = (e) => {
+    e.preventDefault();
+    if (text.trim().length > 0) {
+      addClear(text, setText);
+    }
+  };
+
+  // 할 일 추가 & 입력창 초기화 함수
+  const addClear = (text, setText) => {
+    addTodo(text);
+    setText('');
+  };
+
+  return (
+    <header>
+      <h1>todos</h1>
+      <form onSubmit={submit}>
+        <input
+          type="text"
+          placeholder="할 일을 입력하시오"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+        <button type="submit">추가</button>
+      </form>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+// 할 일 목록 렌더링
+const TodoList = ({ todos, toTodo, deleteTodo }) => (
+  <ul>
+    {todos.map((todo, index) => (
+      <TodoItem
+        key={index}
+        todo={todo}
+        index={index}
+        toTodo={toTodo}
+        deleteTodo={deleteTodo}
+      />
+    ))}
+  </ul>
+);
+
+// 할 일 항목 컴포넌트
+const TodoItem = ({ todo, index, toTodo, deleteTodo }) => (
+  <li className={`todo-item ${todo.completed ? 'completed' : ''}`}>
+    <input type="checkbox" checked={todo.completed} onChange={() => toTodo(index)} />
+    <span onClick={() => toTodo(index)}>{todo.text}</span>
+    <button onClick={() => deleteTodo(index)}>삭제</button>
+  </li>
+);
+
+export default TodoList;
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,79 @@
+body {
+  background-color: black;
+  color: white;
+  font-family: 'Gothic', Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+#root {
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+}
+
+header {
+  text-align: center;
+}
+
+header h1 {
+  font-size: 2.5em;
+  font-family: 'Gothic', Arial, sans-serif;
+}
+
+input[type="text"] {
+  width: calc(100% - 60px);
+  padding: 10px;
+  font-size: 16px;
+  margin: 5px 0;
+  border: none;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-family: 'Gothic', Arial, sans-serif;
+}
+
+button {
+  padding: 10px;
+  font-size: 16px;
+  margin: 5px 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: 'Gothic', Arial, sans-serif;
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #444;
+  border-radius: 4px;
+  background-color: #222;
+}
+
+.todo-item.completed {
+  text-decoration: line-through;
+  color: gray;
+}
+
+.todo-item span {
+  flex-grow: 1;
+  padding-left: 10px;
+  font-family: 'Gothic', Arial, sans-serif;
+}
+
+.todo-item input[type="checkbox"] {
+  cursor: pointer;
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Gothic', Arial, sans-serif;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './components/App';
+import './main.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);