MyFootTrip

✈️ MyFootTrip(마이풋트립)

MyFootTrip 프로젝트는 Android 앱으로 제공되는 여행 기록 및 커뮤니티 어플리케이션 입니다. 기획 의도는 여행 후기를 공유할 수 있는 플랫폼의 제공과 로직 및 디자인 모두 디테일 한 부분까지 고려하여 완성도 높은 앱의 개발입니다. 아이디어를 착안하게 된 서비스는 구글의 타임라인과 여행 계획 어플인 트리플입니다. 우리의 어플은 이러한 서비스들이 가지지 못한 위치 자동 기록의 활용성과 빈약한 커뮤니티 기능 및 플랫폼의 활성화를 지향합니다.

여정 기록 화면

여정 게시물 작성 및 조회 화면

📋 Description

주요 기능

전체기능

• 로그인 회원가입

  • 최대한 간단한 회원가입 구현, 이메일을 인증정보로 활용
  • 연령대 선택 - 연령대 아이콘 체크박스를 활용 가시적으로
  • 소셜 로그인 - 네이버와 카카오 로그인 지원, 랜덤 스트링을 활용한 아이디 바릅

• 메인

  • 필터링 기능 - 테마, 지역, 기간, 연령대, 최신순, 좋아요순을 고려하여 서버단에서 원하는 정보를 내려줌
  • 인피니트 스크롤 - 페이징 라이브러리를 활용 25개씩 끊어서 게시물 정보를 요청하고 그 이후 스크롤 할 경우 로딩 컴포넌트와 함께 추가적으로 api로 요청하는 구조
  • 탑 버튼 - 스크롤 화면에서 가장 최상단으로 올려줌
  • 바텀내비게이션 - 주요기능으로 바로 가는 기능
  • 우측상단의 + 버튼 - 현재까지 작성된 여정 데이터를 기반으로 게시물을 작성할 수 있음
  • 뒤로가기 - 뒤로가기 두 번 연속 누를 경우 앱 종료를 할 수 있도록 설정

• 마이페이지

  • 나의 여정 - 작성한 여정데이터를 확인 삭제 할 수 있음
  • 프로필 - 아이디를 클릭하여 현재 유저정보를 확인하고 프로필 이미지 등을 수정할 수 있음
  • 작성한 게시물 - 내가 작성한 게시물을 확인하고 게시물 상세로 바로 갈 수 있음
  • 좋아하는 게시물 - 내가 좋아했던 게시물을 확인하고 좋아한 게시물 상세로 바로 갈 수 있음
  • 알림 아이콘 - FCM 과 따로 모델링을 활용하여서 자기 자신의 게시물을 좋아요 한 경우를 제외하고 알림 정보를 시간 순서에 따라 받아볼 수 있음

• 커뮤니티

  • 상세 - 게시물의 정보를 확인 할 수 있을 뿐만 아니라 여정 정보의 터치를 통해 여정 안에 있는 이미지와 상세 정보등을 확인 할 수 있음
  • 좋아요 - 좋아요 버튼 애니메이션과 좋아요 버튼을 통해 알림을 보낼 수 있음
  • 댓글 - 알림기능과 바텀 뷰를 통해서 따로 댓글을 확인하고 작성할 수 있는 페이지를 구현함으로서 가시적으로 편히 볼 수 있는 구조로 작성

• 여정

  • 발자국 버튼을 통해서 여정관련 뷰로 이동할 수 있다.
  • ? 버튼을 통해 가이드를 제공하고 앱의 기능적인 부분에 대한 설명을 제공
  • 기존의 여정을 선택하여 기존의 여정을 확장할 수 도 있고
  • 여행 새로만들기를 통해서 여정 데이터를 새로 생성할 수도 있다.
  • 여정 - 위치 정보를 주기적으로 기록하고 네이버지도 api 를 통해서 현재 위치 등을 확인 할 수 있다.
  • 현재위치 추가 - 자동으로 기록되는 데이터 말고 사용자 임의로 여정 데이터를 추가 할 수있음
  • 저장 - 최종적으로 좌표 데이터에 메모나 이미지 등을 추가할 수 있고 필요없는 좌표 데이터는 빼는 등 유저 마음대로 커스텀 할 수 있음
  • 백그라운드 실행- 여정 기록 버튼을 누르면 위치 정보 기록을 백그라운드에서 실행하게 만들고 주기를 길게 설정하여 사용자에게 편의성을 그리고 하드웨어의 부담을 줄였음.

🎨 Design

기술 스택

시스템 구조

ERD 다이어그램

API 설계

API_URL : https://www.notion.so/ce21476e52b340f7ade635a85b5504fd?v=efa0df6f03c349ffb6b669fa1000f4a2

📱 Anroid(FrontEnd)

아키텍처 구조

사용한 라이브러리

Name	Description
Navigation	프래그먼트 전환 라이브러리
Glide	이미지 로딩 라이브러리
Picasso	이미지 뷰 라이브러리
ViewModel	안드로이드 수명주기에 맞게 데이터를 저장, 관리 라이브러리
Coroutine	비동기 처리 라이브러리
Coroutine Flow	비동기 데이터 스트림
TedPermission	안드로이드 권한 라이브러리
Retrofit	HTTP 통신 라이브러리
SwipeRefreshLayout	새로고침 뷰 라이브러리
WhyNotImageCarousel	이미지 슬라이더 라이브러리
Naver	네이버 소셜 로그인
KaKao	카카오 소셜 로그인
Lottie	안드로이드 애니메이션 라이브러리
NaverMap	네이버 지도라이브러리
FCM	파이어베이스 푸시 알림
FireStorage	파이어스토리지
Paging 3	안드로이드 페이징 라이브러리
Room	안드로이드 DB 라이브러리
Google gms play service location	구글 현재 위치 라이브러리

Directory 구조

📁Android
├──📁api
├──📁datasource
├──📁db
├──📁model
├──📁repository
├──📁service
├──📁ui
│ ├──📁adapter
│ ├──📁base
│ ├──📁view
│ │ ├──📁board
│ │ ├──📁dialogs
│ │ ├──📁login
│ │ ├──📁main
│ │ ├──📁mypage
│ │ ├──📁splash
│ │ ├──📁start
│ │ ├──📁travel
├──📁util
├──📁viewmodel
├──📄Application.kt

💻 Server(BackEnd)

백엔드 Directory 구조

📁pjtback
├──📁accounts
│ ├── migrations
│ ├── adapter.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── serializers.py
│ ├── urls.py
│ └── views.py
├──📁community
│ ├── migrations
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── serializers.py
│ ├── urls.py
│ └── views.py
├──📁config
│ ├──📁nginx
│ │ └── nginx.conf
│ ├──📁settings
│ │ ├── requirements.txt
│ │ └── serviceAccountKey.json
├──📁media
├──📁pjtback
│ ├── migrations
│ ├── asgi.py
│ ├── settings.py
│ ├── models.py
│ ├── urls.py
│ └── views.py
├── docker-compose.yml
├── Dockerfile
├── manage.py
├── requirements.txt
└── serviceAccountKey.json

백엔드 라이브러리

JWT와 인증 플로우


👪 MyFootTrip Team

📒 License

This software is licensed under the MIT ©SSAFY.