Skip to content

Latest commit

 

History

History
106 lines (88 loc) · 6.08 KB

README.md

File metadata and controls

106 lines (88 loc) · 6.08 KB

Trace 🐾

2024.01.04 ~ 2024.01.10
for 2023 Winter Madcamp Week02 Project

Android Spring MySQL

image

🛠️ 개발 환경

FE

  • OS : Android
  • IDE : Android Studio
  • Language : Kotlin

BE

  • Spring Boot
  • MySQL

서비스 소개

user scenario

1️⃣ Sign up, Login

Screen_Recording_20240110_191512_Trace

주요 기능

  • 이메일과 비밀번호, 이름을 통해 자체 회원가입, 로그인
  • 네이버 소셜로 회원가입 및 로그인

기술 설명

  • 서버에 post 방식으로 이메일, 비밀번호, 이름을 전송하여 member table에 저장됩니다.
  • 네이버 sdk를 이용하여 네이버에 저장된 정보를 받아와서 마이페이지에 저장됩니다.
  • 네이버 아이디로 가입할 경우 별도의 로그인 절차 없이 바로 메인페이지로 이동합니다.

2️⃣ Main Page

주요 기능

  • 현재 위치와 사진, 본문을 포스팅합니다.
  • 지도 내에 나와 다른 사람들이 저장한 포스팅들이 마커로 표시되며, 20m 이내의 마커들의 내용을 확인할 수 있습니다.
  • 제자리 버튼을 누르면 현재 위치로 돌아옵니다.

기술 설명

  • 구글맵 API를 이용하여 사용자의 현 위치를 불러옵니다.
  • 글 작성시에 현재 위치와 주소, 작성자, 본문, 사진 값을 DB로 전송합니다.
  • 사용자가 보고 있는 화면 내에 위치하는 포스팅들을 불러와 마커로 표시합니다.
    • 사용자가 보고 있는 화면이 업데이트되면, 사용자가 보고 있는 좌표를 DB에 요청합니다.
    • DB 내에서 컨트롤러를 활용하여 해당 좌표 범위 내의 모든 포스팅들을 불러와 클라이언트에게 전송합니다.
    • 클라이언트에서 사용자의 좌표와 포스팅이 작성된 위치를 계산합니다.
      • 작성된 위치가 20m 보다 멀리 떨어진 지점이라면, 터치시에 거리 정보만를 표출하는 마커를 생성합니다.
      • 작성된 위치가 20m 이내라면 터치시에 작성자, 본문, 사진을 불러와 표시합니다.
  • 다른 탭으로 넘어가면 (화면에 지도가 표출되지 않으면) 리소스 소모를 막기 위해 지도 업데이트를 중지하고, 다시 지도로 돌아오면 좌표를 업데이트합니다.

3️⃣ My Page

마이페이지_1 마이페이지_2

주요 기능

  • 사용자가 작성한 글들을 최신순으로 볼 수 있습니다.
  • 캘린더를 통해 날짜를 선택함에 따라 그 당일에 작성한 게시물들을 보여줍니다.
  • 사용자는 원하지 않는 게시물을 언제든지 삭제할 수 있습니다.
  • 삭제한 내용은 DB에 전송되어 캘린더에도 반영이 됩니다.

기술 설명

  • Material Design Cardview를 RecyclerView를 기반으로 작성한 게시물들을 보여줍니다.
  • Date Picker에서 날짜를 선택할 경우 날짜를 DB에 요청하여 그 날짜에 해당하는 게시물들을 보여줍니다.

ERD

image

🎨 Design System

Color Scheme

image

🧭 타지를 여행하거나, 매일을 타지에서보다 모험적으로 살아가는 여러분의 진취적인 태도를 담은 주황색을 시그니처 컬러로 지정하였습니다.
🎨 디스플레이 상의 컬러의 자연스러움을 위해 black과 white를 새로 정의하여 사용하였습니다.

Font Family

image

구글에서 지원하는 공식 font들 중 여러분의 유쾌한 성격과 쾌활함을 담은 “Red Hat Mono”를 폰트로 사용하였습니다.

🧑‍🤝‍🧑 팀원

Seohee Yoon Jaeyong Jung
[email protected] [email protected]

Login, Signup

My Page

PM

Main Page: Map