[React #26] ToDo List - UI 구현

🩷Header

Header.jsx

function Header() {
  return (
    <div className='Header'>
      <h3>오늘은 📅</h3>
      <h1>{new Date().toDateString()}</h1>
    </div>
  );
}

export default Header;

• Date 객체 생성할 때 toDateString() 메서드를 호출하여 문자열로 읽기 편한 형태로 변환

Header.css

.Header > h1 {
  color: rgb(37, 147, 255);
}

---

🩷Editor

Editor.jsx

function Editor() {
  return (
    <div className='Editor'>
      <input placeholder='새로운 Todo...' />
      <button>추가</button>
    </div>
  );
}

export default Editor;

Editor.css

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

.Editor > input {
  flex: 1;
  padding: 15px;
  border: 1px solid rgb(220, 220, 220);
  border-radius: 5px;
}

.Editor > button {
  cursor: pointer;
  width: 80px;
  border: none;
  background-color: rgb(37, 147, 255);
  color: white;
  border-radius: 5px;
}

• flex의 속성을 1로 설정하면 부모 요소의 크기를 벗어나지 않는 선에서 최대의 길이만큼 늘어남

---

🩷List

List.jsx

function List() {
  return (
    <div className='List'>
      <h4>ToDo List</h4>
      <input placeholder='검색어를 입력해 주세요.' />
    </div>
  );
}

export default List;

List.css

.List {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.List input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgb(220, 220, 220);
  padding: 15px 0px;
}

.List input:focus {
  outline: none;
  border-bottom: 1px solid rgb(37, 147, 255);
}

.List .todos_warpper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

• input:focus는 input창에 포커스 되었을 때 효과를 줄 수 있음

---

🩷TodoItem

TodoItem.jsx

function TodoItem() {
  return (
    <div className='TodoItem'>
      <input type='checkbox' />
      <div className='content'>Todo</div>
      <div className='date'>Date</div>
      <button>삭제</button>
    </div>
  );
}

export default TodoItem;

TodoItem.css

.TodoItem {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(240, 240, 240);
}

.TodoItem > input {
  width: 20px;
}

.TodoItem .content {
  flex: 1;
}

.TodoItem .date {
  font-size: 14px;
  color: gray;
}

.TodoItem button {
  cursor: pointer;
  color: gray;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  padding: 5px;
}

 

---

🩷실행화면

실행화면

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'