todo-app 2

TodoTemplate.scss

.TodoTemplate {
  width: 512px;
  // width 가 주어진 상태에서 좌우 중앙 정렬
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem;
  border-radius: 4px;
  overflow: hidden;
}

.app-title {
  background: #22b8cf;
  color: white;
  height: 4rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  background: white;
}

 

레이아웃을 할 때 flex라는 display 속성을 자주 쓸 텐데요 코드에 있는 주석을 읽으며 작성해 보면 각 코드가 어떤 역활을 하는지

충분히 학습할 수 있지만 flex를 더 자세히 알고 싶다면 Flexbox froggy(http://flexboxfroggy.com/#ko)라는 사이트를 추천합니다.

 

TodoInsert 만들기

 

• /src/component/TodoInsert.js

• /src/component/TodoInsert.scss

 

TodoInsert.js

import React from 'react';
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';

const TodoInsert = () => {
  return (
    <from className="TodoInsert">
      <input placeholder="할 일을 입력하세요" />
      <button type="submit">
        <MdAdd />
      </button>
    </from>
  );
};

export default TodoInsert;

 

여기서 처음으로 react-icons의 아이콘을 사용했습니다.

 

http://react-icons.netlify.com/#/icons/md 페이지에 들어가면 다음과 같이 수많은 아이콘과 이름이 함께 나타나는데요.

 

여기서 사용하고 싶은 아이콘을 고른다음, import 구문을 사용하여 불러온 후 컴포넌트 처럼 사용하면 됩니다.

 

import { 아이콘 이름 } from 'react-icons/md'

 

이 컴포넌트를 App에서 불러와 렌더링 해주겠습니다.

 

App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';

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

export default App;

 

이 컴포넌트를 스타일링 해주겠습니다.

 

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.1s background ease-in;
  &:hover {
    background: #adb5db;
  }
}

 

TodoListItem 과 TodoList 만들기

 

이제 일정 관리 항목이 보일 TodoListItem 과 TodoList 를 만들 차례입니다.

 

• src/component/TodoListItem.js
• src/component/TodoListItem.scss

TodoListItem.js

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdCheckBox,
  MdRemoveCircleOutline,
} from 'react-icons/md';
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 아이콘 컴포넌트는 사용하지 않은 상태인데요.

이 아이콘은 나중에 할일이 완료되었을 때 체크된 상태를 보여 주기 위해 사용할 아이콘입니다.

 

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

 

지금은 이 컴포넌트에 TodoListItem을 불러와서 별도의 props 전달 없이 그대로 여러 번 보여주고 있습니다. 

 

나중에는 여기에 기능을 추가하고 다양한 데이터를 전달할 것입니다.

 

App에서 렌더링합니다.

 

App.js

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

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

export default App;

 

이제 여기에 스타일링할 첫 번째 컴포넌트는 TodoList 인데, 필요한 스타일이 그다지 많지 않습니다.

 

TodoList.scss

.Todolist {
	min-height: 320px;
	max-height: 513px;
	overflow-y: auto;
}

 

TodoListItem.scss

.TodoListItem {
  padding: 1rem;
  display: flex;
  align-items: center; // 세로 중앙 정렬
  &:ntn-child(even) {
    background: #f8f9fa;
  }
  .checkbox {
    cursor: pointer;
    flex: 1; // 차지할 수 있는 영역 모두 차지
    display: flex;
    align-items: center; // 세로 중앙 정렬
    svg {
      // 아이콘
      font-size: 1.5rem;
    }
    .text {
      margin-left: 0.5rem;
      flex: 1; // 차지할 수 있는 영역 모두 차지
    }
    // 체크되었을 때 보여 줄 스타일
    &.checked {
      svg {
        color: #22b8cf;
      }
      .text {
        color: #adb5db;
        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;
  }
}

 

다음 글에서는 기능 을 구현하겠습니다.