2021.02.17 SweetyPie 중간 발표 airbnb 클론 코딩 프로젝트 중간 발표 자료입니다.
진행사항
- 메인 페이지 컴포넌트 분리 및 전체 UI 구현
- 조건에 따른 공통 검색 헤더 애니메이션 적용
- 로그인 상태에 따른 유저 메뉴 버거바 조건부 렌더링
- 일반 회원가입 구현 api 요청(POST)
- 일반 로그인 구현
- 구글 oAuth API를 통한 회원가입 (인증받아서 response로 유저 정보 받아오는것까지 구현)
남은 일
- 구글 oAuth 인증 이후 회원가입 처리
- 공통 검색 헤더 애니메이션 최적화
- 공통 검색 헤더 영역에 담긴 정보 url에 담기
- 회원가입 정규표현식 적용 및 에러 처리
- 로그인 시 로그인 한 페이지로 Redirect 처리
- 모달 open 시 스크롤 막기
- 도시 별 검색 기능 구현
- 숙소 유형 별 검색 기능 구현
- 이달의 추천지 검색 기능 구현
진행사항
- 검색 결과에 따른 숙소 리스트가 20개씩 보여지게끔 구현 (GET 요청)
- Redux를 통해 페이지, 지도 범위 등 검색 페이지와 관련된 모든 state 관리
- 페이지 이동시 새로운 데이터 fetch 하여 렌더하는 pagenation 기능
- 숙소리스트의 각 숙소에 마우스가 hover 되면 지도에서 hover 된 숙소의 마커 스타일 변경
- 숙소 이미지를 보여주는 infinity carousel 구현
- 최근 본 숙소 페이지에 대한 데이터를 로컬에 저장하여 렌더
- 검색 결과 및 지동 이동에 따라 근처 숙소를 지도에 마커로 표기되게끔 구현
- 지도 마커 클릭시 해당 숙소 팝업 구현
- 숙소 유형을 선택할 수 있는 팝업 구현
남은 일
- 숙소 유형 필터링
- 요금에 따른 필터링
- 지도 마커 클릭시 나오는 숙소 팝업 위치 조정
- 북마크 기능 api 요청 (GET, POST, DELETE)
진행사항
- 숙소 상세보기 페이지 컴포넌트 분리 및 전체 UI 구현
- 숙소별 accommodation 데이터 api 요청(GET)
- googleMap 지도 API 연결 커스터마이징
- Payment 컴포넌트에서 선택한 예약 정보 url에 담기
- 페이지 내부 navigation header 구현
- react-dates 라이브러리로 달력 연동 및 커스터마이징
- 더보기 모달 구현
남은 일
- 북마크 기능 api 요청(POST, DELETE)
- Calendar 컴포넌트와 Payment 컴포넌트 간 날짜 연동 및 url에 담기
- Guest 모달 버튼 UI 조건에 따라 바뀌게 수정
- 환불 및 리뷰 모달 구현
진행사항
- 예약 내역 페이지에서 받아온 해당 예약 정보를 url, 숙소 정보를 로컬 스토리지로 관리
- 공통 Calendar, Guest 수정 모달 UI 및 기능 구현
- 공통 Calendar 컴포넌트 로직 구현 및 스타일링
- 예약 수정 api 요청 (PATCH)
- 예약 취소 api 요청 (DELETE)
남은 일
- 결제 페이지 / 예약 수정 및 취소 페이지 조건부 렌더링
- 예약 하기 api 요청 (POST)
- Calendar 컴포넌트에서 예약된 날짜 및 이전 날짜 선택 비활성화 처리
- 공통 Guest 모달에서 인원 증가/감소 조건에 따라 버튼 비활성화 처리
진행사항
- 예약 내역 페이지 컴포넌트 분리 및 전체 UI 구현
- 유저에 따른 reservation(예약 내역) 데이터 api 요청 (GET)
- 날짜에 따라 예정된 예약 / 이전 예약 조건부 렌더링
- 이전 예약 탭에서 reservation(예약 내역) 데이터의 리뷰 작성 여부에 따른 조건부 렌더링
- 별점 및 평가메시지 기능 구현
- 리뷰 데이터 api 요청 (GET)
- 리뷰 작성 api 요청 (POST)
남은 일
- 저장 목록 페이지 UI 구현 및 컴포넌트 분리
- 북마크 기능 api 요청 (GET, DELETE)
- 확인 모달창 스타일링
진행사항
- 계정 페이지 UI 구현 및 컴포넌트 분리
남은 일
- 계정 정보 수정 api 요청 구현 (PATCH)
- 회원 탈퇴 api 요청 구현 (DELETE)
- 계정 api 관련 기능 구현
- 북마크 api 관련 기능 구현
- netlify를 활용하여 배포