[SP] React To Do List

❋ 배포 링크
❋ Github Repo

- README.md

### 리액트 JS 기반의 To DO 웹 어플리케이션 개발

- 개발자 : 김동현 (김고야)
- 구조 :
  src
  | index.js
  | index.css
  | App.jsx
  | App.css
  | components
  \
  | Create.jsx (Export title & value -> App.jsx)
  | ListBox.jsx (Export do & done list -> TodoList.jsx)
  | TodoList.jsx (Export List update and etc -> App.jsx)

- App.jsx

import React, { useState } from "react";
import "./App.css";
import Create from "./components/Create.jsx";
import TodoList from "./components/TodoList.jsx";

function App() {
  const [todos, setTodos] = useState([
    {
      id: 0,
      title: "",
      value: "",
      isDone: null,
    },
  ]);

  const handleAddTodo = (newTodo) => {
    setTodos([...todos, newTodo]);
  };
  function handleDelete(id) {
    setTodos((todos) => todos.filter((todo) => todo.id !== id));
  }
  function handleUpdate(id) {
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  }
  return (
    <div className="wrap">
      <div className="header">
        <h4 className="title">React To Do</h4>
        <button
          className="btn"
          onClick={() => {
            alert("Kakaobank 3333-18-5480876");
          }}
        >
          Donation
        </button>
      </div>
      <div>
        <Create handleAddTodo={handleAddTodo}></Create>
      </div>
      <TodoList
        todos={todos}
        handleDelete={handleDelete}
        handleUpdate={handleUpdate}
      />
    </div>
  );
}
export default App;

- Create.jsx

import React, { useState } from "react";

const Create = ({ handleAddTodo }) => {
  const [title, setTitle] = useState("");
  const [value, setValue] = useState("");

  const writeTitle = (e) => {
    setTitle(e.target.value);
  };
  const writeValue = (e) => {
    setValue(e.target.value);
  };
  const todoListAdd = () => {
    if (title !== "" && value !== "") {
      const newTodo = {
        id: Date.now(),
        title: title,
        value: value,
        isDone: false,
      };
      handleAddTodo(newTodo);
      setTitle("");
      setValue("");
    }
  };

  return (
    <div className="inputContainer">
      <div>
        <input
          name="title"
          onChange={writeTitle}
          value={title}
          className="inputBox1"
          type="text"
          placeholder="Title"
        />
      </div>
      <div>
        <input
          name="value"
          onChange={writeValue}
          value={value}
          className="inputBox2"
          type="text"
          placeholder="Value"
        />
      </div>
      <button onClick={todoListAdd} className="saveBtn">
        Save
      </button>
    </div>
  );
};

export default Create;

- ListBox.jsx

import React from "react";

function ListBox(props) {
  const { todos, handleDelete, handleUpdate } = props;
  const { id, title, value, isDone } = todos;

  if (isDone !== null && isDone === false) {
    return (
      <div className="todoList">
        <div className="listText">
          <h4>{title}</h4>
          <p>{value}</p>
          <div className="listBtn">
            <button onClick={handleUpdate} className="doneBtn">
              Done
            </button>
            <button onClick={handleDelete} className="deleteBtn">
              Delete
            </button>
          </div>
        </div>
      </div>
    );
  } else if (isDone === true) {
    return (
      <div className="todoList">
        <div className="listText">
          <h4>{title}</h4>
          <p>{value}</p>
          <div className="listBtn">
            <button onClick={handleUpdate} className="doneBtn">
              Cancel
            </button>
            <button onClick={handleDelete} className="deleteBtn">
              Delete
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default ListBox;

- TodoList.jsx

import React from "react";
import ListBox from "../components/ListBox.jsx";

function TodoList(props) {
  const { todos, handleDelete, handleUpdate } = props;
  const todoItems = todos.filter((todo) => todo.isDone === false);
  const successItems = todos.filter((todo) => todo.isDone === true);

  return (
    <div className="listWrap">
      <div className="yetList">
        {" "}
        ✴︎ To Do
        {todoItems.map((todo) => (
          <ListBox
            todos={todo}
            key={todo.id}
            handleDelete={() => handleDelete(todo.id)}
            handleUpdate={() => handleUpdate(todo.id)}
          />
        ))}
      </div>
      <div className="doneList">
        ✍︎ Success
        {successItems.map((todo) => (
          <ListBox
            todos={todo}
            key={todo.id}
            handleDelete={() => handleDelete(todo.id)}
            handleUpdate={() => handleUpdate(todo.id)}
          />
        ))}
      </div>
    </div>
  );
}

export default TodoList;