공부계획

react 토이프로젝트 진행하기

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(to right, #68a5fb, #f199a7);
  height: 100vh;
}

.App {
  padding-top: 100px;
}

.todo-container {
  width: 500px;
  height: 600px;
  background-color: white;
  border-radius: 8px;
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

h1 {
  font-size: 32px;
  color: #68a5fb;
  margin: 35px;
}

input {
  width: 70%;
  height: 40px;
  border: 3px solid #ddd;
  border-right: none;
  color: #ddd;
  padding-left: 15px;
  font-size: 16px;
  margin: 0 auto 30px;
}

input:focus {
  outline: none;
  border: 3px solid #f199a7;
  color: #f199a7;
}

.plusbtn {
  color: white;
  font-size: 30px;
  width: 45px;
  height: 46px;
  border: 3px solid #f199a7;
  background-color: #f199a7;
  vertical-align: top;
}

ul {
  height: 70%;
  margin: 0 auto;
  overflow: auto;
}

li {
  background-color: white;
  list-style: none;
  border-radius: 5px;
  text-align: left;
  margin: 15px 22px;
  display: flex;
  align-items: center;
  padding-left: 30px;
}

#check {
  width: 21px;
  height: 21px;
  background-color: none;
  vertical-align: bottom;
  margin: 0 15px 0 0;
}

label {
  width: 64%;
}

input:checked+label {
  text-decoration: line-through;
}

.list {
  width: 100%;
}

.edit {
  width: 50px;
  height: 30px;
  border: none;
  vertical-align: top;
  margin: 0 10px;
}

.remove {
  height: 30px;
  border: none;
  margin: 0;
}

import React from "react";

const TodoInput = ({ todo, setTodo }) => {
  const [input, setInput] = React.useState("");

  const listAdd = (value) => {
    const isDulicate = todo.some((item) => item === value);
    if (isDulicate) {
      alert("이미 추가된 리스트입니다!");
      return;
    }
    setTodo((todo) => [...todo, value]);
  };

  const eventClick = (e) => {
    if (input.length === 0) {
      alert("할일을 입력하세요!");
    } else {
      listAdd(input);
      setInput("");
    }
  };

  return (
    <>
      <input
        value={input}
        type="text"
        onChange={(e) => setInput(e.target.value)}
      />

      <button className="plusbtn" onClick={eventClick}>
        +
      </button>
    </>
  );
};

export default TodoInput;

import React from "react";

const TodoList = ({ todo, setTodo }) => {
  const eventClickRemove = (item) => {
    const li = todo.filter((todoEle) => todoEle !== item);
    setTodo(li);
  };

  const eventClickEdit = (item) => {
    const editInput = prompt("수정할 리스트를 작성하세요!");
    const li = todo.map(
      (todoEle) => (todoEle = todoEle === item ? editInput : todoEle)
    );
    setTodo(li);
  };

  return (
    <>
      <ul>
        {todo.map((item) => (
          <li key={item}>
            <input id="check" type="checkbox" />
            <label htmlFor="check">{item}</label>
            <button className="edit" onClick={() => eventClickEdit(item)}>
              Edit
            </button>
            <button className="remove" onClick={() => eventClickRemove(item)}>
              <img src="/trash.png"></img>
            </button>
          </li>
        ))}
      </ul>
    </>
  );
};

export default TodoList;

import "./App.css";
import React from "react";
import TodoInput from "./component/TodoInput";
import TodoList from "./component/TodoList";

function App() {
  const [todo, setTodo] = React.useState([]);

  return (
    <div className="App">
      <div className="todo-container">
        <h1>TODO List</h1>
        <TodoInput todo={todo} setTodo={setTodo} />
        <TodoList todo={todo} setTodo={setTodo} />
      </div>
    </div>
  );
}

export default App;

활동 소감

방학 동안 배운 것들로 토이 프로젝트를 진행했다. 구글링도 많이 하고, 어려운 부분도 많았지만, 기능을 하나하나 구현하는 것이 재밌었다. 시간을 따로 내어 디자인이나 여러 부분 적으로 수정을 하고 css를 styled-component로 수정해야겠다.

다음 공부 계획