[5주차 - 1] 투두리스트 UI 구현

프로젝트에서 만들 것

- 날짜, 검색, 리스트 피드 추가 및 삭제 등의 기능을 구현

---

초기 설정

- npm create vite@latest, npm i, npm run dev 순서로 터미널

- 쓸데없는 파일 삭제, css 파일 코드 전체 삭제, App.jsx 일부 제외하고 다 삭제

- 각자의 섹션을 컴포넌트로 나눠서 만들어준다
(상단부터 헤더 컴포넌트, 에디터 컴포넌트, 리스트 컴포넌트)

 

App.css

.App{
  width: 500px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

- app요소의 스타일을 display로 flex로 설정한다

flex: 유연하게 요소들의 배치를 조절 가능
column: 요소를 세로로 정리
gap: 요소들의 간격 조절

 

Header.jsx

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

- newDate객체 생성 후 toDateString 메서드로 문자열로 렌더링(객체 렌더링 시도 시 오류 발생)

 

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

- felx값을 1로 하면 부모 요소를 벗어나지 않는 선에서 최대로 늘어남
- solid로 테두리 설정
- radius  속성은 5픽셀만큼 둥글게 설정

 

List

import "./List.css"
import TodoItem from "./TodoItem";

const List = () => {
    return (
        <div className="List">
            <h4>Todo List</h4>
            <input placeholder="검색어를 입력하세요"/>
            <div className="todo_wrapper">
                <TodoItem />
                <TodoItem />
                <TodoItem />
            </div>
        </div>
        );
};

export default List;

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

- width를 100%러 설정해서 서치바를 화면에 가득 채운다

- 위아래 방향에만 여백을 주기 위해 padding을 15px 0px로 설정한다

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

 

TodoItem 추가

이 부분 구현

import "./TodoItem.css";

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

export default TodoItem;

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

- flex로 설정하여 요소를 가로로 배치
- 열을 가운데 기준으로 정렬하기 위해 alignItems를 center로 설정