| 로고 | 설명 |
|---|---|
 |
AROOM은 호텔, 펜션, 모텔을 비롯한 전국의 숙소에 대한 정보를 제공하는 서비스입니다. 사용자의 숙소 조회/장바구니/예약 등의 기능을 지원합니다. 🔗 서비스 바로가기 Click ! 👈 |
- 깃허브 레포
- 테스트 계정
- 아이디 : [email protected]
- 비밀번호 : test123
| 기능 | 내용 |
|---|---|
| 로그인/회원가입 | 회원가입 및 로그인한 유저의 정보를 통해 필요한 페이지 및 기능에 접근이 가능합니다. |
| 메인 페이지 | 지역/검색 페이지 연결이 가능하고, 판매량/찜 많은 순 숙소를 캐러셀 형태로 볼 수 있습니다. 전체 숙소를 무한스크롤로 조회 가능합니다. |
| 지역 페이지 | 기본 필터링(날짜/인원수/가격)과 더불어 지역 필터링과 정렬(가격/판매량)을 할 수 있으며, 무한스크롤로 해당 숙소 조회 가능합니다. 해당 지역의 호텔 위치/정보를 지도에서 조회 가능합니다. |
| 검색 페이지 | 기본 필터링(날짜/인원수/가격)과 더불어 검색 필터링과 정렬(가격/판매량)을 할 수 있으며, 무한스크롤로 해당 숙소 조회 가능합니다. |
| 상세 페이지 | 로그인한 유저가 숙소의 상세 정보를 확인할 수 있습니다. 해당 숙소의 위치를 지도에서 조회 가능하며, 해당 숙소의 객실 정보 조회/찜/예약/장바구니 기능을 지원합니다. 인원수와 날짜로 필터링되어 해당되는 객실 조회가 가능합니다. |
| 장바구니 | 로그인한 유저가 장바구니에 담은 객실들의 정보 조회가 가능하며, 삭제 및 예약 기능을 지원합니다. |
| 예약 | 로그인한 유저가 예약하고자 하는 객실들의 예약(결제)가 가능합니다. |
| 예약확인 | 결제까지 완료하게 되면 주문 번호와 예약번호를 확인 할 수 있습니다. |
| 회원가입/로그인 | 메인 페이지 | 검색/지역 페이지 |
|---|---|---|
 |
 |
| 상세/장바구니/예약 페이지 | 상세/찜/장바구니/예약 페이지 |
|---|---|
|
|
|
|
|
어승준 팀장 (FE) |
김민서 팀원 (FE) |
진종수 팀원 (FE) |
채민석 팀원 (FE) |
| 이름 | 역할 | 개발 내용 |
|---|---|---|
| - | 공통 | - 피그마 디자인 - 레이아웃 구현 - msw로 mock 데이터 테스트 |
| 어승준 | FE 팀장 |
- 검색/지역 페이지 - 필터링 (검색/지역/날짜/인원수/가격) - 정렬 (가격/판매량) - 지도 (지역별 중심좌표 적용 + 숙소 마커/오버레이 표시) - 무한스크롤 - 지역 뒤로가기 (선택지역 기록 세션스토리지 배열) - 기타 - craco로 path alias 설정 - 프로젝트 폴더 구조 세팅 - 로딩 lottie - README 작성 |
| 김민서 | FE 팀원 |
- 상세 페이지 - 숙소, 객실 정보 조회/ 필터링 (인원수/날짜/재고), 지도(숙소 위치 중심좌표/ 마커) - 예약/장바구니/찜 요청 - 예약/예약확인 페이지 - 예약/결제/예약확인 기능 - 장바구니 페이지 - 마크업 - 기타 - 로딩/404/needLogin/카드 컴포넌트 - theme/globalStyle 설정 - README |
| 진종수 | FE 팀원 |
- 메인 페이지 - 캐러셀 - 무한스크롤 - 판매량/찜 많은 순/모든 숙소 - 검색/지역 페이지 연결 - 예약 페이지 - 마크업 - 장바구니 페이지 - 조회, 데이터 예약페이지로 전달 |
| 채민석 | FE 팀원 |
- 회원가입/로그인/로그아웃 - JWT (AccessToken/RefreshToken) - 유저 정보 유효성검사 - 유저 정보 및 토큰 전역 관리 - 헤더/푸터 - 로고, 기능구현 |
폴더 구조 보기
📦SO2ZY_FE
┣─ src
┃ ┣─ App.css
┃ ┣─ App.tsx
┃ ┣─ assets
┃ ┃ ┣─ fonts
┃ ┃ ┃ ┗─ GmarketSansTTFLight.ttf
┃ ┃ ┗─ images
┃ ┃ ┣─ check.svg
┃ ┃ ┣─ chevron-down.svg
┃ ┃ ┣─ footer_github_black_icon.png
┃ ┃ ┣─ home.png
┃ ┃ ┣─ hotelDefaultImg.png
┃ ┃ ┣─ hotelDefaultImg2.png
┃ ┃ ┣─ house.svg
┃ ┃ ┣─ mainLogo.svg
┃ ┃ ┣─ mainLogoThree.png
┃ ┃ ┣─ mainLogoTwo.svg
┃ ┃ ┣─ map.svg
┃ ┃ ┣─ shoppingBag.png
┃ ┃ ┣─ sort-down.svg
┃ ┃ ┗─ sort-up.svg
┃ ┣─ components
┃ ┃ ┣─ Calendar
┃ ┃ ┃ ┣─ Calendar.tsx
┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┣─ common
┃ ┃ ┃ ┣─ Card
┃ ┃ ┃ ┃ ┣─ Card.tsx
┃ ┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┃ ┣─ Footer
┃ ┃ ┃ ┃ ┣─ Footer.tsx
┃ ┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┃ ┣─ Header
┃ ┃ ┃ ┃ ┣─ Header.tsx
┃ ┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┃ ┣─ Item
┃ ┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┃ ┗─ Item.tsx
┃ ┃ ┃ ┣─ Loading
┃ ┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┃ ┗─ Loading.tsx
┃ ┃ ┃ ┣─ NotFound
┃ ┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┃ ┗─ NotFound.tsx
┃ ┃ ┃ ┗─ ScrollToTop
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ ScrollToTop.tsx
┃ ┃ ┣─ Modal
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ Modal.tsx
┃ ┃ ┣─ PriceSlider
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ PriceSlider.tsx
┃ ┃ ┣─ SelectPeople
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ SelectPeople.tsx
┃ ┃ ┗─ SelectRegion
┃ ┃ ┣─ index.ts
┃ ┃ ┗─ SelectRegion.tsx
┃ ┣─ hooks
┃ ┃ ┗─ a.ts
┃ ┣─ index.css
┃ ┣─ index.tsx
┃ ┣─ jsonwebtoken-promisified.d.ts
┃ ┣─ pages
┃ ┃ ┣─ cart
┃ ┃ ┃ ┣─ Cart.page.tsx
┃ ┃ ┃ ┣─ components
┃ ┃ ┃ ┃ ┗─ getCart.ts
┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┣─ confirm
┃ ┃ ┃ ┣─ Confirm.page.tsx
┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┣─ main
┃ ┃ ┃ ┣─ components
┃ ┃ ┃ ┃ ┣─ getPlaces.ts
┃ ┃ ┃ ┃ ┣─ mainAllListContainer.tsx
┃ ┃ ┃ ┃ ┣─ mainAllListItem.tsx
┃ ┃ ┃ ┃ ┣─ mainListContainer.tsx
┃ ┃ ┃ ┃ ┣─ mainListItem.tsx
┃ ┃ ┃ ┃ ┣─ modalData.ts
┃ ┃ ┃ ┃ ┣─ regionModal.tsx
┃ ┃ ┃ ┃ ┗─ regionSelectBtn.tsx
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ Main.page.tsx
┃ ┃ ┣─ placeDetail
┃ ┃ ┃ ┣─ components
┃ ┃ ┃ ┃ ┗─ MapModal.tsx
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ PlaceDetail.page.tsx
┃ ┃ ┣─ regionList
┃ ┃ ┃ ┣─ components
┃ ┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┃ ┗─ Map.tsx
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ RegionList.page.tsx
┃ ┃ ┣─ reservation
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ Reservation.page.tsx
┃ ┃ ┣─ searchList
┃ ┃ ┃ ┣─ index.ts
┃ ┃ ┃ ┗─ SearchList.page.tsx
┃ ┃ ┣─ signIn
┃ ┃ ┃ ┣─ components
┃ ┃ ┃ ┃ ┗─ SignIn.tsx
┃ ┃ ┃ ┗─ index.ts
┃ ┃ ┗─ signUp
┃ ┃ ┣─ components
┃ ┃ ┃ ┗─ SignUp.tsx
┃ ┃ ┗─ index.ts
┃ ┣─ react-app-env.d.ts
┃ ┣─ recoil
┃ ┃ ┣─ atom.ts
┃ ┃ ┣─ regionList.ts
┃ ┃ ┣─ regionModal.ts
┃ ┃ ┗─ searchList.ts
┃ ┣─ reportWebVitals.ts
┃ ┣─ styles
┃ ┃ ┣─ globalStyles.ts
┃ ┃ ┗─ theme.ts
┃ ┗─ utils
┃ ┣─ getData.ts
┃ ┣─ registerFunction.ts
┃ ┣─ textLength.ts
┃ ┣─ useFormatDate.ts
┃ ┗─ useIntersectionObserver.ts
┣─ tsconfig.json
┗─ tsconfig.paths.json