우리만의 공간, MoiM

MEMBERS

김병찬👩‍💻
윤명국👨‍💻
원종환👩‍💻
김민성👨‍💻
현선혜👩‍💻
권성민👨‍💻

Project

🗂 프로젝트 설명

“생활공간대여 플랫폼 MoiM!”

호스트는 자신만의 소중한 공간을 남들과 공유할 수 있고, 
게스트는 원하는 공간에서 필요한 시간만큼 공간을 예약할 수 있는 생활 공간 플랫폼입니다.

📆 Project Timeline

• 기간 : 2022.11.05 ~ 2022.12.09
• 개발 언어 : Javascript, Java
• 개발 라이브러리 : React
• 개발 프레임워크 : Spring Boot
• 배포 환경 : Amazon S3
• 협업 툴 : Git / Notion

✨ 페이지 별 기능

• 메인
  사람들이 공유한 장소들을 둘러볼 수 있습니다. 카테고리별, 기획전, 오늘의 추천공간, 리뷰 등으로 구성되어 있습니다.:)

• 카테고리별
  카테고리별로 구분된 장소들을 둘러볼 수 있습니다. 원하는 조건에 따라 필터링해서 검색할 수 있고, 지도버튼을 눌러서 지도상에서 위치를 찾아볼 수 있습니다.

  • 여러 조건의 필터링 기능(키워드, 지역, 인원, 예약 가능한 일자 및 시간, 결제유형, 가격, 편의시설)
  • 인기순, 가격순 정렬 기능
  • Kakao map api 활용하여 지도 구현 (마커, 클러스터러, 인포윈도우)
  • 반응형 페이지 구현

• 기획전페이지 & 기획전 지도페이지
  테마별로 공간이 정리된 페이지입니다.
  또한 기획전 지도페이지로 접속하여 다양한 필터링을 통해 손쉽게 원하는 공간을 찾아볼 수 있습니다.

  • 여러 조건의 필터링 기능
    (키워드, 지역, 인원, 예약 가능한 일자 및 시간, 결제유형, 가격, 편의시설)
  • 인기순, 가격순 정렬 기능
  • Kakao map api 활용하여 지도 구현 (마커, 클러스터러, 인포윈도우)
  • 반응형 페이지 구현

• 상세페이지
  공간에 대한 정보를 유저들이 보다 편리하게 볼 수 있도록 구성하였고 간편하게 예약기능,찜하기,신고 기능 등 여러가지 기능들을 사용하실 수 있습니다.

  • 공간소개
    상단 고정 메뉴바를 사용하여 공간소개, 지도, 길찾기, Q&A작성, 리뷰(사진만 보기) 등을 확인하실 수 있습니다.
  • 사이드 메뉴
    사이드 메뉴바를 사용하여 찜, 신고, 예약 기능을 할 수 있으며 예약의 경우 예약 가능한 시간대만 클릭이 되며 클릭 시 예약 금액을 계산하여 총 예약 금액을 확인할 수 있는 기능을 제공하고 있습니다.
  • 추가정보
    하단에 해당 공간을 올린 게스트의 다른 공간들과 상세페이지와 유사한 카테고리를 가진 추천공간을 확인하실 수 있습니다.

• 관리자페이지
  서비스 이용자, 공간, 공지사항, 기획전, 신고 관리 등의 기능이 있는 관리자를 위한 공간입니다.

• 호스트페이지
  호스트가 공간에 대한 정보를 등록하고, 관련 정보를 수정·삭제할 수 있는 공간입니다.

• 예약페이지
  마음에 드는 공간을 예약하고, 예약한 정보들을 다시 확인할 수 있습니다.

  • 승인결제 승인 결제 상품의 경우 예약 신청이 가능합니다. 이후 호스트가 예약 승인을 해주면, 결제가 가능한 상태가 됩니다.
  • 바로결제 바로 결제 상품의 경우 예약 페이지에서 결제가 가능합니다. 일반결제(KG이니시스), 카카오페이, 페이코, 토스페이 결제를 할 수 있습니다.

• 예약 내역 리스트
  지금까지 예약했던 모든 상품을 확인해 볼 수 있습니다. 승인대기/결제대기/예약확정/이용완료/취소환불로 구분됩니다.

• 예약 상세 페이지
  예약했던 내용을 다시 확인할 수 있는 페이지 입니다. 예약 상태별로 다른 기능을 구현했습니다.

  • 승인결제 / 예약확정 예약 취소를 할 수 있습니다. 유저는 취소사유를 선택하거나, 직접 입력할 수도 있습니다.
  • 결제대기 결제 진행을 할 수 있습니다. (승인대기 상품)
  • 이용완료 방에 대한 리뷰 작성을 할 수 있습니다. 별점 선택, 리뷰 내용, 사진 첨부가 가능합니다.

• 찜한 공간
  나만의 찜한 공간을 만들 수 있습니다. 마음에 드는 공간들을 찜하여 인기순&가격순 다시 볼 수 있고 찜한 공간을 삭제할 수 있습니다.

• 검색
  원하는 공간 키워드를 검색하여, 해당 공간들을 찾아볼 수 있습니다. 최신순&인기순&가격순으로 나눠서 볼 수 있어요!

• 이용후기
  호스트의 경우 해당 공간을 사용한 유저들의 생생하고 솔직한 후기를 관리하실 수 있습니다. 유저의 경우 해당 공간을 사용한 후 생생하고 솔직한 후기를 작성하고 공유/수정/삭제할 수 있습니다.

• Q&A
  호스트의 경우 해당 공간에 대한 유저들의 질문을 관리할 수 있으며 답변을 작성할 수 있습니다. 유저의 경우 해당 공간에 대한 궁금한 점을 작성하고 공유/수정/삭제할 수 있습니다.

• 마이페이지
  프로필&비밀번호 변경, 회원탈퇴 등 회원정보 수정 및 삭제 기능이 가능하며, 사이드메뉴에는 나의리뷰, 찜 목록, 나의예약, 최근 본 장소 등 회원만의 맞춤메뉴를 확인할 수 있습니다.

• 최근 본 공간
  회원이 최근에 본 공간들을 볼 수 있는 페이지입니다. 유저가 상세페이지에 접속시 해당 공간의 id를 브라우저의 세션 스토리지에 저장하는 방식입니다.

🛠 Tech Stack & Platform

Tech

Tools

아키텍처✨

ERD

사이트 데모🎥

메인

메인페이지

회원가입 & 로그인

일반 회원가입	소셜 회원가입

일반 로그인	소셜 로그인

마이페이지

마이페이지

통합검색

통합검색

카테고리

카테고리 메인페이지	카테고리 지도

기획전 페이지

기획전 메인페이지	기획전 필터링
마커 클러스터링	마커 인포윈도우

관리자 페이지

관리자 메인	게스트 관리
호스트 관리	공간 관리
공지사항 관리	기획전 관리
신고 관리

상세페이지

공간사진	공간소개
지도	Q&A
리뷰	호스트공간&추천공간
찜누르기	예약하기

찜한 공간

정렬	찜삭제

이용후기

정렬(호스트)	관리(호스트)
정렬(유저)	수정/삭제(유저)

Q&A

정렬(호스트)	답변하기(호스트)
정렬(유저)	수정/삭제(유저)

예약 페이지

바로결제(예시 카카오페이)	승인결제

예약 내역 리스트

예약 내역 리스트

예약 상세 페이지

승인대기/예약확정(예약취소)	결제대기(예시 토스페이)
이용완료(리뷰작성)	취소&리뷰모달

시연 영상🎥

링크(https://www.youtube.com/watch?v=kmMcIUePNTU)

🏷 프로젝트 노션 🏷