어디든지 이동할 수 있는 팝업카 플랫폼, 콜팝

프로젝트 소개

현재 진행중인 팝업카 목록 및 상세 조회를 할 수 있습니다.
오픈 예정 팝업카 방문 위치를 사용자가 투표하고 결과를 확인할 수 있습니다.
팝업카 현장에서 입장 웨이팅을 등록하고 알림을 받을 수 있습니다.
팝업카에서 진행중인 이벤트를 확인 및 확인 코드를 통해 참여 인증을 할 수 있습니다.
시연 영상 보러가기

팀원 구성

👨🏻‍💻김형민	👩🏻‍🎨박지원	👩🏻‍💼송지희	👨🏻‍💻이태곤	👩🏻‍💻윤유정

Backend/Android	Design	PM	Backend/Infra	Android

1. 개발 환경

Android : Android studio, Kotlin 1.5.0
Backend : Java17, Spring boot 3,2,1, JPA, H2, Swagger
버전 및 이슈관리 : Github, Github Issues, Github Desktop, Docker hub
협업 툴 : Notion, Slack, Github
서비스 배포 환경 : AWS EC2, AWS S3
커밋 컨벤션
코드 컨벤션
API Document

2. 브랜치 전략

Upstream repository를 각자의 Origin repository에 clone 받아서 개발을 진행하였습니다.
Upstream repository에서 API 단위로 issue branch를 생성후에 나누어서 개발을 진행하였습니다.
- Origin repository의 작업을 해당 issue branch로 pull request
- Upstream repository의 main으로 merge 하기전에 peer review

3. 프로젝트 구조

├── java
│   └── softeer
│       └── tenten
│           ├── TentenApplication.java
│           ├── config
│           │   └── S3
│           ├── controller
│           │   ├── event
│           │   ├── popup
│           │   ├── review
│           │   ├── user
│           │   ├── vote
│           │   └── waiting
│           ├── dto
│           │   ├── event
│           │   ├── popup
│           │   ├── review
│           │   ├── user
│           │   ├── vote
│           │   └── waiting
│           ├── entity
│           │   ├── area
│           │   ├── criteria
│           │   ├── event
│           │   ├── popup
│           │   ├── review
│           │   ├── user
│           │   ├── vote
│           │   └── waiting
│           ├── global
│           │   ├── api
│           │   ├── exception
│           │   └── handler
│           ├── mapper
│           │   ├── event
│           │   ├── popup
│           │   ├── review
│           │   ├── user
│           │   ├── vote
│           │   └── waiting
│           ├── repository
│           │   ├── area
│           │   ├── event
│           │   ├── popup
│           │   ├── review
│           │   ├── user
│           │   ├── vote
│           │   └── waiting
│           └── service
│               ├── S3
│               ├── event
│               ├── popup
│               ├── review
│               ├── user
│               ├── vote
│               └── waiting
└── resources
    └── application.yml

4. ER Diagram

5. System Architecture

6. Information Architecture

7. 역할 분담

👨🏻‍💻김형민

Backend: 로그인, 투표 기능, 투표 결과 조회, 웨이팅 기능
Android: 로그인 화면, 이벤트 조회 화면, 이벤트 상세 페이지 화면, 이벤트 참여코드 입력 화면, 웨이팅 등록 화면, 투표 화면

👩🏻‍🎨박지원

UI 디자인
로고, 브랜딩 등 시각화 작업
디자인 시스템 정리
유저플로우

👩🏻‍💼송지희

마일스톤 설정 및 WBS 작성
시장 및 타겟 분석 및 설문조사
페르소나 설정
IA 및 기능 명세
화면 설계 - 와이어프레임
더미 데이터 구축

👨🏻‍💻이태곤

Backend: 팝업 스토어 조회, 팝업 스토어 상세 조회, 이벤트 조회, 이벤트 상세 조회, 이벤트 참여, 리뷰 조회
Infra: AWS S3 Bucket 생성, AWS EC2 배포, Docker container 생성

👩🏻‍💻윤유정

Android: 메인 화면, 팝업 상세 페이지 화면, 팝업 상세 정보 탭, 대기 등록 / 입장 안내 팝업 화면, 이벤트 참여 코드 인증 기능, NAVER MAP API

8. 개발 기간 및 작업 관리

개발 기간

전체 개발 기간 : 2024-01-05 ~ 2024-01-10
UI 구현 : 2024-01-05 ~ 2024-01-08
기능 구현 : 2024-01-06 ~ 2024-01-09

작업 관리

GitHub Issues 생성, Github wiki 및 Slack을 통해 진행 상황을 공유했습니다.
워밍업 프로젝트가 진행되는 5일동안 매일 아침 10시 회의를 진행하며, 진행 상황과 오늘 할 일을 공유하고 Notion에 회의 내용을 기록했습니다.

9. 페이지별 기능

[로그인]

사용자 아이디와 비밀번호를 입력하여 로그인을 진행합니다.
로그인 버튼 클릭 시 아이디 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.

로그인

[홈 화면]

로그인 성공시 팝업 스토어 전체 목록을 제공받을 수 있습니다.
- 내 근처 팝업카: 사용자의 위치에 따라 가까운 순서대로 팝업 스토 목록을 제공합니다.
  - 더보기 버튼을 누르게 되면, 전체 팝업 스토어 목록을 거리가 가까운순에 따라 제공받을 수 있습니다.
- 추천하는 팝업카 (개선 사항): 스크랩이 많은 순서에 따라 팝업 스토어 목록을 제공합니다.
- 오픈 예정 팝업카: 오픈예정인 팝업 스토어 목록을 제공합니다.
팝업 스토어를 클릭하면 상세정보 화면으로 이동할 수 있습니다.

홈

[팝업 스토어 상세 정보(오픈)]

팝업 스토어를 클릭하면 상세정보를 확인할 수 있습니다.
- 행사 위치, 판매 품목과 같은 상세 정보와 이벤트, 리뷰 등 팝업카 스토어에 대한 모든 정보를 확인할 수 있습니다.
대기 줄서기 버튼 클릭을 통해, 웨이팅을 등록할 수 있습니다.
- 본인의 대기번호 및 앞에 대기중인 팀이 몇팀인지 확인할 수 있습니다.
- 본인의 순서가되면, 팝업 알림을 받을 수 있습니다. (개선 사항)

팝업 스토어 상세 화면	대기 중 화면

[팝업 스토어 상세 정보(오픈 예정)]

오픈 예정 팝업 스토어 상세정보를 확인할 수 있습니다.
- 원하는 지역을 투표할 수 있습니다.
- 하나의 팝업 스토어에 대해서 중복 투표가 불가능합니다.
투표 진행시에 통계된 결과화면을 확인할 수 있습니다.

팝업 스토어 투표	투표 결과 확인

[이벤트 조회]

팝업 스토어에서 진행중인 이벤트 목록을 확인할 수 있습니다.
이벤트 클릭시에 상세 화면으로 이동할 수 있습니다.
- 이벤트 소개 및 참여 방법 등을 확인할 수 있습니다.
- 참여 인증하기 버튼을 클릭하고 직원 코드를 입력하여 참여 인증을 할 수 있습니다.

이벤트 전체 조회	이벤트 상세 조회	이벤트 참여 코드 입력 화면

[리뷰 조회]

팝업 스토어를 방문한 방문자의 리뷰를 조회할 수 있습니다.
- 닉네임, 방문 위치, 방문 날짜(팝업 스토어가 열린 날짜), 내용을 확인할 수 있습니다.

리뷰 조회

10. Trouble Shooting 🚀

@RequestBody가 선언된 객체의 final field 이슈
- 컨트롤러에서 @RequestBody를 사용할 경우달 해당 객체는 내장된 Jackson라이브러리를 통해 json을 자바 객체로 변환된다.
- 자바 객체로 변환되는 역직렬화 과정에서 default 생성자가 있어야 한다.
- 최초 final로 필드를 선언해서 default 생성자가 불가능해서 에러가 발생했다.
- Solution: final 선언 삭제
@Docker image pull 이슈
- M1 mac book에서 Docker image를 build -> Docker hub push
- ec2 ubuntu 환경에서 해당 docker image가 pull 할 때 문제 발생
  - Error code: WARNING: The requested image's platform (linux/arm64/v8) does not match the detected host platform (linux/amd64) and no specific platform was requested standard_init_linux.go:228: exec user process caused: exec format error
- M1칩에서는 Docker image 빌드시에 linux/arm64로 빌드가 되어서 ubuntu(amd64)에서 배포할 때 문제 발생
- Solution: 빌드 단계에서--platform 옵션으로 linux/amd64로 지정
  - docker build --platform linux/amd64 -t [이미지명:태그] .