Skip to content

catchroom/FE_CatchRoom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image

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

🌷 배포 사이트

CatchRoom

🎞️ 시연 영상

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 구현 및 커스텀 훅 추가 구현
- 상품 공동 컴포넌트 구현
- 단일선택 및 범위선택 달력 구현
- 검색 필터 공동 컴포넌트화
채팅
- 실시간 채팅을 위한 웹소켓 연결
- 구매자/판매자간 채팅방 생성 기능 구현
- 채팅 주고 받기 기능 구현
- 네고하기 및 네고 가격 결제 기능 구현
- 채팅방 정보 조회 및 참여중인 채팅방 조회 기능 구현
- 채팅방 나가기 기능 구현

공통
-로딩/에러 페이지


💡 기능 소개

1. 회원가입/로그인

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

2. 메인 페이지

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

3. 검색 결과 페이지

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

4. 상세 검색 페이지

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

5. 마감임박 페이지

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

6. 상품 상세 페이지

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

7. 채팅

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

8. 구매 페이지

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

9. 판매 페이지

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

10. 결제 페이지

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

11. 결제 완료 및 구매내역 상세 페이지

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

12. 마이 페이지

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


⚒️ 기술 스택

SKILL & UI

CLOUD & SOCKET

VALIDATION & UTILITY

LINT

TEST

SERVER & CLIENT STATE MANAGEMENT

SCROLL & ANIMATION

DATE

IDE & OTHERS



About

패스트캠퍼스 X 야놀자 파이널 프로젝트 4조 FE-REPO

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages