---
# System prepended metadata

title: Airbnb 기능 분석

---

# Airbnb 기능 분석
1. 메인 레이아웃
2. 검색 결과 및 지도

## 메인 레이아웃
- GNB (Global Navigation Bar)
    - 로고
    - 메뉴
        - 기능 없음
    - 마이페이지
- 검색바
    **※** 각 모달창의 입력이 활성화 되면 X버튼이 활성화되어 입력을 취소할 수 있다.
    **※** 모달창 이외의 영역을 누르면 열려있는 해당 모달이 닫힌다.
    - 캘린더 (날짜)
        - 체크인
        - 체크아웃
    - 요금
        - 가격 범위 그래프로 요금을 검색
    - 인원
        - 성인
        - 어린이
        - 유아
    - 위 조건을 이용해서 검색할 수 있다.
- 나머지
    - 선택사항

### 캘린더 모달
- 체크인 / 체크아웃 영역을 클릭하면 캘린더 모달 창
- 검색바가 활성화 되면 Focus 상태로 전환
- 캘린더는 다음 2개월의 일정
- 화살표를 클릭하면 캘린더가 슬라이딩 된다.
- 이전 날짜는 선택할 수 없는 비활성화
- 날짜를 처음 클릭하면, 체크인 텍스트 필드에 해당 일자가 입력되고, 다음 날짜를 클릭하면 체크아웃 텍스트 필드에 해당 일자가 입력된다.
- 일정 없이 검색 가능

### 요금 모달
- 선택한 날짜를 기준으로 가격 범위를 표시한 모달창 (그래프)
- 레인지 슬라이더 (가격 범위 선택)
- 선택한 가격 범위가 검색바에 입력된다.
- 선택한 가격 범위가 모달창에도 입력된다.

### 인원 조정 모달
- 성인 / 어린이 / 유아
- 성인은 최소 1명 이상
- 인원수 텍스트 표기는 성인과 어린이는 합쳐서 **게스트**로, 유아는 **유아**로 표기한다.


## 검색 결과 및 지도
- 반응형
- 메인에서 받아온 검색 결과를 미니 검색바와 리스트 상단에 나타낸다
- 좌측 숙소 리스트
    - 대표 이미지
    - 위치
    - 숙소 이름
    - 옵션
    - 평점 / 후기
    - 1박 요금 및 전체 일정 비용
        - 일정을 선택하지 않은 경우 뜨지 않음
    - 위시 리스트 추가
    - 그 외에 클릭 시 숙소 예약 모달
- 우측 지도
    - 드래그 앤 드롭
    - 위치에 따라 숙소가 다시 검색
    - 지도 검색 on-off
    - 확대 축소
- 미니 검색바
    - 클릭하면 메인 페이지와 같은 큰 검색바로 변경
- 숙소 예약 모달
    - 체크인
    - 체크아웃
    - 인원
    - 각각은 클릭시 검색과 동일한 모달창이 뜨도록 한다.
    - 예약 버튼 동작
    - 이외의 영역을 클릭하면 모달창이 닫힌다.

## 로그인
> 선택 기능
- GNB에서 로그인 가능하도록 기능 추가
- 숙소 예약, 숙소 예약 취소, 위시 리스트 동록 및 해제

# 프로젝트 요구사항
- README
- feature 단위 개발
- Github Issue와 Label 사용
- 주별 Milestone
- 다른 멤버의 코드 리뷰 (2회 이상)

# FE
- SPA 구현
- 객체지향 JS
    - ES Class
    - Object literal
    - 상속 사용(prototype / class)
    - View와 Store 분리
    - 객체지향 설계
    - prototype pattern
- Webpack 구성
    - babel
    - source-map 연동하고 디버깅 가능하도록 한다.
    - boilterplate 구조로 만들어서 github 오픈소스로 배포
- ES Module으로 구현
    - webpack bundle로 배포
    - 순환 참조 X
    - 다양한 import 방식 활용
- 이벤트 위임
- CSS
    - pre-processor
    - CSS Classes 네이밍 규칙
- 글 쓰기
    - prototype
    - this
    - bind
    - call
    - apply
    - closure
    - scope
- webpack plugin 만들기 (선택)

# BE
- Node, express
- 프론트에서 사용하는 Web API를 백엔드에서 제공
    - 아마 클라이언트 단에서 렌더링하도록 구현
- MySQL
    - MySQL2
    - ORM 사용하지 않기
- 로그인
    - 쿠키와 세션
    - passport 외부 라이브러리 X
- nCloud 인스턴스 배포
