yeojuyeong/AnsimReact

JavaScript

🥩Ansim동행 프로젝트

안심시설물들의 위치를 확인 후 안심 길찾기 및 안심동행을 신청하세요!

📅 개발기간 : 2023.12.07 ~ 2024.01.05

🎈 배포주소:

🖥️시연 영상

✨ Notion

👀 Spring Github

🥩About Ansim동행

Ansim동행지도는 근처에 있는 안심 시설물들을 찾을 수 있는 서비스입니다.

Ansim동행 특징

cctv, 비상벨, 안심택배함, 경찰서, 편의점과 같은 안심시설물들의 위치 및 정보 확인
최대 5개의 안심 옵션을 선택하여 최적의 길찾기 제공
커뮤니티를 통한 안심동행 찾기

안심길찾기 화면

출발지와 목적지를 입력 후, 최대 5개의 경유지 안심 옵션을 선택가능하여 최적의 길찾기를 제공합니다. 출발지와 목적지 내의 boundary를 계산하여 해당 영역 내 안심객체를 띄우고 선택 가능합니다.

안심시설물 화면

현재 Map의 영역 내의 CCTV, 가로등 비상벨, 안심택배함, 경찰서, 편의점의 위치가 Marker로 표시되고 가까운 순으로 Card형식 List를 보여줍니다. Card Click 시 해당 Marker의 위치로 이동 후 InfoWindow로 정보 확인이 가능합니다. Card 고장신고 Click 시 각 옵션의 위치와 유형 데이터가 포함된 고장신고 작성 Form 생성되며 고장유형과 상세내용 기입 후 제출할 수 있습니다.

안심동행 커뮤니티 게시글 목록 화면

동행 포인트에 따른 뱃지와 모집인원수가 게시글List에 표시됩니다. Card방식 게시판으로 직관적인 UI가 구현되어있으며 페이지네이션 및 제목 검색기능이 구현되어있습니다.

안심동행 커뮤니티 게시글 작성 화면

글 작성페이지에서 출발지 목적지를 입력 시 게시글에 해당 루트가 표시됩니다.

안심동행 커뮤니티 게시글 상세보기 화면

동행 신청버튼을 누르면 작성자에 신청자List가 표시되며, 수락할 경우 작성자와 신청자에게 동행포인트가 +1 부여됩니다.

안심동행 시설물 고장신고현황 화면

7일간의 각 옵션 별 고장신고 갯수의 현황을 관리자 권한을 가진 User가 볼 수 있게 구현되어있습니다.

안심동행 로그인 화면

일반 로그인 및 구글, 네이버, 카카오 소셜로그인이 가능합니다.

안심동행 마이페이지 화면

안심동행 포인트를 확인할 수 있으며, 프로필사진과 mbti 등 정보를 업로드 및 변경할 수 있습니다.

👨‍👩‍👧‍👦 Team Members

_{팀장 : 김수지}

_{팀원 : 여주영}

_{팀원 : 이영진}

_{팀원 : 최종현}

👩‍💻 Tech Stack

📝 Documents

화면정의서

기능정의서

ERD문서