Mobile_반하다

Overview

반려동물과의 소중한 하루를 기억할 수 있는 반려동물 하루 다이어리, 반하다.
밖에 있는 시간이 많기 때문에 반려동물을 키우지는 못하지만 반려동물 영상을 꼬박 챙겨보는 나에게 이번 프로젝트는 힐링이었다.🤗
초반에는 반려동물 한 마리에 대한 일기를 작성할 수 있도록 구성했지만, 실제 반려동물을 키우는 사람들의 의견을 반영하여 한 마리 뿐만 아니라 여러마리 반려동물의 일기를 자유롭게 작성할 수 있도록 했다.
앞으로 추가하고 싶은 기능이 무궁무진한 반려동물 하루 다이어리! 많은 분들이 반려동물과의 소중한 시간을 [반하다]와 함께 추억하길🙏🏻

Key Features

Image Picker 및 Date Picker 커스텀화

귀여운 앱의 톤을 유지하기 위해 이미지 피커와 데이트 피커를 커스텀화 하였다. 라이브러리를 수정하기도 하며 시행착오도 많았지만 뿌듯 뿌듯! 하지만 아직 최적화 하고 싶은 부분이 있어 계속 손 볼 예정이다.

커서(Selection) 위치에 따라 키보드에 가려지지 않도록 Scroll

일기 작성/수정 화면에서 이미지 크기로 인해 텍스트 작성 화면이 좁게 느껴지지 않도록 하기 위해 텍스트 필드가 포커스 되면 텍스트 필드가 top으로 스크롤 되게 하였으며, 또한 커서(selection) 위치에 따라 키보드에 가려지지 않도록 자동으로 스크롤 되도록 구현했다. selection 위치에 따라 자동 스크롤 되는 부분은 ios만 가능하며, 안드로이드는 아직 노력 중이다 😥

드래그로 일기 순서 이동 구현

하루에 일기를 여러개를 쓸 수 있도록 해 놓았기 때문에 일기 순서를 사용자가 수정할 수 있도록 하고 싶었다. 일기 쓴 시간을 포스팅 마다 설정하게 할지, 드래그로 순서를 변경하게 할 것인지 고민 끝에 드래그 방법으로 사용자가 더욱 간단하게 접근할 수 있도록 했다.
이 때, db를 최소한으로 수정하기 위해 일기마다 소수점을 가지는 order 값을 부여하고, 순서를 이동한 일기의 order 값만 뒤에 위치한 일기의 order 값과 0.001씩 차이나게 하여 정렬하는 방법을 사용했다.

스크롤 페이징을 통한 무한 스크롤 구현

일기 리스트 스크린에서는 전체 일기를 최신순으로 볼 수 있기 해야하기 부하를 줄여주기 위해서 페이징 처리를 하고, 이를 무한 스크롤로 로딩할 수 있도록 했다. 또한, 헤더의 일기장 이름을 터치하면 리스트의 Top으로 이동할 수 있도록 하여 사용성을 향상시켰다.

월간/연간 달력 구현

일기 리스트 페이지에서는 특정 날짜의 일기로의 접근이 쉽지 않기 때문에 캘린더 화면을 만들었다. 월별 캘린더는 위아래 스크롤로 이동할 수 있으며, 연도 이동도 할 수 있도록 했다. 최적화 시키느라 애를 먹긴 했는데 여러가지 방법을 시도하면서 RN의 FlatList에 대해 더 알수있게 되었다. 이걸 해놓고 보니.. 디핏의 캘린더도 수정하고 싶어졌.. 🤦‍♀️