BillyZip 최종 결과물 소개

조성철 (JoSworkS)·2020년 2월 26일
6
post-thumbnail

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

  • Git
  • AWS (S3, EC2, RDS)

프로젝트 아키텍쳐

아키텍쳐


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를 통한 핸드폰 인증으로 핸드폰 정보 변경

# 구독 신청하기 / 신청 현황 / 구독 수락 및 거절

이미지 텍스트

  • 현재 매물에 구독 신청 현황 보기
  • 현재 구독 플랜과 맞는 매물에 구독 신청
  • 호스트의 구독 신청 수락 또는 거절

# 결제하기 (테스트 결제로 구현)

  • 개발 테스트용 결재 기능

1개의 댓글

comment-user-thumbnail
2020년 10월 19일

잘봤어요.. 저는 혼자 포트폴리오 겸 프로젝트 진행중인데 정말 많은 도움이 됩니다 ^^!

답글 달기