Frontend

펫데이지Pet Daisy

작업기간작성중
기여도50%
TEST IDtest@test.com
TEST PW123123123
펫데이지는 소중한 반려동물의 건강 여정을 함께하는 똑똑한 건강 관리 플랫폼입니다. 체중 변화부터 병원 진료 기록, 예방접종 일정까지 한눈에 확인할 수 있어 더욱 건강한 반려생활을 도와드립니다. 또한 일상의 특별한 순간들을 사진과 함께 기록할 수 있어, 반려동물과의 소중한 추억을 오래도록 간직할 수 있습니다.

FEATURE

  1. 몸무게 기록

    ▸ 반려동물의 체중 변화를 시각적인 그래프로 한눈에 파악할 수 있습니다. ▸ 시간대별 체중 추이를 분석하여 건강 상태를 모니터링할 수 있으며, 급격한 체중 변화도 쉽게 확인할 수 있습니다. ▸ 체중 기록을 날짜별로 관리하여 장기적인 건강 관리가 가능합니다.

  2. 진료 기록

    ▸ 병원 방문 기록과 진단 내용, 처방 내역을 체계적으로 기록하고 관리할 수 있습니다. ▸ 진료비, 병원명, 진단명 등 상세한 정보를 저장할 수 있어 추후 병원 방문 시 참고하기 용이합니다. ▸ 특히 만성 질환이나 정기 검진의 경우, 이전 진료 내역을 토대로 건강 상태의 변화를 추적할 수 있습니다.

  3. 예방 접종 기록

    ▸ 반려동물의 예방접종 이력을 종류별로 구분하여 체계적으로 관리할 수 있습니다. ▸ 종합백신, 광견병, 코로나 등 각종 예방접종의 접종 날짜와 병원 정보를 기록할 수 있으며, 다음 접종 예정일도 함께 관리할 수 있습니다. ▸ 특히 반려동물의 연령대에 따른 필수 예방접종을 누락 없이 관리할 수 있습니다.

  4. 관찰 기록

    ▸ 반려동물의 일상적인 건강 상태와 특이사항을 사진과 함께 상세히 기록할 수 있습니다. ▸ 식사량, 배변 상태, 활동량 등 일상적인 건강 지표부터 특이 행동이나 증상까지 모든 관찰 사항을 날짜별로 기록할 수 있습니다. ▸ 사진 첨부 기능을 통해 피부 상태나 상처 등의 시각적인 변화도 효과적으로 기록하고 관리할 수 있습니다.

TECH STACK

  • # Next.js
  • # TypeScript
  • # Supabase
  • # TanStack Query
  • # Zustand
  • # Tailwind CSS
  • # React Hook Form
  • # browser-image-compression
  • # react-paginate

TROUBLE SHOOTING

  • 01. 이미지 업로드 상태 관리 개선

    문제점

    이미지 업로드 중에도 폼 제출이 가능한 문제와 사용자가 업로드 진행 상태를 알기 어려웠으며, 중복 제출 가능성이 존재했습니다.

    해결

    blob URL과 실제 업로드된 URL 개수 비교로 진행 상태를 확인하고, 이미지 업로드 중에는 버튼을 비활성화하며, 업로드 중 상태를 버튼 텍스트로 표시하여 해결했습니다.

  • 02. 반려동물 삭제 후 상태 관리

    문제점

    반려동물 삭제 후 프로필 데이터가 남아있어 오류가 발생하고, 사용자에게 적절한 UI가 표시되지 않는 문제가 있었습니다.

    해결

    TanStack Query의 쿼리 캐시 리셋과 Zustand의 상태 초기화를 통해 삭제 후의 상태를 깔끔하게 정리하고, 적절한 UI를 보여주도록 개선했습니다.

  • 03. 이미지 업로드 동기화 문제 해결

    문제점

    이미지 업로드가 완료되기 전에 등록하기 버튼을 클릭할 경우, 이미지 URL이 빈 값으로 저장되는 문제가 발생했습니다. 이는 이미지 업로드의 비동기 처리와 폼 제출 타이밍이 맞지 않아 발생하는 이슈였습니다.

    해결

    이미지 업로드 상태를 추적하기 위해 blob URL과 실제 업로드된 URL의 개수를 비교하는 로직을 구현했습니다. 이미지 업로드가 진행 중일 때는 등록하기 버튼을 비활성화하고, 버튼 텍스트를 '이미지 업로드 중'으로 변경하여 사용자에게 현재 상태를 명확히 알려주도록 개선했습니다. 모든 이미지 업로드가 완료된 후에만 폼 제출이 가능하도록 하여 데이터 일관성을 보장했습니다.