Skip to content

Latest commit

 

History

History
141 lines (96 loc) · 7.51 KB

README.md

File metadata and controls

141 lines (96 loc) · 7.51 KB
Raw

MAAP:

maap

프로젝트 만든 계기

즐거운 경험을 한 장소를 지도에 기록하여 공유하면 어떨까? 하는 생각에서 이 프로젝트를 시작하게 되었습니다.

프로젝트 소개

  • 'MAAP'은 사용자들이 지도에 마커를 남기고 그 위치에 대한 이야기를 기록하는 애플리케이션입니다.

  • 회원가입을 하지 않은 사용자도 지도를 조회할 수 있으며, 회원가입을 한 사용자는 지도에 마커를 생성할 수 있습니다.

  • 애플리케이션을 실행하면 처음 화면은 사용자의 현재 위치를 중심으로 보여지며, 하단의 버튼을 통해 언제든지 현재 위치를 기준으로 지도를 불러올 수 있습니다.

  • 마커를 생성할 때 카테고리, 제목, 내용, 사진을 추가할 수 있으며, 각 카테고리에 따라 마커의 색상이 변경되어 손쉽게 구분할 수 있습니다.

  • 마커에 추가된 사진은 클릭하면 확대하여 볼 수 있습니다.


1. 개요

  • 프로젝트 이름: MAAP 🗺️
  • 프로젝트 기간: 2023.11-2023.12
  • 개발 언어: Dart
  • 개발자: 김승원

2. 개발 환경

  • Front-end : Flutter, riverpod, json_annotation, retrofit, geolocator, go_router
  • Back-end : firebase

3. 페이지별 기능


[SPLASH 화면 & 회원가입]

  • 앱을 시작하면 Splash Screen이 몇 초동안 보입니다. 로그인이 이미 완료된 경우, 메인 화면으로 바로 이동하며, 로그인이 되어 있지 않을 경우 로그인 화면이 표시됩니다.
  • 이메일 입력 시, 자동으로 gmail, naver, daum 등의 이메일 형식이 제안되어 사용자가 편리하게 이메일을 설정할 수 있습니다.
  • 각 항목에 대해 유효성 검사가 이루어지며, 닉네임은 1-9자 이내, 이메일은 해당 형식에 맞게, 비밀번호는 특수문자, 숫자, 문자를 포함한 8-15자 이내로 설정해야 합니다. 비밀번호 확인 과정에서 입력한 비밀번호와 일치하지 않을 경우, 경고 메시지가 표시됩니다.
  • 필요한 정보를 입력하지 않으면, 해당 정보를 입력하라는 메시지가 표시됩니다. 올바른 형식으로 정보를 입력하면 메시지는 바로 사라집니다.
Splash Screen & 회원가입
splash sign
시작화면 회원가입

[로그인,소셜로그인 - Naver]

  • 로그인은 Firestore에 등록된 회원만 가능하며, 이메일과 비밀번호를 이용하여 진행됩니다.
  • 로그인 과정에서도 회원가입처럼 유효성 검사가 이루어지며, 이메일 입력 시 이메일 형식이 자동으로 제안되어 사용자가 편리하게 정보를 입력할 수 있습니다.
  • NAVER 사용자들은 자신의 NAVER 계정을 이용하여 소셜 로그인을 진행할 수 있습니다. 또한 Firebase와 연동하여 앱에서 생성한 정보들을 안전하게 저장할 수 있습니다.
로그인 & 소셜로그인 - Naver
login socialLogin - naver
로그인 로그인

[비회원 & 현재 위치 이동]

  • 비회원 사용자는 앱의 마커 기능을 이용할 수 없습니다.
  • 사용자는 앱에서 기본적으로 제공되는 네이버 지도를 활용할 수 있습니다.
  • 메인 화면은 사용자의 현재 위치를 기준으로 시작하며, 지도를 이동한 후에는 왼쪽 하단의 버튼을 클릭하면 언제든지 현재 위치로 다시 돌아올 수 있습니다.
비회원 & 현재 위치 이동
Non-member Move to Current Location
비회원 현재화면

[글쓰기 - 마커 남기기 , 카테고리 - 마커 색상]

  • 회원은 지도 위에 마커를 남길 수 있습니다. '작성하기' 버튼을 누르면, 지도 위에서 원하는 위치를 클릭하여 마커를 생성할 수 있습니다. 마커의 위치는 필요에 따라 지도를 클릭하여 변경할 수 있습니다.
  • 카테고리를 사용하여 마커를 분류할 수 있으며, 마커에는 제목, 내용, 사진을 함께 첨부할 수 있습니다.
  • 각 카테고리는 서로 다른 배경색을 가지며, 사용자가 특정 카테고리를 선택하면, 그 카테고리의 배경색과 동일한 색으로 마커가 표시됩니다.
글쓰기 - 마커 남기기 & 카테고리 - 마커 색상
Writing - Leaving a Marker Category - Marker Color
글쓰기 마커 카테로그 색변화

[마커 누르기, 글 화면]

  • 글 작성을 완료하면, 지도에 해당 위치에 마커가 생성되며, 메인 화면에는 새로 작성한 글 목록이 추가됩니다.
  • 메인 화면에 있는 글은 무한 스크롤로 편리하게 조회할 수 있습니다.
  • 생성된 마커나 글 목록을 클릭하면, 해당 글의 내용을 확인할 수 있습니다.
  • 글에 첨부된 사진을 클릭하면, 확대된 상태로 사진을 볼 수 있으며, 여러 장의 사진이 첨부되어 있는 경우에는 좌우로 스와이프하여 각 사진을 확인할 수 있습니다.
마커 누르기 & 글 화면
Clicking Marker Post Screen
마커 누르기 사진 크게보기

|

[글 수정 , 글 삭제]

  • 글 수정하기과 삭제는 버튼을 통해 글을 수정,삭제 할 수 있습니다. 수정하기 버튼을 누르면 글의 제목, 내용, 첨부된 사진 등을 수정할 수 있습니다.
  • 글을 삭제하면, 해당 글은 메인 화면에서 사라지며, 관련된 마커도 지도에서 제거됩니다.
글 수정 & 글 삭제
Post Edit Post Delete
수정 삭제

[로그아웃]

  • 로그아웃 버튼을 클릭하면 즉시 사용자의 로그인 상태를 해제하고, 비회원 상태로 전환됩니다.
로그아웃
Logout
로그아웃