[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) : 기초부터 실전까지'