투두앱 만들기 2: TodoInsert, TodoList, TodoListItem

1편에 이어 기본 컴포넌트를 작성하겠습니다. components 디렉토리 밑에 TodoInsert, TodoList, TodoListItem 폴더를 생성하고 밑에 사진처럼 파일을 생성해줍니다. 

 

TodoInsert

TodoInsert는 새로운 투두를 입력하고 추가하기 위한 컴포넌트 입니다. 

 

TodoInsert.js

import React from "react";
import "./TodoInsert.styles";
import { MdAdd } from "react-icons/md";
import { ToDoInput, ToDoInsert, ToDoButton } from "./TodoInsert.styles";

const TodoInsert = () => {
  return (
    <ToDoInsert>
      <ToDoInput placeholder="할 일을 작성하세요!" />
      <ToDoButton type="submit">
        <MdAdd />
      </ToDoButton>
    </ToDoInsert>
  );
};

export default TodoInsert;

더 많은 아이콘은 react-icons.github.io/react-icons/icons?name=md  여기서 확인할 수 있습니다. import구문으로 컴포넌트처럼 사용하시면 됩니다.

 

React Icons

 

TodoInsert.styles.js

import styled from "styled-components";

export const ToDoInsert = styled.form`
  display: flex;
  background: #495057;
`;

export const ToDoInput = styled.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;
`;

export const ToDoButton = styled.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.1s background ease-in;
  &:hover {
    background: #abd5bd;
  }
`;

 

App.js

import "./App.css";
import TodoInsert from "./components/TodoInsert/TodoInsert";
import TodoTemplate from "./components/TodoTemplate/TodoTemplate";

const App = () => {
  return (
    <TodoTemplate>
      <TodoInsert />
    </TodoTemplate>
  );
};

export default App;

추가로 index.css에서 body블럭안에 background: #f2f2f2; 추가해주시기 바랍니다. 

 

yarn start

 

TodoListItem

TodoListItem은 각각의 투두아이템 정보를 보여주는 컴포넌트입니다.

 

TodoListItem.js

import React from "react";
import {
  MdCheckBoxOutlineBlank,
  MdRemoveCircleOutline,
} from "react-icons/md";
import "./TodoListItem.styles";
import { CheckBox, Remove, ToDoListItem, ToDoText } from "./TodoListItem.styles";

const TodoListItem = () => {
  return (
    <ToDoListItem>
      <CheckBox>
        <MdCheckBoxOutlineBlank />
        <ToDoText>투 두</ToDoText>
      </CheckBox>
      <Remove>
        <MdRemoveCircleOutline />
      </Remove>
    </ToDoListItem>
  );
};

export default TodoListItem;

 

TodoListItem.styles.js

import styled from "styled-components";

export const ToDoListItem = styled.div`
  padding: 1rem;
  display: flex;
  align-items: center;

  &+& {
      border-top: 1px solid #dee2e6;
  }
`;

export const CheckBox = styled.div`
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  svg {
    font-size: 1.5rem;
  }
`;

export const ToDoText = styled.div`
  margin-left: 0.5rem;
  flex: 1;
`;

export const Remove = styled.div`
    display:flex;
    align-items: center;
    font-size: 1.5rem;
    color: #ff6b6b;
    cursor: pointer;
    &:hover{
        color:#ff8787;
    }
`;

 

TodoList

배열을 받아와 map함수를 이용하여 각각의 TodoListItem을 생성하여 보여줍니다.

 

TodoList.js

import React from "react";
import TodoListItem from "../TodoListItem/TodoListItem";
import { ToDoList } from "./TodoList.styles";

const TodoList = () => {
  return (
    <ToDoList>
      <TodoListItem />
      <TodoListItem />
      <TodoListItem />
    </ToDoList>
  );
};

export default TodoList;

 

TodoList.styles.js

import styled from "styled-components";

export const ToDoList = styled.div`
  min-height: 320px;
  max-height: 513px;
  overflow-y: auto;
`;

 

App.js

import "./App.css";
import TodoInsert from "./components/TodoInsert/TodoInsert";
import TodoList from "./components/TodoList/TodoList";
import TodoTemplate from "./components/TodoTemplate/TodoTemplate";

const App = () => {
  return (
    <TodoTemplate>
      <TodoInsert />
      <TodoList />
    </TodoTemplate>
  );
};

export default App;

 

yarn start