따꼼 | 헬스케어 및 건강관리 서비스 프로젝트 소개

1. 프로젝트 소개

프로젝트 "따꼼"은 어린이 필수 예방접종 정보를 제공하고, 체크리스트와 캘린더를 통해 예방접종 진행 상황을 확인할 수 있는 웹 플랫폼을 만드는 프로젝트로, 예방접종 관련 데이터를 질병 관리청의 API를 통해 제공받아 사용자들에게 편리한 기능을 제공하는 것이 목표입니다. 이 프로젝트는 5명의 프론트엔드 개발자들로 구성되었으며, Next.js와 React를 기반으로 진행됩니다.

 

2. 주요 기능 및 페이지 구성

1. 로그인/회원가입
   • 일반 로그인 및 소셜 로그인(구글, 카카오) 기능을 제공합니다.
2. 홈페이지
   • 페이지 간 이동을 위한 버튼을 제공하며, 주요 페이지는 다음과 같습니다:
     • 접종 정보 페이지: 연령별로 필요한 예방접종 정보를 카드 형식으로 보여줍니다.
     • 우리 아이 페이지: 아이의 정보를 등록, 수정하고, 예방접종 일정을 확인할 수 있는 페이지입니다.
     • 병원 찾기 페이지: 지정된 API를 활용하여 예방접종을 받을 수 있는 병원을 검색하고 보여줍니다.
3. 접종정보 페이지
   • 연령별로 필수 예방접종을 확인하고, 해당 연령에 맞는 예방접종을 받을 수 있는 병원을 검색할 수 있습니다.
4. 병원 찾기 페이지
   • API에서 제공받은 데이터를 바탕으로 병원 목록을 불러오고, 필터링 기능을 통해 병원을 검색할 수 있습니다.
5. 우리 아이 페이지
   • 사용자가 등록한 아이의 정보를 관리하고 생년월일을 기반으로 예방접종 일정을 캘린더로 보여주며, 접종 여부를 확인할 수 있습니다.
6. 전체 접종 체크리스트
   • 모든 예방접종을 체크리스트 형식으로 관리하고, 접종 이력을 기록 및 수정할 수 있습니다.
7. 마이페이지
   • 사용자의 정보를 확인할 수 있는 페이지입니다.
   • 로그아웃 기능을 제공합니다.

3. 사용 기술 스택

• 프론트엔드 프레임워크/라이브러리: Next.js, React, TypeScript
• 상태 관리: Zustand (Client-side), Tanstack Query (Server-side)
• 데이터베이스 및 백엔드: Supabase (Auth 및 데이터베이스)
• UI 및 스타일링: Shadcn (UI Components Library), Tailwind CSS, Lucide-React
• 폼 및 데이터 유효성 검증: React Form, Zod
• 배포: Vercel (Next.js 배포)
• 기타 도구 및 유틸리티: PWA (Progressive Web App), fast-xml-parser(병원 api에서 사용), date-fns(아이 접종 일정표 계산할 때 사용)

4. 예방접종 정보 관리

프로젝트에서 다룰 주요 백신 정보는 JSON 형식으로 관리되며, 백신 이름, 예방 가능한 질병, 백신 설명, 접종 일정 등이 포함됩니다. 이를 기반으로 연령별 예방접종 일정을 제공하고, 사용자들이 체크리스트를 통해 예방접종을 관리할 수 있도록 돕습니다.

5. 기대 효과

• 사용자들은 간편하게 자녀의 예방접종 정보를 확인하고, 접종 일정을 관리할 수 있습니다.
• API를 통해 실시간으로 업데이트된 병원 정보를 확인하고, 지역 내 병원을 쉽게 검색할 수 있습니다.
• PWA 지원을 통해 모바일에서도 손쉽게 접속하여 사용할 수 있습니다.

 

이 프로젝트는 예방접종 정보 제공과 사용자의 편의성을 극대화하는 데 초점을 맞추고 있으며, 팀원들 각각의 역할에 따라 효율적으로 구현될 예정입니다.