REACT - TODO - MASTER

리액트로 간단하게 뚜두를 만들어 보자! 만들다 보면 당신도 리액트 입문

데모 디자인 (예시)

요구사항

Todo 인터페이스 정의

interface Todo {
  id: number;
  title: string;
  content?: string;
  isDone: boolean;
  tags: string[];
}

• 디자인: 제공된 데모 디자인을 참고하여 비슷한 디자인으로 구현합니다.
• 타입 준수: 위에 정의된 인터페이스 타입을 준수합니다. 필요한 경우 확장은 가능합니다.
• 라이브러리 제한: 스타일 라이브러리로는 기본적으로 Tailwind를 제공합니다. 필요한 경우 다른 스타일 라이브러리도 허용합니다. 스타일을 제외한 제공된 라이브러리 이외의 추가 라이브러리는 사용을 최소화합니다.

기능 요구사항

• 투두 입력 폼

  • 제목, 본문(설명), 태그를 입력받는 폼을 구현합니다.

• 투두 리스트

  • 입력받은 투두 항목을 리스트로 화면에 표시합니다.

• 완료 처리

  • 각 투두 항목에 체크 버튼을 추가하여, 완료된 항목에 대해 디자인 처리를 적용합니다.
  • 체크 버튼뿐만 아니라, 투두 항목 자체의 디자인에도 변화를 줍니다.

• 삭제 기능

  • 투두 항목에 삭제 버튼을 추가합니다.
  • 삭제 버튼을 누르면 모달을 띄워 확인을 받은 후 삭제합니다.
    • 삭제 버튼 클릭 시, 해당 항목을 삭제합니다.
    • 취소 버튼 클릭 시, 모달을 닫고 삭제를 취소합니다.
    • 모달 외부를 클릭해도 모달이 닫히도록 합니다.

• 제목 및 본문 수정

  • 제목 수정: 투두 항목의 제목을 클릭하면 제목을 수정할 수 있도록 합니다.
    • 입력 후 엔터 키 또는 확인 버튼을 눌러 수정 내용을 반영합니다.
  • 본문 수정: 투두 항목의 본문을 클릭하면 본문을 수정할 수 있도록 합니다.
    • 입력 후 엔터 키 또는 확인 버튼을 눌러 수정 내용을 반영합니다.

추가 요구사항

• 확장 가능한 설계: 기능 추가를 고려하지 않고도 쉽게 확장할 수 있는 설계 방법을 고민합니다.

• 재사용성, 가독성, 확장성 고려: 컴포넌트의 재사용성, 코드의 가독성, 기능 확장성을 고려해 구현합니다.

• 정렬 기능: 투두 인터페이스를 확장하여 항목을 정렬할 수 있는 기능을 구현합니다.

• 태그별 필터링 기능: 투두 항목을 태그를 기준으로 필터링할 수 있는 기능을 구현

  • 태그 검색을 통한 필터링:
    • 사용자는 검색 창에 원하는 태그를 입력하여, 해당 태그와 일치하는 투두 항목을 필터링할 수 있습니다.
    • 검색 결과에 일치하는 태그를 선택하면, 그 태그를 포함한 투두 항목들이 화면에 표시됩니다.
  • 태그 필터 버튼을 통한 필터링:
    • 태그 필터 버튼을 제공하여, 사용자가 미리 정의된 (혹은 동적으로 추가하는) 태그 목록에서 원하는 태그를 클릭해 필터링할 수 있습니다.
    • 버튼을 클릭하면 해당 태그와 일치하는 투두 항목들이 표시됩니다.

• 리스트 뷰 확장: 투두 리스트를 그리드 뷰와 캘린더 뷰, 칸반 뷰로 확장할 수 있는 기능을 추가합니다.

• 비동기 상태 관리: 제공된 TodoAPI를 통해 비동기 상태 관리를 구현합니다.

• Drag and Drop (DND) 기능: 투두 항목을 드래그 앤 드롭으로 옮길 수 있는 기능을 추가합니다.

• 애니메이션: 투두 항목과 관련된 애니메이션을 추가합니다.

단계별 구현 가이드

1단계) 기본 투두 구현

• 투두 입력 폼 구현: 제목, 본문, 태그를 입력할 수 있는 폼을 만듭니다.
• 투두 아이템 컴포넌트: 개별 투두 아이템을 컴포넌트로 만듭니다.
• 투두 리스트 컴포넌트: 투두 아이템들을 모아 화면에 표시합니다.
• 투두 항목 버튼
  • 삭제: 모달을 통한 삭제 기능 구현.
  • 완료: 완료 여부를 표시하는 체크 버튼 구현.
  • 투두 수정 기능: 제목과 본문을 수정할 수 있는 기능을 추가합니다.

2단계) 필터링 및 커스텀 훅 적용

• 커스텀 훅 사용: 도메인 로직을 커스텀 훅으로 분리하여 관리합니다.
• 디자인 시스템 적용: 컴포넌트와 스타일을 디자인 시스템으로 나눕니다.
• 투두 필터링: 태그 또는 상태에 따른 투두 필터링 기능을 추가합니다.

3단계) 비동기 투두 구현

• 투두 서버 연동: 제공 된 TodoAPI를 사용해 투두 목록을 서버에서 받아옵니다.
• 스켈레톤 UI: 서버에서 데이터를 가져오는 동안 스켈레톤 UI를 표시합니다.
• Suspense와 ErrorBoundary: React의 Suspense와 ErrorBoundary를 사용하여 비동기 상태 관리를 개선합니다.

4단계) 애니메이션과 최적화

• 사용자 행동에 대한 애니메이션을 구현하여 UI를 더 직관적이고 자연스럽게 만듭니다.
• Drag and Drop(DND) 기능을 통해 투두 항목을 직관적으로 이동할 수 있도록 구현합니다.
• 컴포넌트 렌더링 최적화를 통해 불필요한 렌더링을 줄이고 성능을 개선합니다.

리뷰

• 저장소를 Fork하여 작업 시작
  • 리뷰를 위해 해당 저장소를 fork한 뒤, 작업을 완료한 후 자신의 깃허브 닉네임으로 브랜치를 만들어 Pull Request(PR)을 제출해주세요.
• 커밋 단위로 작업 관리
  • 커밋은 최대한 기능 단위로 쪼개서 관리해주세요. Squash Merge로 커밋을 병합하여 관리해도 괜찮습니다.
• 브랜치 이름 규칙
  • 단계별로 구현 가이드를 따라 브랜치를 닉네임-{단계번호} 형식으로 만들어도 되고, 자신만의 기준에 따라 브랜치 이름을 설정해도 좋습니다.

이슈

• 투두에 대한 이슈나 오류, 문제는 DM이나 Issue를 활용해 주세요.