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

1. 디자인 시안 및 구현 뷰

디자인 사항 반영 완료!

🖥️ 구현뷰

🖌️ 디자인 시안

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

구현 완료 task

• lottie 활용 구글 소셜 로그인 구현
• 홈 할 일 카드 생성
  • dayjs 사용해 월별/주별 작업 생성
  • 홈 작업 카테고리 생성 및 할 일 카드 생성
  • 할 일 카드 목록 완료 여부에 따른 토글 구현
  • 할 일 카드 텍스트 필드 입력 및 날짜 생성

구현 미완료 task

• 없음!

3. 구현 방식

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

페이지 수가 적고 컴포넌트가 많기 때문에 , Atomic Design 을 적용했습니다. Atomic Design 은 기본적으로 5단계로 나누어져있는데, 그러면 props drilling이 너무 많을거라는 생각에 적절하게 atom molecule templates로 나누었습니다. role에 따라서 기본적인 molecule을 분리하고 molecule에서 atom을 분리하였습니다.

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

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

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

✔ 어떤 API를 사용했는지

• 오늘 나의 작업시간 조회 GET
• 전체 카테고리, 태스크 조회 (홈 뷰) GET
• 카테고리 조회 GET
• 타이머 내 할 일 카드 리스트 조회 GET