-
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 가 모두 완성됐습니다. 다음 섹션에서는 프로젝트의 상태 관리를 해주겠습니다.
반응형'Front-end > React.js' 카테고리의 다른 글
4. 기능 구현하기 - TodoList | 벨로퍼트 (0) 2020.07.23 3. Context API 를 활용한 상태관리 - TodoList | 벨로퍼트 (0) 2020.07.22 1. 프로젝트 생성 UI 준비(1) - TodoList | 벨로퍼트 (0) 2020.07.22 13. Styled-components : 트랜지션 구현하기 - 컴포넌트 스타일링 | 벨로퍼트 (0) 2020.07.21 12. Styled-components : Dialog 만들기 - 컴포넌트 스타일링 | 벨로퍼트 (0) 2020.07.21