프로젝트 소개
몽글로드 
(바로가기)
•
한 줄 설명 : 창의적인 산책로와 반려동물 필수 장소 정보를 한눈에 제공하는 맞춤형 서비스
•
상세설명 : 반려동물과 함께 산책할 수 있는 코스를 사용자가 직접 그릴 수 있는 서비스입니다. 산책로의 예상 시간과 총 거리가 자동으로 계산되며, 강아지 얼굴이나 뼈다귀 모양 등 다양한 창의적인 코스를 만들 수 있습니다. 또한, 동물병원과 반려동물 동반 카페 같은 유용한 반려동물 장소 정보도 제공합니다.
•
개발인원 : 프론트엔드 개발자 4명
•
개발 기간 : 2024년 09월 12일 → 2024년 09월 23일
담당 역할
1) 담당 페이지 및 기능
1.
산책로 그리기 페이지
a.
카카오 선 그리기 API, Drawing Manager를 사용해 몽글로드 (산책로 그리기)
b.
그리는 도중 언제든지 새로운 점을 이용해 도형을 자유롭게 수정 가능
c.
다시그리기 클릭 시 산책로 초기화 (ESC 키 눌러도 초기화 가능)
d.
Zustand 산책로 데이터 상태관리
2.
회원가입 / 로그인 페이지
a.
몽글로드 만들기(산책로 그리기) 클릭 시 로그인 페이지로 이동
b.
axios 로 회원가입 api 호출, Zustand 로 사용자 로그인 상태관리
c.
로그아웃 시 main 첫 화면으로 redirect
(* 부트캠프에서 제공한 moneyfulpublicpolicy api 를 활용하여 구현)
아키텍처
트러블슈팅
1.
setRouteData를 useEffect 내부에서 호출하여 거리, 루트가 변경될 때만 호출하여 무한루프를 방지하고, Zustand 로 상태 데이터를 넘겨줄 때 형태를 일치시키지 않고 넘기는 과정에서 발생한 트러블슈팅을 정리하였습니다. (무한루프, undefined 오류)
성과
•
세밀한 도형 제작이 가능한 Drawing 라이브러리를 활용해 사용자가 원하는 모양의 산책로를 자유롭게 그릴 수 있게 됨
•
유저 테스트 결과, 사용자들은 산책로를 더 디테일하게 그리고 원하는 형태로 조정할 수 있다는 점에 긍정적인 반응을 보임
•
사용자에게 직관적이고 자유로운 인터페이스를 제공함으로써, 산책로 코스를 설계하는 재미와 만족도를 모두 충족시킴