Billy Zip
Billy Zip은 새로운 개념의 구독형 주거 서비스 제공하는 모바일 어플리케이션 프로젝트 입니다.
이사할 때마다 전세? 월세? 보증금? 계약은 어떻게...? 부동산 매물마다 너무 복잡하지 않으신가요? 🤬
Billy Zip을 이용하면 부동산 또는 집주인과의 번거롭고, 복잡한 계약 관계없이 살고 싶은 곳이 있으면 예약 후 마음 편히 거주할 수 있습니다. 🥰
프로젝트 개요
프로젝트 기간 : 2020.01.31 ~ 2020.02.25
서비스 종류 : Mobile Application
프로젝트 참여 인원 : Front-End 1명 / Full-Stack 2명
- 조성철 (팀장, Full-Stack)
- Front : 검색 기능 구현, 포럼 구현
- 유저에게 보다 적합한 부동산 매물 제공하기 위해 퀵 서치 & 맵 서치 컴포넌트 구현
- 필요한 요건의 매물을 찾을 수 있도록 필터링 컴포넌트 구현
- Back
- 전체적인 서버 구조 및 기능 구현, REST API 구조 구현
- Typescript & Express로 @REST API를 활용하여 하우스, 리뷰, 유저정보의 CRUD 기능 구현
- JWT 토큰 인증 과정을 Express Middleware로 하는 인증체계 구축
- Twilio Programmable SMS API를 이용한 인증번호 문자 전송 및 인증 확인 모듈 구축
- Socket.io를 이용해 유저 to 호스트, 유저 to 유저간 의사소통이 가능한 실시간 채팅 기능 구현
- TypeORM의 Active Record 방식을 통한 DB 제어와 자체 알고리즘을 이용해 하우스 검색 기능 구현
- 배포
- Server : AWS EC2
- DB : AWS RDS
- 김보미 (팀원, Full-Stack)
- 회원 서버 API 작성, 회원 정보 화면 구현
- 회원가입 / 로그인 / 로그 아웃 / 탈퇴 서버API 연결
- 회원 정보 수정(비밀번호 / 휴대폰 번호 변경) 서버 API 연결 및 화면 구현
- 현재 구독 모델 / 살고 있는 집 서버 API 연결 및 화면 구현
- 결제 서버 API 연결 및 화면 구성
- 임현성 (팀원, Front-End)
- 전반적인 클라이언트 구조 및 기능 구현, 전체 디자인 구현
- 전체 네비게이션 설계 및 구현
- 클라이언트 전반적인 UI/UX 구현
- 로그인 / 회원가입 / 로그아웃 기능 구현
- 홈 화면(추천매물 / 매물 종류별) / 매물 종류별 리스트 화면 구현
- 즐겨찾기 토글 기능 구현 및 즐겨찾기 화면 구현
- Hosting CRUD 기능 구현 (호스팅 작성 / 호스팅 상세 화면 / 호스팅 수정 / 삭제)
- 내 호스팅 관리 화면 구현
- 구독 신청 수락/거절 기능 및 구독 신청 현황 화면 구현
- 리뷰 화면 및 리뷰 등록/삭제 기능 구현 (별점 평가 및 코멘트 기능)
Billy Zip 주요 기능
- 핸드폰 인증 기반 회원가입 / 로그인 / 로그아웃 / 개인정보 수정 / 회원탈퇴
- 매물 등록/수정/삭제/상세 정보 열람
- 매물 즐겨찾기 등록 / 삭제
- 매물 리뷰 (평점 평가 및 코멘트) 등록 및 삭제
- 구독 신청 및 신청 수락 / 거절
- 매물 검색 / 상세 검색 / 지도 검색
- 포럼을 통한 의견 공유
- 개발 테스트용 결제 기능 구축
프로젝트 관리
-
Notion을 이용하여 프로젝트 전반적인 기획 및 관리
- team rule, step, task, api 문서 등
-
Miro를 이용하여 프로젝트 전체 레이아웃 설계
-
dbdiagram.io를 이용하여 데이터베이스 설계
-
애자일 스크럼 방식을 이용하여 스프린트 단위의 개발 진행관리
-
ESLint, Prettier를 이용하여 코드 스타일 통일
사용한 기술 스택
Common
- TypeScript
- Node.js
- Soket.io
Front-End
- React Native (EXPO)
- React Hooks
- React Navigation
- React Native Elements
- Axios
- Google maps API
Back-End
- Express
- TypeORM
- JWT
- Twilio
- Multer
- MySQL
Development Tool
프로젝트 아키텍쳐
Billy Zip 시연 영상
Features
# 앱 구동시 Splash Image 및 로그인 화면 / 자동 로그인
- Animated.view 를 이용하여 초기 렌더링 시 Opacity Transition
- AsyncStorage, JWT, Switch navigator를 이용한 자동 로그인
# 로그인 및 로그아웃 / 회원가입 / 회원탈퇴
- Switch navigator를 통해 로그인 시 Home화면으로 이동
- 로그아웃 시 AsyncStorage clear
- 회원가입 시 Twilio를 통한 핸드폰 인증
# 홈 화면 및 매물 별 리스트 / 각 탭 화면
- 홈 화면 (추천 매물 / 매물 종류별)
- More 버튼 클릭 시 각 매물 종류별 전체 리스트
- Navigation life cycle (didFocus)를 이용하여 홈 화면 포커싱 시마다 최신 데이터 요청 및 렌더링
- Bottom Tab navigator를 통한 주요 기능 별 화면으로 이동
# 매물 상세 화면
- Carousel과 Pagination 활용으로 매물의 여러 이미지 보여주기
# 즐겨찾기 등록 및 삭제
- 매물 즐겨찾기 등록 및 삭제
- Navigation life cycle (didFocus)를 이용하여 즐겨찾기 화면 포커싱 시마다 최신 데이터 요청 및 렌더링
# 리뷰 등록 및 삭제
- 매물 리뷰 등록 (별점 평가 및 코멘트) 및 삭제
# 매물 등록 및 관리 (수정/삭제)
- EXPO Permission을 이용한 위치 권한 및 디바이스 내 카메라/앨범 접근 권한 설정
- EXPO Image Picker를 이용한 디바이스 내 앨범 및 카메라 사진으로 이미지 업로드 기능
- EXPO Location을 이용한 주소 좌표 받아오기
- 대표이미지 설정을 통해 매물 리스트에서 보여질 이미지 지정 가능
- Carousel과 Pagination 활용으로 매물의 여러 이미지 보기
- 호스팅 관리 화면에서 매물 정보 수정 및 삭제 가능
# 포럼을 통한 의견 공유
- Soket.io를 이용하여 실시간 포럼 기능을 통해 호스트 및 다른 사용자와 의견 공유
# 매물 검색 (빠른검색 / 상세검색 / 지도검색)
- 검색 알고리즘 및 필터링을 이용하여 다양한 검색 기능
- Google Maps를 이용하여 지도 검색
# 현재 구독 플랜 / 살고있는 집 보기
- 현재 내가 구독한 플랜 정보 및 현재 살고 있는 집 조회
# 내 정보 및 핸드폰 / 비밀번호 변경
- Twilio를 통한 핸드폰 인증으로 핸드폰 정보 변경
# 구독 신청하기 / 신청 현황 / 구독 수락 및 거절
- 현재 매물에 구독 신청 현황 보기
- 현재 구독 플랜과 맞는 매물에 구독 신청
- 호스트의 구독 신청 수락 또는 거절
# 결제하기 (테스트 결제로 구현)
잘봤어요.. 저는 혼자 포트폴리오 겸 프로젝트 진행중인데 정말 많은 도움이 됩니다 ^^!