TodoHead 남은 할일 > done이 false 인것의 갯수를 출력 import React from "react"; import styled from "styled-components"; import {useTodoState} from "./TodoContext"; const TodoHeadBlock = styled.div` padding-top: 48px; padding-left: 32px; padding-right: 24px; padding-left: 32px; border-bottom: 1px solid #e9ecef; h1 { margin: 0; font-size: 36px; color: #343a40; } .day { margin-top: 4px; color: #868e96; font-siz..

기능 구현하기 전 UI 를 만들자 프로젝트 생성 $ npx create-react-app 프로젝트명 icons, styled-componest 라이브러리 설치 $ yarn add react-icons styled-components 만들 컴포넌트 목록 TodoTemplate - 레아이웃 TodoHead - 날짜 , 남은 해야할일 TodoList - 할 일의 정보 TodoItem - 할 일의 정보 렌더링 TodoCreate - 할 일 등록 1. 배경 색 설정 글로벌 스타일 설정, createGlobalStyle 사용 App.js import './App.css'; import {createGlobalStyle} from "styled-components"; const GlobalStyle = createG..