[팀 프로젝트] 호텔 예약 서비스 PLUSPLUS

 

---

React를 사용하여 제작을 한 사이트입니다. Redux를 통한 상태 관리로 데이터 흐름이 명확해, 디버깅이나 테스트가 용이했습니다. 많은 사람들이 쓰는 기술인지라 관심을 가지고 사용하게 되었고, 협업을 하는데에 훌륭한 가독성과 유지보수가 용이하다는 장점도 느끼는 계기가 되었습니다. Hooks를 사용한 것은 배울 점이 많은 경험이었습니다. 익숙하진 않았지만 React 커뮤니티에서 선호된다는 점에 이끌려서 사용하기로 하였고, 코드가 더 간결하고 재사용하기 간편하다는 점에서 배울 점이 많은 경험이었습니다.

 

모바일 환경에서의 가독성을 높이기 위하여 한 화면에 필요한 정보만 담기 위한 UI/UX를 디자인했습니다. 5인이 진행한 프로젝트이었기에 통일되고 규칙적인 스타일을 위해서 Figma, TypeScript를 사용하였습니다.

 

📋 Background

2022년 7월 진행한 5인 팀 프로젝트입니다. 문화 생활을 한다는 것이 익숙한 사람들에게 알맞은 서비스를 제공하고자 제작한 숙박 예약 웹서비스입니다. 기존 숙박 서비스들은 기본 요금이 2인가격으로 책정되어 있는 경우도 있어, 1인 여행객들의 불편함이 있었을거라 예상됩니다. 방 종류와 예약 형식이 1인 기준으로 디자인 되었고, 혼자서 여행을 왔지만 새로운 인연을 만나기 원하는 고객에 알맞는 스테이도 준비되어 있는 서비스입니다.

 

📋 의미

프론트엔드 개발자이지만, 언젠가 자연스럽게 풀스텍 개발자가 될 수 있는만큼, 백엔드 쪽과 협업을 하며 배경지식을 쌓을 수 있는 경험이었습니다. 협업에서 Git을 사용하는 방법을 단련하고, 다른 사람들과 호흡을 맞추는 방식을 배운 프로젝트입니다.

선배 개발자와의 피드백을 통하여 업계에서는 프로젝트의 각 요소가 어떻게 진행되는지도 설명을 들어 더 기억에 남습니다. 

---

📌 주요 기능	카카오/네이버 소셜 로그인, 회원정보 수정, 좋아요(찜) 기능, 캘린더 필터, 숙소 필터 검색, 숙소 정보 조회, 숙소 예약 기능
📌 Github	https://github.com/plusandplus/
📌 Frontend	React, Redux, TypeScript, Styled Component
📌 Backend	NestJS, MySQL, AWS,
📌 Database	AWS S3
📌 Deployment	AWS RDS

---

📌 기능 설명

 

1. 카카오/네이버 소셜 로그인
카카오/네이버 OAuth 로그인입니다.
2. 회원 정보 수정
이름, 전화번호, 나이, 성별을 지정할 수 있습니다.
3. 좋아요(찜) 기능
원하는 스테이를 '좋아요' 한 뒤 나중에 좋아요 페이지에서 좋아요(찜)한 스테이를 따로 볼 수 있습니다. Hooks를 사용했습니다.
4. 캘린더 필터
원하는 스테이 날짜를 정할 수 있습니다. Hooks를 사용하여 직접 만든 캘린더입니다.
5. 테마, 스테이 유형, 지역 필터
Modal 창에서 스테이를 가격, 테마, 스테이 유형, 지역 등 으로 필터링 할 수 있습니다.
6. 숙소 정보 조회
스테이의 지도 정보, 방 정보, 어메니티 현황 등의 정보를 볼 수 있습니다.
7. 숙소 예약 기능
원하는 스테이를 예약, 결제하는 기능입니다.