창의적인 산책로와 반려동물 필수 장소 정보를 한눈에 제공하는 맞춤형 서비스, 몽글로드 입니다.
동물병원, 애견카페, 애견호텔, 커스텀 산책로 등 다양한 정보를 얻을 수 있습니다.
폴더구조
📦moggleRoad-Project
┣ 📂public
┃ ┗ 📜vite.svg
┣ 📂src
┃ ┣ 📂api
┃ ┃ ┣ 📜auth.js
┃ ┃ ┣ 📜fetchCoordinatesByRegion.js
┃ ┃ ┣ 📜makeRoute.js
┃ ┃ ┗ 📜pathDataSave.js
┃ ┣ 📂assets
┃ ┃ ┣ 📜home.png
┃ ┃ ┣ 📜loadingImage.png
┃ ┃ ┣ 📜logo.png
┃ ┃ ┣ 📜react.svg
┃ ┃ ┣ 📜searchHome.png
┃ ┃ ┗ 📜target-icon.png
┃ ┣ 📂axiosInstance
┃ ┃ ┗ 📜join.js
┃ ┣ 📂components
┃ ┃ ┣ 📜AuthForm.jsx
┃ ┃ ┣ 📜CategorySearch.jsx
┃ ┃ ┣ 📜MainPageMap.jsx
┃ ┃ ┣ 📜MainPageSide.jsx
┃ ┃ ┣ 📜Modal.jsx
┃ ┃ ┣ 📜Nav.jsx
┃ ┃ ┣ 📜NavBottom.jsx
┃ ┃ ┣ 📜ProtectedRoute.jsx
┃ ┃ ┣ 📜RegionSearchInput.jsx
┃ ┃ ┣ 📜SaveUserRouteInfo.jsx
┃ ┃ ┣ 📜SearchContent.jsx
┃ ┃ ┣ 📜SearchList.jsx
┃ ┃ ┣ 📜SearchPagination.jsx
┃ ┃ ┗ 📜WalkPath.jsx
┃ ┣ 📂hooks
┃ ┃ ┗ 📜useCurrentLocation.js
┃ ┣ 📂pages
┃ ┃ ┣ 📜CanvasComponent.jsx
┃ ┃ ┣ 📜Home.jsx
┃ ┃ ┣ 📜Login.jsx
┃ ┃ ┣ 📜MainPage.jsx
┃ ┃ ┣ 📜Search.jsx
┃ ┃ ┣ 📜SignUp.jsx
┃ ┃ ┗ 📜WalkPathPage.jsx
┃ ┣ 📂shared
┃ ┃ ┗ 📜Router.jsx
┃ ┣ 📂zustand
┃ ┃ ┣ 📜authStore.js
┃ ┃ ┣ 📜geoLocationStore.js
┃ ┃ ┣ 📜routeDataStore.js
┃ ┃ ┗ 📜userRouteStore.js
┃ ┣ 📜App.jsx
┃ ┣ 📜index.css
┃ ┗ 📜main.jsx
┣ 📜.env
┣ 📜.gitignore
┣ 📜.prettierrc
┣ 📜db.json
┣ 📜eslint.config.js
┣ 📜index.html
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┣ 📜README.md
┣ 📜tailwind.config.js
┣ 📜vite.config.js
┗ 📜yarn.lock
Zustand과Axios를 활용해 회원가입과 로그인 기능을 구현하였다.
마이페이지에서 내가 생성한 몽글로드를 한 눈에 볼 수 있고, 클릭하면 해당 이미지를 다운로드할 수 있다.
NAV 바를 이용해서 지정된 위치의 애견카페, 동물병원, 애견호텔을 검색할 수 있다.
지역 검색을 통해 원하는 지역의 애견카페, 동물병원, 애견호텔을 검색할 수 있다.
페이지네이션을 통해 검색결과가 랜더링 되도록 처리했다
DB에 저장된 모든 몽글로드를 검색할 수 있다.
카카오 선 그리기 API,Drawing Manager를 사용해 몽글로드를 그릴 수 있다.
그리는 도중 언제든지 새로운 점을 이용해 도형을 자유롭게 그릴 수 있다. 맵에 보여질 몽글로드의 색상을 선택할 수 있다.
Zustand을 이용해 데이터를 전역적으로 관리하여 저장할 수 있도록 구현.
몽글로드를 그리는 도중,
다시 그리기혹은ESC 키를 이용해 선을 처음부터 다시 그릴 수 있다.
데이터가 undefined로 저장되는 상황
콘솔로 확인했을 때 position 데이터는 잘 담기는 반면 폼 작성 후 제출하면 db.json에 다른 데이터는 저장이 되지 않았다.
SaveUserRouteInfo 컴포넌트에서 json-server에 저장할 때, routeFormData 는 잘 전달되지 않아 거리만 저장하는 상황으로 파악했다.
routeData가 null 또는 undefined인 경우를 처리하는 로직을 추가하여 컴포넌트가 안전하게 랜더링 될 수 있도록 수정했다.Zustand상태 불러오기 방식 수정: Zustand의 상태를 가져올 때, 기존처럼 개별적으로 가져오는 대신 하나의 객체로 가져오도록 수정했다.
카카오 지도 API를 활용하는 과정이 재밌었다. 비록 세부적인 부분을 하나하나 완전히 이해하지는 못했지만,
점차 익숙해지면서 다양한 곳에서 활용 할 수 있어서 더 재미를 느꼈던 것 같다.
특히, 필요에 따라 API의 특정 부분을 수정하고 적용하면서 어떤 방식이 최적인지
깊이 고민할 수 있었던 점이 어려우면서도 배울 점이 많았던 것 같다.
원하던 기능이 API상에서 막혀있는 경우 어떻게 하면 우회해서 기능을 구현할지에 대한 고민을 많이 해 볼 수 있었다.
API나 json-server 같은 데이터를 읽는것에 어려움을 많이 느끼고 있었는데
이번기회를 통해서 console로 확인해보는 습관을 가질 수 있었던 것 같다
생각보다 API 문서가 엄청 친절하고, 다양한 기능이 있어서 좋았다.
다음에는 다른 API를 써서 프로젝트를 진행해보고싶다.
지도 API를 처음 사용해봐서 다양한 경험을 할 수 있었고 좀 더 많은걸 하고 싶었지만 시간이 부족해서 아쉬웠다.
지도 API 적용을 어렵게 생각했는데 API 문서와 함께 차근차근 하면 되는구나~ 를 느껴서 좋았다.