- Frondend : Android Studio, Kotlin
- 프론트 관련 정보는 여기에서 확인해주세요!
- Backend : Django, Python, MySQL, AWS
Breakfirst는 자취생들의 아침을 책임져주는 플랫폼입니다. 자취하면서 집밥보다는 편의점 음식, 배달 음식, 외식으로 끼니를 때우거나 아침은 아예 거르는 경우가 많습니다. 근처의 과일가게들과 반찬가게들에서 유통기한이 얼마 남지 않은 음식들도 맛있는 아침 도시락을 아주 싸게 구매하고, 배송받을 수 있습니다.
남는 음식도 절약하고, 집밥같은 건강한 아침밥도 챙겨먹고, 절약까지 함께해보세요!
앱 시작 시 로그인 화면이 보여집니다. 로그인 시 access token과 refresh token을 발급하며 앱에서는 사용자의 정보를 저장합니다. 앱에 처음 등록하는 사용자의 경우 로그인 후 자신의 위치를 설정하여 주변 가게의 정보들을 받아볼 수 있습니다.
| 앱 시작 화면 | 회원가입 화면 | 로그인 화면 |
|---|
Breakfirst는 Home, 주문내역, 찜한 가게 3개의 Tab으로 이루어져 있습니다.
BottomNavigation을 활용하여 Tab을 구현했고, 아래의 Tab 버튼을 클릭하여 Tab 간 이동이 가능합니다.
- 앱에 등록된 근처 지역별 반찬가게와 과일가게들의 메뉴 목록을 보여주는 탭입니다.
메뉴 목록은 입점 문의를 거쳐 심사가 통과된 가게들이 등록한 메뉴들을 데이터베이스에서 불러와 반영합니다. 가게들은 자신의 메뉴를 앱에서 직접 등록 신청할 수 있으며 등록이 허가되면 데이터베이스로 들어오고 바로 앱 내의 홈 탭에서 보이게 됩니다.
아이템 목록은 GridView를 활용하여 구현했으며, 목록의 메뉴들은 Database에 저장된 가게 이름, 메뉴 이름, 가격, 상세 정보를 메인화면에서는 태그로, 상세 페이지에서는 정보로 변경하여 반영합니다. 검색창에서는 메뉴 이름으로 검색이 가능하도록 했습니다. 검색창 아래의 Spinner를 이용하여 가격 순으로 메뉴 목록을 볼 수 있습니다.
메뉴를 클릭하게 되면 상세 페이지로 이동하게 됩니다. 상세 페이지에서는 데이터베이스에서 불러온 그 가게의 별점의 평균을 볼 수 있으며, 메뉴 사진, 태그에 있는 정보의 그램 수까지 확인할 수 있으며, 장바구니에 담기 버튼을 클릭하면 장바구니에 해당 상품이 담기게 됩니다. 역시 데이터베이스에 바로 반영되어 저장됩니다.
- 장바구니는 메뉴의 상세 페이지에서 장바구니에 담은 메뉴들을 스크롤해서 볼 수 있으며, 결제 페이지에서는 데이터베이스에 쌓인 가격들을 합쳐 백엔드에서 프론트로 total price를 보내주어 버튼에 바인딩하였습니다.
- access token을 이용하여 해당 사용자마다 데이터베이스에서 장바구니의 상품들을 각자 다르게 불러오기가 가능합니다.
- 각 메뉴마다 고유의 id를 매겨 삭제 버튼을 클릭 시 백엔드 쪽 서버 데이터베이스에서도 삭제되고, 이게 다시 프론트에 반영될 수 있도록 구현하였습니다.
- 주문자 정보는 access token을 사용하여 얻어온 정보를 화면에 바인딩 하였습니다.
- 결제 수단 카카오페이를 선택하면 결제 창으로 넘어가게 됩니다.
- 카카오페이 sdk 사용
- 백엔드는 프론트에서 받아온 장바구니 정보들을 데이터베이스로 받아와 코드로 반영하는 로직을 구현하였습니다.
- 카카오페이 sdk를 이용하여 데이터베이스에서 total price와 메뉴 이름들을 불러와 처음 메뉴를 대표 이름으로 저장하고 나머지 메뉴들은 외 *개 이런식으로 예외처리와 카운팅을 하였습니다.
- 이는 카카오페이로 실 결제가 이루어집니다.
- 결제가 완료되면 결제 안내 화면이 뜹니다.
- 결제가 완료됐다고 처리된 상품들 역시 데이터베이스로 불러와 저장하고, 결제 시각에 timestamp를 찍어 결제 날짜까지 반영할 수 있도록 구현하였습니다.
- 즉 날짜, 가게 이름, 가격, 메뉴 이름, 수량을 백엔드가 프론트로 보내 화면에 바로 반영될 수 있도록 구성하였습니다.
- 그리고 가게 별로 밑에 별점 남기기 버튼을 만들어 간단한 리뷰를 작성할 수 있도록 하였습니다.
- 이렇게 고유의 access token을 이용해 해당 가게에 리뷰를 남길 수 있습니다.
- 이는 데이터 베이스에 저장하여 백엔드에서 평균 평점을 보내 해당 가게의 상세 페이지에 평균 평점이 바로 반영되어 보이게 됩니다.
- 해당 가게의 상세 페이지에서 하트 버튼을 누르면 하트의 색깔이 바뀌도록 구성하였으며, sharedPreference로 저장하였습니다.
- 그리고 찜을 한 즉시, 찜한 가게 목록에 반영되어 스크롤하며 확인할 수 있습니다.
- 로그인 시 받아온 사용자의 위치 정보를 메인에 클리어 텍스트 형태로 바꾸어 띄웠습니다.
- 그리고 구글 지도 sdk를 사용하여 해당 사용자의 위치를 지도에 띄우고 등록된 가게들의 위도와 경도를 계산하여 사용자의 주변에 함께 띄울 수 있도록 구현하였습니다.
- 황재령 (Hwang-Jaeryeong) (Back-end)
- 박준서 (JunseoPark123) (Front-end)