hidon84 / fe_catchroom Goto Github PK

취소 수수료 발생 숙박매물을 고객간에 거래할 수 있는 중개거래 플랫폼

https://www.youtube.com/watch?v=TIb-DvcFkTQ

• 개발 인원: FE 6명 & BE 4명
• 프로젝트 기간: 12월 11일(월) ~ 1월 29일(월)
  
  

FE_김민섭 (팀장)	FE_김민서	FE_김지민	FE_박수연	FE_박준규	FE_이승연
채팅 - StompJS 웹 소켓 적용 - socket 연결용 customHook 제작 - 채팅 무한스크롤 구현 - 채팅방 & 채팅방 목록 실시간 웹소켓 연결 테스트 - E2E 테스트 진행 공동 컴포넌트 - 바텀시트 구현 팀 운영 - 초기 개발 환경 세팅 - 데일리 스크럼 진행 - 배포환경 구축	회원가입 / 로그인 -회원가입시 유효성 검사 - 이메일/닉네임 중복 체크 - 토큰 관리 마이페이지 - 유저 정보 조회 및 닉네임 수정 - 계좌 등록/수정/삭제 - 예치금 내역 조회/출금 - 찜 목록 조회 및 찜 삭제 - 구매 목록 조회 및 구매 상세내역 조회 - 판매내역(게시중/게시만료) 조회 및 삭제 - 게시만료 타입에 따라 상태 구분 - 리뷰 등록/수정/삭제/조회	판매 페이지 - 판매 가능 숙박권 조회 - 판매할 상품 가격 및 종료날짜, 캐치특가 여부 및 종료날짜 및 가격, 판매자한마디 설정 및 등록 판매한 상품 수정/삭제 메인 페이지 - 캐치특가 상품 및 리뷰 조회 캐치특가 페이지 - 캐치특가 상품 조회 -무한 스크롤 기능 -지역, 드롭다운 필터를 사용한 세분화 조회 리뷰 페이지 - 무한 스크롤 기능 공동 컴포넌트 - 모달 구현	구매 페이지 - 상품 정보 조회 - 이용자 정보 등록 - 결제 수단 설정 결제 완료 페이지 - 상품 정보 / 예약 정보 조회 검색 결과 페이지 - 필터링, 무한스크롤 기반 한 상품 리스트 조회 - 지도에서 상품 위치, 상품 정보 조회 공동 컴포넌트 - 상단 app bar / 하단 nav bar 구현	상세검색 페이지 - 지역선택 및 숙소유형 버튼 필터 구현 - 범위선택 달력 및 인원 수 선택 카운터 구현 체크인 마감임박(메인 & 페이지) - 일주일 조회 및 선택 가능한 달력 구현 - 지역선택 필터 재사용 및 적용 - 상품 무한 스크롤 구현 상품 상세페이지 - 상품 이미지 스와이퍼(캐러셀) 구현 -찜하기 기능 구현 공동 컴포넌트 - 버튼 구현 (슬라이드, 체크박스, 찜버튼) - ToastAlert 구현 및 커스텀 훅 추가 구현 - 상품 공동 컴포넌트 구현 - 단일선택 및 범위선택 달력 구현 - 검색 필터 공동 컴포넌트화	채팅 - 실시간 채팅을 위한 웹소켓 연결 - 구매자/판매자간 채팅방 생성 기능 구현 - 채팅 주고 받기 기능 구현 - 네고하기 및 네고 가격 결제 기능 구현 - 채팅방 정보 조회 및 참여중인 채팅방 조회 기능 구현 - 채팅방 나가기 기능 구현 공통 -로딩/에러 페이지

유효성 검사와 중복확인 통과한 사용자만이 회원가입 가능합니다. 로그인한 유저의 정보를 통해 필요한 페이지 및 기능에 접근이 가능합니다.

캐치특가 상품, 체크인 임박 상품, 리뷰 리스트를 확인할 수 있습니다. 전체 보기를 통해 각 리스트들의 전체 상품을 확인할 수 있고 모두 무한스크롤로 구현이 되어 초기 렌더링 시간을 낮췄습니다.

검색 결과를 리스트, 지도에서 조회할 수 있으며 정렬, 필터링을 할 수 있습니다.

개별 숙박상품의 가격 및 숙소 위치, 제공하는 서비스 내용 등을 조회할 수 있는 페이지입니다. 사용자의 UX경험을 고려하여 캐러셀 형태로 숙소 이미지를 조회할 수 있도록 구현하였고, 숙소의 정확한 위치를 파악할 수 있도록 KakaoMap API를 활용하여 숙소의 위치정보를 제공함과 동시에, 숙소 주소를 쉽게 복사할 수 있도록 주소 복사 기능을 추가하였습니다.

판매 마감기한이 얼마 남지 않은 상품들을 조회할 수 있는 페이지입니다. 오늘 날짜를 기준, 일주일(6일 뒤 까지) 판매 마감이 임박한 상품들을 조회할 수 있으며, 지역별 상품을 추가로 필터링하여 조회할 수 있습니다. 또한, 조건에 맞는 상품들을 10개 단위로 유저들에게 보여질 수 있도록 무한스크롤을 적용하였습니다.

개별 숙박상품의 가격 및 숙소 위치, 제공하는 서비스 내용 등을 조회할 수 있는 페이지입니다. 사용자의 UX경험을 고려하여 캐러셀 형태로 숙소 이미지를 조회할 수 있도록 구현하였고, 숙소의 정확한 위치를 파악하기 KakaoMap API를 활용하여 숙소의 위치정보를 제공함과 동시에, 숙소 주소를 쉽게 복사할 수 있도록 주소 복사 기능을 추가하였습니다.

구매자와 판매자가 매물에 관해 대화할 수 있으며, 대화 중 가격을 네고하고 결제 할 수 있습니다. StompJS와 SockJS를 사용하여 크로스 브라우징을 지원하는 웹소켓 연결을 성공시키고, 실시간 채팅방 및 채팅 리스트를 구현하였습니다. 추가적으로 메세지를 불러올 때 무한스크롤을 적용하여 초기 페이지 렌더링 시간을 낮췄습니다.

상품 정보를 확인하고 이용자 정보, 결제 수단을 설정 할 수 있습니다.

야놀자에서 구매한 숙박권을 불러와 판매할수 있습니다. 판매 종료기한, 판매 가격을 설정할 수 있고 캐치특가 자동 설정을 on 으로 설정 시 자동으로 캐치특가 종료기한, 캐치특가 판매가가 설정됩니다. 또한, 사용자가 캐치특가 관련 설정을 임의로 설정할 수 있습니다. 판매할 숙박권을 등록하고 수정,삭제 할수 있습니다.

원하는 상품을 원하는 수단으로 결제 할 수 있습니다.

상품 정보 및 예약 정보를 확인할 수 있습니다.

로그인 한 유저의 프로필/계좌정보 수정/조회/삭제가 가능하고, 찜/판매/구매 목록 조회 및 상세 조회 가능합니다. 또, 리뷰 작성/수정/삭제/조회 가능하고 예치금 출금 및 내역 조회도 가능합니다.