담당자 :
김건휘
디자인 사항 반영 완료!
익스텐션 연동(등록되지 않은 url 접속시 타이머 중지)
구현 완료 task
구현 미완료 task
✔ 어떻게 설계를 했고 내가 구현할 때 어느 부분에 집중을 했는지
컴포넌트 별로 역할을 분리해야되기 때문에, Atomic Design 을 적용했습니다.
컴포넌트 설계를 하는데 있어서 다른 페이지에서 재사용 가능한 공통 컴포넌트를 우선적으로 생성 하였으며, 재사용 가능한 로직은 커스텀 훅으로 분리하였습니다.
타이머뷰의 타이머는 동적인 애니메이션이 있기 때문에, 최대한 자연스럽고 부드럽게 동적인 애니메이션을 구현하기 위해 노력했습니다. 커스텀 작업이 많은 디자인이어서 라이브러리를 사용하지 않고, 직접 구현하였습니다.
제가 맡은 타이머 뷰 같은 경우는 실시간성을 보장해야하는 뷰이기 때문에 상태관리에 보다 집중하여 진행하였습니다.
특히, 익스텐션 연동을 직접적으로 하는 뷰가 제가 맡은 타이머 뷰이기 때문에 빠르게 퍼블리싱 작업을 끝내고 익스텐션 연동을 위한 로직구현과 연동하는 방법에 대한 공부도 틈 날때마다 진행하였습니다.
✔ 어떤 라이브러리를 사용했으며, 라이브러리 도입 근거가 있다면 무엇인지 (사용하지 않았다면 그 이유)
react query 라이브러리를 사용했으며 데이터를 캐싱하고 업데이트하는 과정과 낙관적 업데이트를 더 간편하게 적용하기 위해 도입.
tailwind CSS 라이브러리를 사용하여 보다 일관된 스타일로 HTML 요소에 클래스를 추가하는 방식으로 코드 작성의 속도를 높이기 위해 도입.
✔ 어떤 API를 사용했는지