Skip to content

wafflestudio/22-5-team6-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

28af0e4 · Feb 2, 2025
Jan 1, 2025
Dec 26, 2024
Feb 2, 2025
Dec 26, 2024
Dec 26, 2024
Dec 26, 2024
Dec 26, 2024
Feb 2, 2025
Jan 8, 2025
Jan 9, 2025
Jan 8, 2025
Feb 1, 2025
Dec 26, 2024
Jan 9, 2025
Jan 8, 2025
Jan 9, 2025
Jan 10, 2025
Feb 1, 2025

Repository files navigation

22-5-team6-web

🏡 Intro

안녕하세요, 와플 토이프로젝트 팀 6조입니다.

WaffleBnBAirbnb의 클론 코딩을 주제로 진행한 프로젝트입니다 !

프로젝트 바로가기

✨ Team

🚀 WaffleBnB 팀 6조

  • 🏡 김민수
  • 🚀 박준병
  • 🔑 최승민
  • 🫧 인소윤
  • 🖍️ 최서현
  • 📍 윤시헌

🎯 프로젝트 목표

  • 완성도 있는 Airbnb 서비스의 클론 코딩
  • 기존 Airbnb 서비스의 디자인을 유지하되, 유저 친화적인 서비스 구현
  • Spring boot 활용 실무형 백엔드 서비스 개발
  • CI/CD 구축 및 AWS 인프라 활용
  • 깃허브 컨벤션과 노션 칸반, 대면/비대면 하이브리드를 통한 협업 경험

🏗️ Project View

1. 회원 가입 창

사용자가 초기에 회원가입을 할 수 있는 페이지입니다.

소셜 로그인으로 접근 할 경우, 프로필 사진 선택부터 별명 입력, 자기소개를 입력할 수 있습니다.

  • BE API
    • POST /api/auth/register : 회원 가입 API
    • 소셜 로그인 시에는 POST /api/v1/profile : 프로필 생성 API
readme1
readme2
readme3
readme4
readme5

2. 메인 페이지

조건에 맞는 숙소 검색 및 핫플레이스를 제공하는 메인 페이지입니다.

  • 여행지 주소, 예약 가능 날짜, 게스트 인원에 맞춰서 검색 가능
  • 필터바를 통해 아이콘에 따라 숙소 유형으로 필터링
  • 정렬 모달을 통해 가격, 이름, 등록, 평점 순으로 정렬 가능
  • 필터 모달을 통해 가격 범위, 시설 정보, 편의 시설, 별점으로 필터링 가능
  • 숙소 카드 내 하트 버튼을 통해 위시리스트 추가 및 삭제 기능 제공
  • 로그인하지 않은 유저도 메인 화면 접근과 검색 가능
  • 핫플 기능: 주어진 기간 내 예약이 가장 많은 숙소들을 큐레이팅하는 추가 기능 구현

BE API

  • GET /api/v1/rooms/main : 페이지네이션이 적용된 전체 숙소 리스트 제공
  • GET /api/v1/rooms/search : 조건에 맞는 방 검색 (가격, 주소, 평점, 예약 가능 날짜 등 필터 적용)
readme6 readme7
readme8 readme9
readme10 readme11
readme12
readme13

3. 숙소 등록 페이지

사용자가 직접 호스팅할 숙소를 등록할 수 있는 페이지입니다.

숙소 등록을 4단계로 나눠서 진행할 수 있도록 하였습니다. 상단에 프로그레스 바를 구현하여 진행 단계를 알 수 있도록 하였습니다. 각 단계에서 넣는 정보는 다음과 같습니다

  • 단계별 정보 입력

    1. 1단계: 숙소 타입, 숙소 주소
    2. 2단계: 숙소 이름, 숙소 설명, 숙소 시설, 시설 정보, 숙소 이미지
    3. 3단계: 숙소 요금, 최대 수용 인원
    4. 4단계: 최종 검토
  • API

    • POST /api/v1/rooms : 숙소 생성 API
      • 결과로 이미지 업로드를 위한 Presigned URL 리스트 리턴
      • 프론트에서는 Presigned URL을 이용해 image PUT 요청으로 이미지 업로드 진행
post1 post2
post3 post4
post5

4. 숙소 상세페이지

  • API
    • GET /api/v1/rooms/{roomId} : 메인 페이지에서 숙소 클릭 시 상세 정보 조회

숙소 상세 페이지에서는 다음의 정보를 확인할 수 있습니다:

  • POST Room 시 등록한 정보
  • 호스트 이름
  • 리뷰 조회
  • 예약 가능 여부
  • 이미지 등

readme14

숙소 이미지 상세

  • RoomDetails의 Response로 이미지 조회 URL 리스트 제공
  • 이미지 조회는 S3 버킷과 연결된 CloudFront 도메인 주소 + key path로 구성
  • 이미지 접근은 Public으로 설정

readme15

상세 리뷰

  • API
    • GET /api/v1/reviews/room/{roomId} : 특정 방에 대한 리뷰 조회 (페이지네이션 적용, 최신 순/별점 순 정렬 가능)
  • 참고: 평균 별점 정보 반영 (별점 개수는 시간적 요인으로 하드 코딩)

image

예약 가능 여부 확인

  • API
    • POST /api/v1/reservations : 예약 생성
    • GET /api/v1/reservations/availability/{roomId} : 해당 월의 예약 가능 날짜 조회
  • 프론트와 백엔드 모두 과거 날짜 예약 불가 설정

readme17

readme18

예약 성공

readme19


5. 프로필 페이지

사용자 닉네임, 프로필 bio, 생성한 예약, 작성한 후기, 위시리스트를 조회할 수 있습니다.

다른 유저에게 본인의 정보를 공개할지, 비공개 할지도 설정 가능.

  • API
    • GET /api/v1/profile : 프로필 조회
    • GET /api/v1/reservations/user/{userId} : 사용자의 예약 조회
    • GET /api/v1/reviews/user/{userId} : 사용자가 남긴 리뷰 조회
    • PUT /api/v1/profile : 프로필 정보 변경 (회원 가입 시 이미지 업로드를 스킵하고, 이후 업로드 가능)

readme20

프로필 수정

  • 프로필 수정 시 자신의 이전 여행지(예약 내역)와 작성한 후기를 공개 여부 선택 가능
  • 위시리스트 공개 여부 설정 가능

readme21

다가오는 여행 - 예약 수정 및 변경

  • API
    • PUT /api/v1/reservations/{reservationId} : 예약 변경 API
    • DELETE /api/v1/reservations/{reservationId} : 예약 취소 API
  • 예약 변경 시 체크인-체크아웃 날짜와 게스트 인원 수정 가능
readme22 readme23 readme24

사용자가 작성한 후기

readme25 readme26

리뷰 작성

readme27 readme28

위시리스트 목록

image

🏗️ Tech Stack

💻 Frontend

기술 버전
React 18.2.0
React Router 7.1.1
TypeScript 5.7.2
Tailwind CSS 3.4.17
Material UI 6.3.1
Emotion (React & Styled) 11.14.0
Prettier 3.3.3
Vite 5.0.12
Axios 1.7.9
yarn 4.4.1

🔥 프로젝트 기여

🫧 인소윤

  • 템플릿 사용 레포 초기 설정 (절대 경로, tailwind css)
  • 위시리스트 목록 구현
  • 상세화면 페이지/GET 구현
    • 위시리스트 모달/POST/DELETE 구현
    • 공유하기 모달 /링크복사 구현
    • 사진 투어 구현
    • 예약 POST 구현
    • 리뷰 모달/GET 페이지네이션/정렬 구현

🖍️ 최서현

  • FE 레포지토리 초기 설정
  • 회원가입 / 로그인 / 소설 로그인 화면 UI 및 기능 구현
  • 마이 페이지 화면 / 유저 별 프로필 정보 조회 및 수정 기능 구현
  • 예약 조회 화면 / 유저 별 예약 조회, 수정, 삭제 기능 구현
  • 리뷰 조회 화면 / 유저 별 리뷰 조회, 수정, 삭제 기능 구현
  • 숙소 관리 화면 / 유저 별 등록한 숙소 조회, 수정, 삭제 기능 구현

📍 윤시헌

  • 메인 페이지 구현
    • 검색바 및 검색 모달 구현
    • 필터바 설계 및 정렬 모달/필터 모달 구현
    • 숙소 리스팅 구현
    • 위시 리스트 구현
    • 전체 UI 디자인 담당
    • 핫플 기능 추가 구현
  • 숙소 등록 페이지 구현
    • 숙소 등록 및 이미지 연결 POST 구현
    • 숙소 등록 과정 새로운 UI 디자인 구현

📑 API 문서

API 명세는 Swagger 또는 노션 문서에서 확인 가능합니다.

🔗 Repository

🔗 Frontend Repository 🔗 Backend Repository