ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2. 프로젝트 생성 UI 준비(2) - TodoList | 벨로퍼트
    Front-end/React.js 2020. 7. 22. 11:41
    반응형

    TodoItem 만들기

    이번 컴포넌트에서는 각 할 일 항목들을 보여주는 TodoItem 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 react-icons 에서 MdDone 과 MdDelete 아이콘을 사용합니다.

     

    /src/components/TodoItem.js :

    import React from 'react';
    import styled, { css } from 'styled-components';
    import { MdDone, MdDelete } from 'react-icons/md';
    
    const Remove = styled.div`
      display: flex;
      align-items: center;
      justify-content: center;
      color: #dee2e6;
      font-size: 24px;
      cursor: pointer;
      &:hover {
        color: #ff6b6b;
      }
      display: none;
    `;
    
    const TodoItemBlock = styled.div`
      display: flex;
      align-items: center;
      padding-top: 12px;
      padding-bottom: 12px;
      &:hover {
        ${Remove} {
          display: initial;
        }
      }
    `;
    
    const CheckCircle = styled.div`
      width: 32px;
      height: 32px;
      border-radius: 16px;
      border: 1px solid #ced4da;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      cursor: pointer;
      ${props =>
        props.done &&
        css`
          border: 1px solid #38d9a9;
          color: #38d9a9;
        `}
    `;
    
    const Text = styled.div`
      flex: 1;
      font-size: 21px;
      color: #495057;
      ${props =>
        props.done &&
        css`
          color: #ced4da;
        `}
    `;
    
    function TodoItem({ id, done, text }) {
      return (
        <TodoItemBlock>
          <CheckCircle done={done}>{done && <MdDone />}</CheckCircle>
          <Text done={done}>{text}</Text>
          <Remove>
            <MdDelete />
          </Remove>
        </TodoItemBlock>
      );
    }
    
    export default TodoItem;
    

    위 코드에서 TodoItemBlock 의 코드가 조금 생소하지요?

    const TodoItemBlock = styled.div`
      display: flex;
      align-items: center;
      padding-top: 12px;
      padding-bottom: 12px;
      &:hover {
        ${Remove} {
          display: initial;
        }
      }
    `;

    여기서 사용된 기능은 Component Selector 라는 기능입니다. 이 스타일은 TodoItemBlock 위에 커서가 있을 때, Remove 컴포넌트를 보여주라는 의미를 가지고 있습니다.

     

    이제 이 컴포넌트를 TodoList 에서 렌더링해보세요.

    /src/components/TodoList.js :

    import React from 'react';
    import styled from 'styled-components';
    import TodoItem from './TodoItem';
    
    const TodoListBlock = styled.div`
      flex: 1;
      padding: 20px 32px;
      padding-bottom: 48px;
      overflow-y: auto;
    `;
    
    function TodoList() {
      return (
        <TodoListBlock>
          <TodoItem text="프로젝트 생성하기" done={true} />
          <TodoItem text="컴포넌트 스타일링 하기" done={true} />
          <TodoItem text="Context 만들기" done={false} />
          <TodoItem text="기능 구현하기" done={false} />
        </TodoListBlock>
      );
    }
    
    export default TodoList;

    각 할 일 항목이 잘 나타났나요? 커서를 올렸을 때, 삭제 아이콘이 나타나는지도 확인해보세요.

     

     

    TodoCreate 만들기

    이번에는 새로운 항목을 등록 할 수 있는 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 react-icons 의 MdAdd 를 사용합니다.

    이 컴포넌트에서는 useState 를 사용하여 토글 할 수 있는 open 값을 관리하며, 이 값이 true 일 때에는 아이콘을 45도 돌려서 X 모양이 보여지게 한 후, 버튼 색상을 빨간색으로 바꿔줍니다. 그리고, 할 일을 입력 할 수 있는 폼도 보여줍니다.

    /src/components/TodoCreate.js :

    import React, { useState } from 'react';
    import styled, { css } from 'styled-components';
    import { MdAdd } from 'react-icons/md';
    
    const CircleButton = styled.button`
      background: #38d9a9;
      &:hover {
        background: #63e6be;
      }
      &:active {
        background: #20c997;
      }
    
      z-index: 5;
      cursor: pointer;
      width: 80px;
      height: 80px;
      display: block;
      align-items: center;
      justify-content: center;
      font-size: 60px;
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translate(-50%, 50%);
      color: white;
      border-radius: 50%;
      border: none;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: center;
    
      transition: 0.125s all ease-in;
      ${props =>
        props.open &&
        css`
          background: #ff6b6b;
          &:hover {
            background: #ff8787;
          }
          &:active {
            background: #fa5252;
          }
          transform: translate(-50%, 50%) rotate(45deg);
        `}
    `;
    
    const InsertFormPositioner = styled.div`
      width: 100%;
      bottom: 0;
      left: 0;
      position: absolute;
    `;
    
    const InsertForm = styled.form`
      background: #f8f9fa;
      padding-left: 32px;
      padding-top: 32px;
      padding-right: 32px;
      padding-bottom: 72px;
    
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      border-top: 1px solid #e9ecef;
    `;
    
    const Input = styled.input`
      padding: 12px;
      border-radius: 4px;
      border: 1px solid #dee2e6;
      width: 100%;
      outline: none;
      font-size: 18px;
      box-sizing: border-box;
    `;
    
    function TodoCreate() {
      const [open, setOpen] = useState(false);
    
      const onToggle = () => setOpen(!open);
    
      return (
        <>
          {open && (
            <InsertFormPositioner>
              <InsertForm>
                <Input autoFocus placeholder="할 일을 입력 후, Enter 를 누르세요" />
              </InsertForm>
            </InsertFormPositioner>
          )}
          <CircleButton onClick={onToggle} open={open}>
            <MdAdd />
          </CircleButton>
        </>
      );
    }
    
    export default TodoCreate;

    이제 이 컴포넌트를 App 에서 렌더링해보세요.

    /src/App.js :

    import React from 'react';
    import { createGlobalStyle } from 'styled-components';
    import TodoTemplate from './components/TodoTemplate';
    import TodoHead from './components/TodoHead';
    import TodoList from './components/TodoList';
    import TodoCreate from './components/TodoCreate';
    
    const GlobalStyle = createGlobalStyle`
      body {
        background: #e9ecef;
      }
    `;
    
    function App() {
      return (
        <>
          <GlobalStyle />
          <TodoTemplate>
            <TodoHead />
            <TodoList />
            <TodoCreate />
          </TodoTemplate>
        </>
      );
    }
    
    export default App;

    이제 프로젝트의 UI 가 모두 완성됐습니다. 다음 섹션에서는 프로젝트의 상태 관리를 해주겠습니다.

    반응형

    댓글

Luster Sun