To Do List - CSS update

to do list에 css update 했다. 물론 디자인 감각이 전혀 없기에 검색하다 이쁜 디자인 가져왔다. 죄송하고 감사합니다....

기존 기능에 Done list와 checkbox 에 check시 underline 기능을 추가했다.

Done list

<div className="todo_done_list">
          <div>Done list</div>
          {checkedTodoList.length !== 0 && (
            <div className="todo_checked_item_container">
              {checkedTodoList.map((checkedTodo) => (
                <ul className="todo_checked_item" key={`${checkedTodo.id}`}>
                  <li>
                    {checkedTodo.checked && (
                      <span
                        className={
                          checkedTodo.checked ? "todo_checked" : "todo_none"
                        }
                      >
                        {checkedTodo.text}
                      </span>
                    )}
                  </li>
                </ul>
              ))}
            </div>
          )}
        </div>

CSS

.page_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #d9d6da;
}
.todo_list_container {
  min-width: 400px;
  max-width: 450px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: rgb(240, 242, 245);
}
.title_container {
  text-align: center;
  background: #0da8d3;
  width: 100%;
  border-radius: 0 0 50% 50%;
}
.todo_input_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.todo_input_container input {
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 0 10px;
}
.todo_input_container button {
  margin-left: 20px;
  border-radius: 10px;
  height: 100%;
  width: 50px;
  background-color: #0da8d3;
}

.todo_list_item_container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 25px;
}

.list_container {
  width: 100%;
}

.list_container button {
  float: right;
  border-radius: 10px;
  height: 100%;
  width: 50px;
  background-color: #0da8d3;
  /* margin-right: 10px; 이거 마진으로 해도 되나? */
}

.todo_list_item {
  display: flex;
}

.todo_none {
  width: 100%;
  margin: 0 12px;
}

.todo_checked {
  display: flex;
  width: 100%;
  color: gray;
  position: relative;
  margin: 0 12px;
  text-decoration: line-through;
}

.todo_delete_btn,
.todo_update_btn,
.todo_up_sbm_btn,
.todo_sbm_btn {
  transition: transform ease-in-out 0.1s;
}

.todo_del_up_btn {
  display: flex;
  gap: 10px;
}

.todo_btn {
  transition: transform ease-in-out 0.1s;
}

.todo_btn:hover {
  transform: scale(1.2);
}

.todo_delete_btn:hover,
.todo_update_btn:hover,
.todo_up_sbm_btn:hover,
.todo_sbm_btn:hover {
  transform: scale(1.2);
}

.todo_done_list {
  display: flex;
  width: 100%;
  height: 50%;
  align-items: center;
  flex-direction: column;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

button {
  border: none;
  cursor: pointer;
}