scr 폴더에 컴포넌트 폴더 생성 및 컴포넌트 파일 생성

생성한 컴포넌트 작성

Header.jsx

const Header = () => {
  return <div>Header</div>;
};
export default Header;

Editor.jsx

const Editor = () => {
  return <div>Editor</div>;
};
export default Editor;

List.jsx

const List = () => {
  return <div>List</div>;
};
export default List;

---

App.js에 등록

import "./App.css";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";

function App() {
  return (
    <>
      <Header />
      <Editor />
      <List />
    </>
  );
}

export default App;

---

컴포넌트 간격 수정을 위한 App.js에 수정

import "./App.css";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";

function App() {
  return (
    <div className="App">
      <Header />
      <Editor />
      <List />
    </div>
  );
}

export default App;

---

App.css 작성

.App {
  width: 500px; /*너비*/
  margin: 0 auto; /*상하 외부 여백 0, 좌우 여백 균등 분배(가운데 정렬)*/
  display: flex; /*.App의 자식 요소들의 배치를 유연화*/
  flex-direction: column; /*flex의 방향을 column(열, 세로)로 설정*/
  gap: 10px; /*요소들간 간격 설정(10px), flex display에만 적용 가능*/
}

---

헤더 컴포넌트

헤더 컴포넌트 수정

import "./Header.css";
const Header = () => {
  return (
    <div className="Header"> {/* CSS 적용을 위한 className 설정 */}
      <h3>오늘은 🗓️</h3> {/* window + . */}
      <h1>{new Date().toDateString()}</h1> {/* 새로운 Date객체 생성 & toDateString() 사용하여 현재 날짜를 읽기 쉬운 형식의 문자열로 반환 */}
    </div>
  );
};
export default Header;

헤터 CSS 파일 추가 및 작성

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

---

에디터 컴포넌트

에디터 컴포넌트 수정

import "./Editor.css";

const Editor = () => {
  return (
    <div className="Editor"> {/* CSS 적용을 위한 className 설정 */}
      <input placeholder="새로운 Todo..." /> {/* 빈 입력창 배경문구 */}
      <button>추가</button>
    </div>
  );
};

export default Editor;

에디터 CSS 파일 추가 및 작성

.Editor {
  display: flex; /*.Editor의 자식 요소들의 배치를 유연화 */
  gap: 10px; /* 요소들간 간격 설정 */
}

.Editor input {
  flex: 1; /* 부모 요소의 크기를 벗어나지 않는 범위에서 가능한 만큼 늘어남 */
  padding: 15px; /* 내부 여백 */
  border: 1px solid rgb(220, 220, 220); /* 테두리 */
  border-radius: 5px; /* 모서리 둥글기 */
}

.Editor button {
  cursor: pointer; /* 커서가 포인터 모양으로 바뀜 */
  width: 80; /* 너비 */
  border: none; /* 테두리 (없음) */
  background-color: rgb(37, 147, 255); /* 배경색 */
  color: white; /* 버튼 텍스트 색 */
  border-radius: 5px; /* 모서리 둥글기 */
}

---

리스트 컴포넌트

리스트 컴포넌트 수정

import "./List.css";
const List = () => {
  return (
    <div className="List">
      <h4>Todo List 🌱</h4>
      <input placeholder="검색어를 입력하세요" />
    </div>
  );
};
export default List;

리스트 CSS파일 추가 및 작성

.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); /*아래만 테두리*/
}

투두아이템 컴포넌트 생성

const TodoItem = () => {
  return <div>TodoItem</div>;
};

export default TodoItem;

리스트 컴포넌트에 투두아이템 컴포넌트 배치

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

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

---

투두아이템

투두아이템 컴포넌트 수정

import "./TodoItem.css";

const TodoItem = () => {
  return (
    <div className="TodoItem">
      <input type="checkbox" />
      <div className="content">Todo...</div> {/* 동일한 div 태그라 구분 필요 */}
      <div className="date">Date</div> {/* 동일한 div 태그라 구분 필요 */}
      <button>삭제</button>
    </div>
  );
};

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

투두 아이템 컴포넌트 간격을 위해 리스트 컴포넌트 수정

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

const List = () => {
  return (
    <div className="List">
      <h4>Todo List 🌱</h4>
      <input placeholder="검색어를 입력하세요" />
      <div className="todos_wrapper">
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </div>
    </div>
  );
};
export default 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_wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

---

결과