아이의 일상과 건강 데이터를 손쉽게 기록하고 공유, 활동 기록을 종류별 그래프로 시각화하여 제공 부부 외에도 공동양육자가 그룹에 참여하여 함께 기록하는 “소중한 나의 아이를 위한 우리 모두의 육아일기”

• 기간 : 2023. 07. 03 ~ 2023. 08. 18 (7주)
• 인원 : 6명
• 역할 : 프론트엔드 팀원
• 기술 : React React Native TypeScript Styled-Component React-Query Recoil
• 협업/상태관리 툴 : Jira Gitlab Notion
• 링크 : https://github.com/baebaemin/Sonagi

구현 및 기여 영역

아이 프로필

• 생성 및 수정 등 아이 관련 상태 관리, 데이터 바인딩

메인 - 아이 활동 기록

• 7개의 카테고리, 16종의 활동 기록 버튼
• 활동별 버튼을 눌렀을 시 데이터 블록 생성 및 스크롤 자동 이동
• 날짜별, 카테고리별 활동 로그 필터링

메인 - 아이 활동 상세 기록

• 메모 등 활동 로그별 상세 기록 옵션의 다각화 (ex. 왼쪽/오른쪽 수유 시간 및 양(ml), 수면 시간, 체온 등)

그래프 - 데이터 시각화

• 외부 라이브러리를 사용하지 않고 svg 태그를 활용하여 도넛 차트 구현

기타

• 상단 BabyBar
• 하단 NavBar, 라우팅
• UX/UI 디자인
• 스타일 가이드 수립

메인 기능

[아이 활동 기록] 하단의 버튼을 통해 7개의 카테고리 내 16종의 활동 기록을 간편하게 기록할 수 있습니다.

[아이 활동 상세 기록] 생성된 활동 블록을 누르면 시간 및 상세 수치 수정, 관련 메모를 작성할 수 있습니다.

[우리 아기] 예방접종/검진 여부를 체크하고 공동양육자끼리 아이의 주의사항을 작성하고 확인할 수 있습니다.

[데이터 시각화] ‘일별 그래프’에서는 도넛형 그래프와 통계 카드로 카테고리별 활동을 한 눈에 볼 수 있습니다.

[데이터 시각화] ‘주별 그래프’에서는 막대형 그래프로 주간 카테고리별 활동을 직관적으로 파악할 수 있습니다.

[육아일기] 공동양육자들과 함께 아이의 육아일기를 작성하세요. 작성시 멤버들에게 ‘새 글 알림’이 전달됩니다.

챌린지 & 성장

프론트엔드 개발자로서의 첫 번째 React & TypeScript 프로젝트

• 총 프로젝트 진행 기간은 7주였으나 당시 기획과 UI 설계의 마감이 늦어져 실질적인 개발 도입은 4주차부터 진행되었습니다. 단기간 내에 React와 TypeScript를 동시에 학습해야했으며, Recoil을 통한 전역 상태관리 방법, React-Query의 활용으로 Custom hook을 직접 만들어서 사용하는 방법을 3주간 빠르게 숙지하여 적용하였습니다.
• TypeScript를 엄격하게 사용하고자 any 사용을 금하였기에 16종의 아이 활동 기록의 타입 구조를 설계할 때 API 콜을 통한 데이터 페칭 과정에서 key 값들의 불일치로 어려움을 겪었습니다. 이 경험을 통해 이제는 백엔드 디벨로퍼와의 긴밀한 소통을 통해 보다 명확한 데이터 타입과 구조를 사전에 정의하고, 수정을 요청해야 하는 중요성을 깨닫게 되었습니다.

Styled-Component의 도입으로 외부 라이브러리 없이 스타일링

• 부트스트랩이나 Material-UI와 같은 외부 CSS 라이브러리에 의존하지 않고 Styled-Component를 사용하여 컴포넌트별 스타일링을 구현했습니다. 도넛 차트, 막대 그래프, 캘린더와 같은 인터페이스도 직접 CSS 옵션을 하나씩 제어해가며 개발했기에 프로젝트의 시각적 통일성을 확보하여 안정적인 사용자 경험을 제공하는데 기여할 수 있었습니다.

시스템 아키텍처