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로 수정해야겠다.