JHYOOOOON / Checklist

Checklist

40주 간의 체크리스트를 구현하는 프로젝트

기술스택

• React Native
• Styled Components
• Jotai

구현사항

1. 체크리스트 추가/삭제
2. 주차별 체크리스트 UI

문제 해결 과정

1. React Native를 처음 접해 세팅에 문제 발생
   • 콘솔에 발생한 에러문구대로 버전 업데이트 실행
   • 구글링 후, x-code 설치
2. 애니메이션 구현의 어려움
   • 웹 구현할 때와 다르게 css transition이 동작하지 않음
   • Reanimated 라이브러리 공식 문서 정독 및 구글링으로 토스트 팝업, 진행 바 작업
   • 주차 변경 시의 체크리스트 컴포넌트 애니메이션은 주차 별로 다른 페이지로 구성해야할 것 같아 React Navigation 라이브러리를 이용해보았으나 동일 컴포넌트를 재사용하여 스크린 구성하는 부분에서 문제 발생 / 시간이 오래 걸려 다른 기능에 중점을 두기로 함
   • 주차 슬라이드 애니메이션의 경우, 라이브러리를 이용해보았으나 원하는 디자인 적용 불가로 직접 구현
3. 체크리스트 추가 시 Input 컴포넌트가 키보드 위에 위치해야 하는 문제
   • 구글링 후, InputAccessoryView로 해결

그 외

1. 주차 변경 시, 체크리스트 컴포넌트 애니메이션 미구현
2. 피그마에 기재되어있지 않은 border-radius 임의로 적용