👀 배포링크

📌 원티드 프론트엔드 프리온보딩 코스 - 모두컴퍼니 기업과제

❕To-Do List App 만들기❗

📚 과제 요구사항

- [필수] 적절한 Header를 만든다.
- [필수] 스크롤시 Header가 사라지지 않고 화면 상단에 고정되도록 한다.
- [필수] 필수적으로 추가해야할 기능: Task 목록 조회, 새로운 Task 추가, Task 삭제
- [필수] Drag and Drop으로 Task의 순서를 변경한다.
- [필수] 최소 두가지 이상의 조건으로 Task를 필터링 (ex. 상태, 생성일, 생성자, 중요도)
- [필수] Task의 상태 변경 (ex. 진행중 → 완료)

😀 팀원

• 김준영
• 이지열
• 정태웅
• 조성상

이미지 및 시연 영상

📑 기능분담

• === 과제 필수 요구사항

✅ 헤더 - 정태웅

• 적절한 Header를 만든다. Task 목록 조회, 새로운 Task 추가,
• 스크롤시 Header가 사라지지 않고 화면 상단에 고정되도록 한다.
• 중앙에 현재 날짜 표시
• Todo 내용 입력하고 완료 목표일 설정하여 Todo 추가
• Todo Item를 빈 상태로 입력 시도 시 Toast 메시지 출력

✅ 메인 섹션 - 이지열

• Task 삭제
• 같은 완료 목표일로 묶인 날짜 카드 출력
• 카드 내부에 Todo 완성도 및 각 상태별 Todo Item 갯수 표시
• 최신, 오래된 날짜순으로 정렬 기능
• 카드 삭제 클릭시 같은 완료일로 묶인 전체 Todo Items 삭제 기능

✅ Todo List - 김준영, 조성상

• Drag and Drop으로 Task의 순서를 변경한다.

• Task의 상태 변경 (ex. 진행중 → 완료)

• 최소 두가지 이상의 조건으로 Task를 필터링 (상태, 생성일조건으로 필터링 진행)

• 날짜별 Todo List card 클릭 시 모달 출력

• 3개의 상태에 따라 Todo Item 필터링 (전체 클릭 시 전체 아이템 출력)

• 개별 Todo Item 삭제

• 일괄 선택하여 한 번에 전체 Todo Item 삭제

• Todo Item Drag and Drop 기능, 애니메이션 추가

• Todo의 상태를 클릭시 상태 변경 가능

🛠 기술스택

• Language: TypeScript
• Library: React, styled-components, react-datepicker
• Linter: Eslint & Prettier
• State management: Context API

👨‍💻 실행 방법

git clone, directory change

git clone https://github.com/ONE-TED/5_moduCompany_team2.git cd 5_moduCompany_team2

설치

npm install

실행

npm start