깜찍한 도넛 캐릭터와 함께하는 협업 일정 관리 사이트
개인 또는 팀원들과 함께 투두리스트를 체크하고 일정을 공유하는 프로그램입니다.

---

코드잇 스프린트 프론트엔드 8기 part4 6팀
2024.10.07 ∼ 2024.11.11

배포 사이트

https://main-donut-seven.vercel.app/ 🔗

기술 스택

프로젝트 소개

팀원을 초대하고 오늘 하루 업무량을 공유할 수 있습니다. 오늘 하루 달성한 업무를 도식화 하여 보여주고 각 카테고리별 업무현황을 확인할수 있습니다.

매월, 매주, 매일의 업무를 설정해 오늘 하루 해야할 업무를 정리할수 있습니다.

담당 페이지

계정설정 페이지

이름과 비밀번호 변경, 회원 탈퇴기능을 가지고 있으며 프로필 사진 변경이 가능합니다.
프로필은 회원가입시 지정된 사진들을 랜덤으로 지정해주며 Axios와 React Query의 useMutation을 통해 변경과 삭제 리퀘스트를 보냅니다.

마이 히스토리 페이지

할일 체크 TodoList 페이지에서 완료한 목록을 한번에 확인할수 있습니다.
TodoList의 하루동안의 Complete수를 가져와 dayjs 라이브러리를 사용해 해당 그래프에 필요한 날짜와 Complete수를 매칭하였습니다.

커뮤니티 페이지

팀원과는 별개로 프로그램을 이용하는 모두가 사용할수 있는 게시판 페이지입니다.
검색과 최신/인기순 정렬이 가능하고 게시글 생성/삭제/수정이 가능합니다.
메인 게시판은 React Query의 infinity Query를 통해 무한스크롤을 구현하였습니다.

트러블 슈팅

문제

깃 허브 스타일 contribution 그래프 기능을 구현하기 위해서 1년 365일을 기준으로 블록을 만들고, 완료한 task가 있는 날에는 색을 넣어 완료 현황을 보여주려고함. 하지만 12월 31일까지만 존재하는 것을 확인

원인

2024년은 윤년으로 2월 29일이 존재하는데 1년을 365일로 생각하고 task 블록을 생성함. 따라서 3월 이후부터 하루 씩 날짜가 밀리며 한개의 task가 부족한 부분을 확인

해결

dayjs라이브러리의 isLeapYear이라는 플러그인을 통해 해결 isLeapYear은 윤년일 때 true 값을 아닐 때는 false값을 반환함 따라서 true값을 전달받을 시 366일을 false값을 전달받을시 365일을 기준으로 블록을 생성해 3월부터 하루씩 밀리는 현상을 방지함

개발팀 소개

👑 장용한	장혁수	최영선	김영주
마이 히스토리 페이지 계정설정 페이지 커뮤니티 페이지	로그인 및 회원가입 페이지 비밀번호 재설정 페이지 Oauth	팀 페이지 팀 리스트 페이지 팀 생성하기 페이지	랜딩 페이지 투두리스트 페이지