담당자 : 서대원 김건휘 박상아 김한서

1. 디자인 시안 및 구현 뷰

디자인 사항 반영 완료!

🖥️ 구현뷰

🖌️ 디자인 시안

2. 구현 완료된 task와 완료하지 못한 task

구현 완료 task

• lottie 활용 구글 소셜 로그인 구현
• 홈 할 일 카드 생성
  • dayjs 사용해 월별/주별 작업 생성
  • 홈 작업 카테고리 생성 및 할 일 카드 생성
  • 할 일 카드 목록 토글 구현
  • 할 일 카드 텍스트 필드 입력 및 날짜 생성
• 작업 카테고리 생성 및 조회 모달
  • 작업 카테고리 이름 생성 후 datepicker로 날짜 또는 작업 세트 선택
  • 빠른 불러오기 선택 시 기존 작업 카테고리 조회해 새로운 카테고리에 작업 세트 url 추가
  • 작업 카테고리 이름 길이 제한
  • 작업 카테고리 url 입력 시 중복값 유효성 검사
• 타이머 작업 시간 생성 및 정지
  • 타이머 뷰 타이머 동작 구현
  • 친구 캐러셀 구현
  • 사이드바 애니메이션 적용
  • 크롬 익스텐션 연동(등록되지 않은 url 접속시 타이머 정지)

구현 미완료 task

• 없음!

3. 구현 방식

✔ 어떻게 설계를 했고 내가 구현할 때 어느 부분에 집중을 했는지

컴포넌트 별로 역할을 분리해야되기 때문에, Atomic Design 적용

• token이 있을 때만 요청을 하도록 enabled 속성을 사용
• api 요청을 통해 url에 대한 tabName을 받아옴

✔ 어떤 라이브러리를 사용했으며, 라이브러리 도입 근거가 있다면 무엇인지 (사용하지 않았다면 그 이유)

react query 라이브러리를 사용했으며 데이터를 캐싱하고 업데이트하는 과정과 낙관적 업데이트를 더 간편하게 적용하기 위해 도입.

tailwind CSS 라이브러리를 사용하여 보다 일관된 스타일로 HTML 요소에 클래스를 추가하는 방식으로 코드 작성의 속도를 높이기 위해 도입.

datepicker

✔ 어떤 API를 사용했는지