[항해99 리액트 입문] 18. 입문주차 개인 과제 설명

Goal : 목표

Goal : My Todo List 만들기

• 지금까지 배운 내용을 활용하여 My Todo List를 만들어봅시다.
• 이번 주에 배운 내용으로 충분히 할 수 있는 과제입니다. ✨
• 학습 과제를 끝내고 나면 할 수 있어요!
  • 컴포넌트와 리액트 훅 요소를 다룰 수 있어요.
  • 이벤트를 관리할 수 있어요.
  • vercel을 이용해 리액트 사이트를 배포할 수 있어요.

features : 구현 기능

• UI 구현하기
• Todo 추가 하기
• Todo 삭제 하기
• Todo 완료 상태 변경하기 (완료 ↔ 진행중)

Requirement : 과제 요구사항

1. 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요.

2. Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 해주세요.

3. Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현합니다.

4. Layout의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬해주세요.
   

5. 컴포넌트 구조는 자유롭게 구현해보세요.
   반복되는 컴포넌트를 찾아서, 직접 컴포넌트를 분리해보시고, 분리한 컴포넌트를 README에 작성합니다.

예시 사이트

http://todolistassignment.s3-website.ap-northeast-2.amazonaws.com/

Hint

• 사용한 hook은 오직 useState
• 기능 구현을 위해 생성한 함수는 2개 입니다. onChangeHandler , onSubmitHandler
• 사용한 javascript 내장 메서드는 map, filter 입니다.
• todo의 initial state는 {id: 0, title: “”, body: “”, isDone: false} 입니다.

제출방식

vercel로 배포해주세요.

Warning : 꼭 지켜야 할 것과 하지 않아도 되는 것!

이것은 꼭 지켜주세요(Do's)

과제 요구 사항은 모두 지켜주세요. 특정 기능을 임의로 배제하면 안 됩니다!

이것은 하지 않으셔도 돼요(Don'ts)

과제 추가 기획 때문에 고민하지 마세요. 위에 작성된 과제 요구 사항만 지키면 됩니다!

• 좋은 예 (⭕ ): "아하, 결국 리액트로 나만의 ‘Todo List’를 만들면 되는거구나!"
• 나쁜 예 (❌ ): "다른 기능 페이지가 더 있어야 하지 않을까?"