패스트캠퍼스 X 야놀자 프론트엔드 개발 1기 부트캠프 미니프로젝트

Bendeso·2023년 12월 15일

🏠 숙박 예약 서비스

📝 프로젝트 정보

TR1LL1ON은 React를 사용하여 객실 상품을 장바구니에 담거나 예약할 수 있고, 리뷰 작성이 가능한 숙박 예약 서비스입니다.

구현 기간: 2023.11.20 ~ 2023.12.01
배포 사이트: TR1LL1ON 보러가기
테스트 계정

testID: test@test.com 
testPW: 12345678

📁 폴더 구조

📦src
 ┣ 📂api
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂layout
 ┃ ┣ 📂template
 ┃ ┃ ┣ 📂account
 ┃ ┃ ┣ 📂cart
 ┃ ┃ ┣ 📂main
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┣ 📂notFound
 ┃ ┃ ┣ 📂payment
 ┃ ┃ ┗ 📂products
 ┃ ┃ ┃ ┣ 📂GuestModal
 ┣ 📂hooks
 ┣ 📂interfaces
 ┣ 📂pages
 ┃ ┣ 📂cart
 ┃ ┣ 📂main
 ┃ ┣ 📂mypage
 ┃ ┣ 📂payment
 ┃ ┗ 📂products
 ┣ 📂router
 ┣ 📂states
 ┣ 📂style
 ┃ ┣ 📂account
 ┃ ┣ 📂cart
 ┃ ┣ 📂common
 ┃ ┣ 📂header
 ┃ ┣ 📂main
 ┃ ┣ 📂mypage
 ┃ ┣ 📂payment
 ┃ ┣ 📂products
 ┣ 📂util
 ┣ 📜App.tsx
 ┣ 📜constant.ts
 ┣ 📜constants.ts
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┗ 📜vite-env.d.ts

📚 주요 기능

1. 로그인/회원가입

✔️ 로그인

로그인/회원가입 탭을 클릭하면 로그인/회원가입 모달이 나타납니다.
아이디나 비밀번호가 일치하지 않거나, 아이디나 비밀번호를 입력하지 않은 채 로그인 버튼을 누르면 경고 문구가 나타납니다.
입력 창 아래에 경고 문구가 나타날 시 로그인 버튼을 눌러도 로그인 되지 않습니다.
입력 창에 입력이 안된 부분이 존재한 채로 로그인 버튼을 누를 시 입력되지 않은 입력 창에 focus 이벤트가 작동되고 로그인은 되지 않습니다.
로그인 성공 시 trillion 로그인 성공 문구와 함께 로그인 모달이 사라집니다.

✔️ 회원가입

로그인/회원가입 탭을 클릭하면 로그인/회원가입 모달이 나타납니다.
입력창에 모든 입력을 완료해야 회원가입이 가능합니다.
비밀번호와 비밀번호 재확인 유효성 검사를 통과하면 초록색 체크 아이콘과 테두리가 표시, 통과하지 못하면 빨간색 경고 아이콘과 테두리가 표시됩니다.
- 유효성 검사 규칙: 비밀번호는 8-20자리 이내로 입력해주세요.
그 외 모든 입력창의 칸이 비어있을 시, 경고 문구가 나타납니다.
회원 정보 입력 후, 회원가입 버튼을 누르면 회원가입 완료! 문구와 함께 로그인 모달로 이동합니다.

2. 메인 페이지

메인 페이지의 숙소 목록에서 숙소를 클릭하면 숙소 상세 페이지로 이동합니다.
숙소 목록의 숙소에는 숙소의 간단한 정보, 별점, 가격이 보여집니다.
관광호텔, 펜션, 모텔, 민박 등 숙소 유형에 따라 필터가 가능합니다.
숙소 위치에 따라 지역으로 필터가 가능합니다.
스크롤을 맨 밑으로 내렸을 때 API를 호출하여 숙소를 20개씩 받아옵니다.

3. 숙소 상세 페이지

로그인 사용자	비로그인 사용자

productId에 해당하는 숙소를 불러오고, 해당 숙소 정보를 보여줍니다.
기본 지정 날짜는 금일부터 익일로 1박이며, 날짜 수정 모달을 통해 수정이 가능합니다.
기본 지정 게스트는 총 2명이며, 게스트 수정 모달을 통해 수정이 가능합니다.
상세보기를 통해 객실에 대한 상세 정보를 확인할 수 있습니다.
장바구니 버튼 클릭 시 해당 객실이 유저 장바구니에 추가되고, 장바구니 알림 모달이 보여지고 장바구니로 이동 또는 모달끄기를 선택할 수 있습니다.
비로그인 사용자는 장바구니 버튼 클릭 시 로그인 알림 모달이 보여집니다.
예약하기 버튼 클릭 시 장바구니에 추가 후 바로 결제페이지로 이동합니다.
비로그인 사용자는 예약하기 버튼 클릭 시 로그인 알림 모달이 보여집니다.
지도를 통해 해당 숙소의 위치를 확인할 수 있습니다.
해당 숙소의 리뷰를 볼 수 있습니다.

4. 장바구니 페이지

장바구니에 담겨있는 객실이 없을 경우, 장바구니가 비어있다는 문구를 보여줍니다.
유저가 장바구니에 담은 객실을 리스트 형태로 보여줍니다.
장바구니에 있는 객실을 일부선택 또는 전체 선택이 가능합니다.
객실을 개별 삭제하거나, 선택한 객실만 삭제하는 선택 삭제가 가능합니다.
요금 세부정보에 선택된 객실들의 객실 정보와 객실의 총 가격이 표시됩니다.
선택된 객실들의 총 합계가 표시됩니다.
결제하기 버튼 클릭 시 결제페이지로 이동하면서 선택된 객실들의 productId와 accommodationId를 쿼리스트링으로 함께 전달합니다.
선택된 객실이 없을 경우 결제하기 버튼은 disabled 됩니다.

5. 결제 페이지

예약하려는 날짜와 게스트 수, 숙소정보가 표시됩니다.
카카오페이, 네이버페이, 신용카드, 현장 결제 등 결제 방식을 선택할 수 있습니다.
약관 동의 버튼 클릭 시 확인 및 결제 버튼이 활성화됩니다.
결제 버튼 클릭 시 결제가 완료되었습니다 문구와 함께 결제 완료 페이지로 이동합니다.

6. 마이페이지

예약했던 숙소들을 볼 수 있습니다.
상세 조회에서 예약했던 객실의 상세정보를 볼 수 있고, 리뷰 작성 버튼 클릭 시 리뷰작성 모달이 보여집니다.

7. 헤더

로그인 사용자	비로그인 사용자

비로그인 사용자가 장바구니와 마이페이지 목록을 클릭하면 로그인 알림 모달이 보여집니다.
로그인 시 해당 유저의 장바구니 개수가 표시됩니다.
장바구니 목록 클릭 시 장바구니로 이동합니다.
마이페이지 목록 클릭 시 마이페이지로 이동합니다.

🔎 리팩토링

react-query 적용

try-catch, useState, useEffect로 구성된 기존 비동기처리 코드보다 코드량 감소

react-query 적용 전

  const fetchData = async (): Promise<void> => {
    try {
     const res = await getCarts();
      setCartsData(res);
    } catch (err) {
      console.log(err);
    } finally {
      setIsLoaded(true);
    }
  };
  useEffect(() => {
    fetchData();
  }, []);

react-query 적용 후

  const cartsDataQuery = useQuery({
    queryKey: ['CartsData'],
    queryFn: () => getCarts(),
  });
  if (cartsDataQuery.isLoading) return <div>Loading...</div>
  if (cartsDataQuery.isSuccess) setCartsData(cartsDataQuery.data);
  if (cartsDataQuery.isError) console.log(cartsDataQuery.error);

로그인 알림 모달

문제
: 비로그인 사용자가 장바구니 또는 마이페이지, 상품 장바구니에 추가, 예약버튼을 클릭 하면
인증/인가가 필요한 서비스이기 때문에 401 authorization에러가 발생했다.
해결 과정
: 쿠키에 access token이 존재한지 여부를 판단하여 비로그인 사용자인지 로그인 사용자인지 판별하도록 구현했다.
만약 비로그인 사용자로 판별되면 페이지가 이동하거나 API가 실행되는 것이 아닌 로그인 알림 모달이 보여지도록 구현했다.