🎯 styled-component 위치 변경

• 기본적으로 파일을 열었을 때 로직이 먼저 보이도록 로직 컴포넌트 밑으로 이동시켰습니다.

🎯 화면 UI 수정

• 불필요한 margin, height 값으로 스크롤이 생기면서 깔끔하지 못합니다. 불필요한 margin, height 값 삭제 후 height 값 100vh로 수정해 한 눈에 보이도록 했습니다.

const TodoTemplateBlock = styled.div`
  width: 70%;
  ( X ) height: 800px;
	( O ) height: 100vh;

  min-width: 360px;
  max-width: 700px;

  position: relative;
  background: white;
  border-radius: 30px;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);

  margin: 0 auto;

  ( X ) margin-top: 96px;
  ( X ) margin-bottom: 32px;
  display: flex;
  flex-direction: column;
`;

🎯 top, right, bottom, left 축약하기

• 한 라인에 쓸 수 있도록 합니다.

const InsertForm = styled.form`
  display: flex;
	( O )
	padding : 36px 60px 36px 40px

	( X ) 
  padding-left: 40px;
  padding-top: 36px;
  padding-right: 60px;
  padding-bottom: 36px;
`;

🎯 의미 있는 컴포넌트명 수정, 불필요한 속성 제거

• 가운데에 있는 텍스트의 클래스명이 LeftText 입니다. CenterText로 수정했습니다.
• 불필요한 className 삭제했습니다.

// TodoFooter.tsx
( X ) <LeftText className="tasks-left">{undoneTasks.length} items left</LeftText>

( O ) <CenterText>{undoneTasks.length} items left</CenterText>

🎯 마우스 포인터 설정

• 몇몇 버튼에 포인터가 설정이 안돼있어서 수정했습니다