WanderStay

🖥️ Website

🗒️ 프로젝트 기획

국내 여행 준비에 가장 중요한 호텔 및 숙박 예약 웹 서비스 WanderStay
원하는 날짜와 가격을 비교하여 숙소를 예약할 수 있고, 관리자 페이지를 구현하여 기본적인 CRUD 기능이 가능하도록 풀스택 개발 목표로 구현하였습니다.

📅 개발 기간

2023년 5월 9일 ~ (약 30일)

🛠 Skils

Front-End


Back-End

시작 가이드

Front-End (user)

cd client
npm install
npm start

Front-End (admin)

cd admin
npm install
npm start

Back-End

root .env 환경변수 설정

MONGO = mongoDB 주소
JWT = test

cd api
npm install
npm start

📌 API / 스키마

📗 API
📚 스키마

📌 주요 기능

1. 회원가입 / 로그인 / 회원 정보 수정

페이지	설명
	- 비밀번호는 bcrypt를 사용하여 안전하게 암호화하고 저장합니다. - JWT토큰을 사용해서 사용자를 인증하고 토큰을 생성하고 검증 후 토큰을 쿠키로 전달합니다. 이 때 httpOnly 옵션을 사용해서 보안을 강화합니다. - 로그인 된 유저 정보는 Context API와 useReducer로 로그인 전역 상태 관리합니다.

2. 메인 화면

페이지	설명
	- 데이터를 가져오고, 그에 따른 로딩 상태와 에러를 커스텀 훅을 이용하여 처리하고 있으며 axios를 활용해서 백엔드 API와 통신합니다. - 헤더에서 위치, 날짜, 인원을 체크하고 검색을 누를 때 context API를 사용해서 검색 정보를 전달하고 전역 상태가 업데이트되면, 검색 결과를 화면에 표시합니다.

3. 숙소 검색 결과 페이지

페이지	설명
	- 위에서 설정한 검색 결과에 맞는 숙소를 axios를 활용해서 백엔드 API와 통신하여 데이터를 불러올 수도 있고 옆에서 설정한 옵션에 따라 데이터를 다시 보여줄 수 있습니다. - 불필요한 데이터를 가져오지 않고, 성능을 최적화 하기 위해 데이터를 요청할 때 위치, 최소/최대가격 옵션을 넣고 MongoDB 비교 쿼리 연산자($gte, $lte)를 사용해서 필터링한 데이터를 받아 숙소를 보여줍니다.

4. 숙소 상세페이지

페이지	설명
	- 유저 정보와 검색 정보를 담은 AuthContext, SearchContext를 활용해서 회원만 숙소 예약을 할 수 있게 하고, 선택한 날짜가 예약 가능한 날짜인지 확인할 수 있는 로직을 구현했습니다. - 백엔드에서 객실 방 번호와 예약 불가능한 날짜를 담을 수 있는 배열을 스키마로 정의했고, 예약할 때 체크한 객실 별 objectId와 체크인 / 체크아웃 날짜를 DB에 저장합니다. - 추후 해당 객실 예약 가능 여부 확인 시 체크인 / 체크아웃 날짜가 예약되어있는 날짜와 하나라도 포함되어있는지 여부를 판단하여 예약 불가하도록 구현하였습니다.

5. 관리자 페이지

페이지	설명
	- 백엔드에서 JWT토큰에 관리자 여부 정보를 포함하여 관리자만 접근할 수 있도록 로그인 시 검증합니다. - axios를 활용해서 백엔드 API와 통신하며 유저, 숙소, 객실 CRUD 기능을 할 수 있도록 구현하였습니다. - Cloudinary API는 이미지 최적화를 제공하여 원본 이미지를 자동으로 리사이징하고 압축하여 빠르게 로딩되도록 도와주기 때문에 Cloudinary를 통해 회원, 숙소 이미지를 저장하고 URL을 받아와서 DB에 저장하는 기능을 구현하였습니다.