📆 진행 기간 2024.08.19 ~ 2024.10.11 (7주)
배경 반려견을 키우는 인구가 1천만이 되며, 반려견들의 산책도 자주 볼 수 있습니다. 하지만, 안전한 산책로 정보의 부족과 예기치 않은 위험 요소로 인해 견주와 반려견들의 안정적인 산책을 방해받을 수 있습니다. 따라서, 반려견 주인들 사이의 교류와 소통이 중요해짐에 따라 서로의 산책 경험을 공유하고 함께 즐길 수 있는 어플을 만들게 되었습니다.
- 실시간 마커 생성 및 블루, 레드존 생성
- 사용자가 마커를 생성하여 지도 상에 실시간으로 정보를 표시
- 마커 색상은 블루, 레드이며 블루는 강아지 자랑이나 일반적인 정보등을 표시하며, 레드는 위험 요소 관련 정보를 나타냄
- 블루, 레드존 토글 키로 블루 마커가 많이 찍힌 지역 및 레드 마커가 많이 찍힌 지역을 히트맵으로 확인할 수 있음
- 사용자 산책 경로 기록 및 표시
- 사용자가 산책을 시작 시 폴리 라인을 통해 사용자가 이동한 경로를 실시간으로 표시
- 사용자가 산책 종료 시 걸린 시간, 산책한 날짜, 이동 거리와 함께 사용자의 이동 경로가 폴리 라인으로 표시되어 기록됨
- 로깅을 이용한 이벤트 및 사용자 활동 추적
- 각 로그 레벨별, 레이어별, 사용자별, 액션별로 데이터를 시각화하여 분석할 수 있음. 이를 통해 시스템이 어떤 상황에서 주로 로그가 발생하는지, 사용자들이 언제, 어떻게 시스템을 사용하고 있는지를 분석할 수 있음.
- 트랜잭션ID와 같은 식별자를 로그에 기록함으로써, 여러 서비스가 관여된 복잡한 트랜잭션을 쉽게 추적할 수 있음. 트랜잭션 단위로 어떤 서비스에서 어떤 처리가 이루어졌는지 로그를 통해 추적할 수 있어 문제가 발생한 시점과 위치를 빠르게 파악할 수 있음.
- 카프카와 히트맵을 이용한 실시간 히트맵 변경
- 사용자가 마커 생성 시, 백엔드로 보낸 좌표 데이터를 통해 마커 생성 좌표에 가중치를 추가하고, 추가한 가중치를 히트맵에 반영하여 실시간으로 히트맵이 갱신되도록 설계함. 이를 통해 사용자는 실시간으로 이용자들이 많은 지역 및 위험 지역을 직관적으로 파악할 수 있음.
| 시작 페이지 | 홈 화면 | 내정보 | 리포트 리스트 |
|---|---|---|---|
 |
 |
 |
 |
| 산책 시작 | 산책 중 | 산책 종료 | 리포트 상세 |
 |
 |
 |
 |
| 지도 첫 화면 | 마커 정보 | 반려견 등록 | 반려견 상세 |
 |
 |
 |
 |
| 일정관리 | 형상관리 | 커뮤니케이션 | 디자인 |
|---|---|---|---|
 |
 |
 |
 |
Mungple-Front
📦src
┣ 📂api : 서버와의 통신을 위한 API 호출 관련 로직을 관리하는 디렉토리
┣ 📂assets : 정적 자원을 저장하는 디렉토리
┣ 📂components : 재사용 가능한 UI 컴포넌트를 관리하는 디렉토리
┃ ┣ 📂common
┃ ┣ 📂map
┃ ┣ 📂marker
┃ ┣ 📂record
┃ ┣ 📂setting
┃ ┣ 📂user
┃ ┗ 📂walking
┣ 📂constants : 프로젝트에서 사용되는 상수 값을 정의하는 디렉토리
┣ 📂hooks : 커스텀 훅을 저장하는 디렉토리
┃ ┣ 📂queries : 데이터 fetching과 관련된 쿼리 훅을 관리
┣ 📂navigations : 화면 간의 네비게이션 로직을 관리하는 디렉토리
┃ ┣ 📂root
┃ ┣ 📂stack
┃ ┗ 📂tab
┣ 📂screens : 각각의 화면(UI)을 정의하는 디렉토리
┃ ┣ 📂auth
┃ ┣ 📂home
┃ ┣ 📂map
┃ ┣ 📂record
┃ ┣ 📂user
┃ ┗ 📂walking
┣ 📂state : 전역 상태 관리 로직을 정의하는 디렉토리
┣ 📂types : 타입 정의 파일을 저장하는 디렉토리
┗ 📂utils : 유틸리티 함수들을 관리하는 디렉토리
- GOOGLEMAP API: 지도 서비스와 관련된 다양한 기능을 활용하기 위해 GOOGLEMAP API를 사용합니다.
|
|
|
| 윤대영 | 임경태 | 박지원 |
| Frontend | Frontend | Frontend |
|
▪ 팀장 담당 ▪ 프로젝트 일정 관리 및 발표 ▪ 전반적인 UI 개선 및 디자인 ▪ 웹 소켓 연결 로직 및 관련 데이터/함수 ▪ 산책 기록 관련 기능 |
▪ 화면 구조 설계 및 네비게이터 구현 ▪ OAuth 및 회원 관련 기능 ▪ 산책 기능 및 위치 전송 웹 소켓 ▪ React-query 사용 및 화면 렌더 성능 향상 ▪ 앱 테마 디자인 및 퍼블리싱 |
▪ geolocation 및 googlemap api를 활용한 지도 구현 ▪ 마커 생성, 상세 정보 조회 및 마커 클러스터링 기능, 커스텀 마커 구현 ▪ geohash로 들어오는 데이터를 geolocation을 통해 5초 간격으로 갱신하는 로직 구현 ▪ 블루존, 레드존, 멍플 기능 구현 ▪ 로딩 스피너, 스플래시 스크린 구현 |