- 프로젝트를 시작하기 전 컴포넌트 구성은 [Todo-List] 1. 프로젝트 구성을 참고하면 된다.
src
디렉터리에 components
디렉터리를 생성하여 저장했다.src/components
디렉터리에 TodoTemplate.js
와 TodoTemplate.scss
파일을 생성하여 다음과 같이 작성했다.//TodoTemplate.js
import React from "react";
import './TodoTemplate.scss';
const TodoTemplate = ({ children }) => {
return (
<div className="TodoTemplate">
<div className="app-title">일정 관리</div>
<div className="content">{children}</div>
</div>
);
};
export default TodoTemplate;
//TodoTemplate.scss
.TodoTemplate {
width: 512px;
/* width가 주어진 상태에서 좌우 중앙 정렬 */
margin-left: auto;
margin-right: auto;
margin-top: 6rem;
border-radius: 4px;
overflow: hidden;
.app-title {
background: #2998b9;
color: white;
height: 4rem;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background: white;
}
}
flex
라는 display
속성을 자주 쓰는데, 더 자세한 사용법은 Flexbox Froggy를 참고하자.src/components
디렉터리에 TodoInsert.js
와 TodoInsert.scss
파일을 생성하여 다음과 같이 작성했다.//TodoInsert.js
import React, { useState, useCallback } from "react";
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';
const TodoInsert = () => {
return (
<form className="TodoInsert">
<input
placeholder="할 일을 입력하세요" />
<button type="submit">
<MdAdd />
</button>
</form>
);
};
export default TodoInsert;
아이콘
을 사용했는데, react-icons에서 다양한 아이콘과 이름을 확인할 수 있다.import
구믄을 사용하여 불러와 컴포넌트처럼 사용하면 된다.import { 아이콘 이름 } from 'react-icons/md';
//TodoInsert.scss
.TodoInsert {
display: flex;
background: #495057;
input {
// 기본 스타일 초기화
background: none;
outline: none;
border: none;
padding: 0.5rem;
font-size: 1.125rem;
line-height: 1.5;
color: white;
&::placeholder {
color: #dee2e6;
}
// 버튼을 제외한 영역 모두 차지하기
flex: 1;
}
button {
// 기본 스타일 초기화
background: none;
outline: none;
border: none;
background: #868e96;
color: white;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.5rem;
display: flex;
align-items: center;
cursor: pointer;
transition: 0.3s background ease-in;
&:hover {
background: #adb5bd;
}
}
}
+
버튼에 마우스를 올릴 경우 hover
기능을 통해 배경색이 바뀐다.src/components
디렉터리에 TodoListItem.js
와 TodoListItem.scss
파일을 생성하여 다음과 같이 작성했다.//TodoListItem.js
import React from "react";
import {
MdCheckBox,
MdRemoveCircleOutline,
MdCheckBoxOutlineBlank,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';
const TodoListItem = () => {
return (
<div className="TodoListItem">
<div className="checkbox">
<MdcheckBoxOutlineBlank />
<div className="text">할 일</div>
</div>
<div className="remove">
<MdRemoveCircleOutline />
</div>
</div>
);
};
export default TodoListItem;
MdCheckBox
아이콘 컴포넌트는 나중에 할 일이 완료되었을 때 체크된 상태를 보여주기 위한 아이콘이다.//TodoListItem.scss
.TodoListItem {
padding: 1rem;
display: flex;
align-items: center; // 세로 중앙 정렬
&:nth-child(even) {
background: #f8f9fa;
}
.checkbox{
cursor: point;
flex: 1; // 차지할 수 있는 모든 영역 차지
display: flex;
align-items: center; // 세로 중앙 정렬
svg {
// 아이콘
font-size: 1.5rem;
}
.text {
margin-left: 0.5rem;
flex: 1; // 차지할 수 있는 모든 영역 차지
}
// 체크되었을 때 보여줄 스타일
&.checked {
svg{
color: #adb5bd;
}
.text {
color: #adb5bd;
text-decoration: line-through;
}
}
}
.remove {
display: flex;
align-items: center;
font-size: 1.5rem;
color: #ff6b6b;
cursor: pointer;
&:hover {
color: #ff8787;
}
}
// 엘리먼트 사이 사이에 테두리 넣기
& + & {
border-top: 1px solid #dee2e6;
}
}
src/components
디렉터리에 TodoList.js
와 TodoList.scss
파일을 생성하여 다음과 같이 작성했다.//TodoList.js
import React from "react";
import TodoListItem from "./TodoListItem";
import './TodoList.scss';
const TodoList = () => {
return (
<div className="TodoList">
<TodoListItem />
<TodoListItem />
<TodoListItem />
</div>
);
};
export default TodoList;
//TodoList.scss
.TodoList {
min-height: 320px;
max-height: 513px;
overflow-y: auto;
}
props
전달 없이 여러번 보여주는 코드인데, 기능을 구현할 때 수정할 예정이다.위와 같이 기본적인 UI
만 생성한 Todo-List 프로젝트의 기본적인 폴더 구조는 다음과 같다.
📦 public
└──📜 index.html
📦 src
├──📂 components
│ ├──📜 TodoInsert.js
│ ├──📜 TodoInsert.scss
│ ├──📜 TodoList.js
│ ├──📜 TodoList.scss
│ ├──📜 TodoListItem.js
│ ├──📜 TodoListItem.scss
│ └──📜 TodoTemplate.js
│ └──📜 TodoTemplate.scss
├──📜 App.js
├──📜 index.css
└──📜 index.js
추후 각 컴포넌트가 실제로 동작할 수 있도록 기능을 구현해보도록 하자.❗❗