React

[TIL/React] 2023/05/18

Try 1 todo section에서는 title만 보여주기 상세 페이지에서 subtitle, desc 보여주기 객체 형태로 subtitle과 desc에 대한 state를, useNavigate()를 통해 페이지가 이동될 때 전달함. 기존에 Todo Card에 있던

2023년 5월 18일2min read

Try 1

1. todo section에서는 title만 보여주기 2. 상세 페이지에서 subtitle, desc 보여주기

객체 형태로 subtitle과 desc에 대한 state를, useNavigate()를 통해 페이지가 이동될 때 전달함. 기존에 Todo Card에 있던 subtitle과 desc에 대한 코드는 삭제함.

title을 클릭하면 상세 페이지로 이동, subtitle과 desc가 보임. 상단에는, 상세 페이지에서 TodoList로 가는 이동 버튼을 추가함.

Try 2

1. 공통적인 style을 commons 폴더로 가능한 많이 분리해보자!

src/commons/common.js

code

import { styled } from "styled-components";

export const CommonTemplateBlock = styled.div`
  width: 512px;
  height: 900px;

  background: white;
  background: linear-gradient(to bottom, white, ivory);
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);

  margin: 0 auto;
  margin-top: 96px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;

  overflow-y: auto;
`;

export const CommonTodoCard = styled.div`
  border: 3px solid gray;
  border-radius: 10px;
  margin-bottom: 10px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
`;

export const CommonInputBox = styled.input`
  margin-bottom: 10px;
  width: 250px;
  border: 3px solid gray;
  border-radius: 5px;
  padding: 4px;
`;

export const CommonTodoContent = styled.p`
  font-size: 40px;
  font-weight: bolder;
  color: gray;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export const CommonSectionTitle = styled.h2`
  text-align: center;
  color: #20c997;
  font-size: 30px;
  margin-top: 30px;
  font-weight: bolder;
`;

src/commons/button.js

code

import { styled } from "styled-components";

export const CommonButton = styled.button`
  background-color: #20c997;
  opacity: 0.8;
  color: white;
  font-weight: bolder;
  border: none;
  border-radius: 7px;
  padding: 10px;
  &:hover {
    border: 3px solid gray;
  }
  cursor: pointer;
`;

export const CommonButtonWrapper = styled.div`
  display: flex;
  justify-content: center;
  column-gap: 5px;
  margin-bottom: 5px;
`;

export const CommonNavButton = styled.button`
  background-color: #20c997;
  opacity: 0.8;
  color: white;
  font-weight: bolder;
  border: none;
  border-radius: 10px;
  padding: 8px;
  margin-top: 0px;
  &:hover {
    border: 3px solid gray;
  }
  cursor: pointer;
`;

src/commons/keyframe.js

code

import { keyframes } from "styled-components";

export const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

코드 내에서 2회 이상 반복되는 스타일에 대해서 common 파일로 분리함.

Try 3

1. input 태그는 multiline이 제공되지 않음. 그런데 title, subtitle, desc이 반드시 한 줄이라는 법은 없음. 2. textarea 태그에 대해 알아보자 + 적용해보자

기존 input 태그를 textarea 태그로 변경해보자고 단순하게 생각했다. 자연스럽게 CommonInputBox로 접근했다.

textarea 태그에는 마우스로 끌면 박스의 크기가 늘어나고 줄어드는 'resize' 속성이 적용되어 있었다. none으로 설정했다.

변경하면서, edit button이 두 군데 이상에서 눌리면 갑자기 모든 필드의 값이 동일해지는 현상을 발견했다.

id가 일치하지 않는 todo 객체에 대해서는 editMode를 false로 변경하는 기능을 추가했다. 기존에는 그냥 todo를 반환했다.

여러 줄을 입력하는 부분은 구현했는데, 막상 detail page로 가면 줄바꿈이 반영되지 않았다. 일단은 pre 태그라는 것을 적용했다.