[TodoList] UI 구현하기

1. Components 구성

Header.jsx

Editor.jsx

List.jsx 

 

본격적인 UI에 들어가기 앞서 Header, Editor, List 컴포넌트들로 구성해주고

App.css 스타일을 이용해 중앙으로 배치 시켜줬다.

 

App.css 

.App {
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap : 10px; 
}

 

💡  gap은 display: flex 요소일 경우에만 사용 가능

 

---

2. Header 컴포넌트 UI 

텍스트와 현재 날짜를 넣어준다. 

 

Header.jsx 

import "./Header.css";
const Header = () => {
  return (
    <div className="Header">
      <h3>오늘은 👀</h3>
      <h1>{new Date().toDateString()}</h1>
    </div>
  );
};

export default Header;

 

💡 new Date().toDateString() : Date 객체를 사용하여 현재 날짜를 간단하게 화면에 표시하는 코드

1. new Date():
   • 현재 날짜와 시간을 나타내는 Date 객체를 생성한다.
   • 사용자의 로컬 시스템 시간을 기반으로 한다.
2. .toDateString():
   • Date 객체를 사람이 읽기 쉬운 날짜 문자열로 변환한다.
   • 예를 들어, Mon Jan 21 2025 형식으로 반환한다. 

 

Header.css

.Header > h1 {
  color: rgb(12, 220, 247);
}

 

 

이렇게 Header 컴포넌트 UI를 완성 시켜줬다. 

---

3. Editor 컴포넌트 UI 

새로운 Todo list 추가를 위한 텍스트 입력창과 "추가" 버튼을 생성해준다. 

 

Editor.jsx 

import "./Editor.css"
const Editor = () => {
  return (
    <div className="Editor">
      <input placeholder="새로운 Todo..."/>
      <button>추가</button>
    </div>
  );
};

export default Editor;

 

TodoList 할일을 추가할 때 필요한 input 요소와 button 요소를 생성시켜줬다. 

 

 

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(255, 154, 196);
  color: white;
  border-radius: 5px;
}

 

이렇게 Editor 컴포넌트의 UI를 완성 시켜줬다. 

---

4. List 컴포넌트 UI 

TodoList 검색을 위한 검색어 창과 추가한 TodoList 의 목록들을 나열시켜주도록 만들어준다.

 

List.jsx

import "./List.css"
import TodoItem from "./TodoItem";
const List = () => {
  return (
    <div className="List">
      <h4>TodoList ✍️</h4>
      <input placeholder="검색어를 입력하세요" />
      <div className="todos_wrapper">
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </div>
    </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(12, 220, 247);
}

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

 

일단, 검색어 텍스트 창부터 만들어줬다. 

그리고 List.jsx에 TodoItem을 자세히 보면 똑같은 UI 구성을 갖는 것을 볼 수 있다. 

그렇기에 TodoItem이라는 컴퍼넌트를 따로 만들어 props를 바꿔가면서 반복적으로 렌더링 시켜주면 될 것 같다. 

 

 

 

TodoItem.jsx

import "./TodoItem.css";
const 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에 들어 갈 checkbox, content, date, 삭제 UI 를 만들어준다. 

 

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;
}

 

이렇게 List 컴포넌트의 UI 까지 완성시켜줬다. 

---

 

    다음부터는 CRUD 기능 구현을 목표로 투두리스트의 모습을 갖춰 볼 것이다.