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

✅ 프로젝트 소개

야놀자 미니 프로젝트 - 숙박 예약 서비스

개발 기간: 2023.11.06 ~ 2023.11.16

리팩터링 기간: 2023.11.20 ~ 2023.12.15

✅ 관련 링크

홈페이지: https://www.fastcatchapp.com/

깃헙: https://github.com/FC-FastCatch/FastCatch-FrontEnd

---

✅ 구현 기능

1) 로그인 페이지

유효성 검사

• useForm을 사용해 각 항목에 대한 유효성 체크

유저정보 전역 상태관리

• 로그인 시 유저정보 전역 상태로 담아 각 페이지에서 사용자 Id로 내정보 조회

에러 메시지 핸들링

• 실패 응답 값에 따라 존재하지 않는 회원이거나, 비밀번호 불일치 시 toast 알림 노출

2) 회원가입 페이지

유효성 검사

• useForm을 사용한 각 항목에 대한 유효성 체크

닉네임 중복조회

• 값의 유무, 숫자 입력 제한, 글자 수에 따라 1차 필터
• 중복 데이터 서버 요청 후 boolean 응답 값에 따라 사용 가능 여부 알림

조건 미 충족 시 버튼 비활성화

• 약관 동의 미체크 혹은 닉네임 중복 여부에 따른 버튼 활성화

cypress 테스팅

• 회원가입 유효성 자동검사

3) 헤더

검색/필터 조회

• 지역/날짜/인원 조회
•  
• 
• 숙박 카테고리 조회 (ex. 호텔, 모텔, 펜션, 게스트하우스)
• 
• 검색 필터 조회
• 

세부 필터 조회

• 등록순, 가격 낮은 순, 가격 높은 순, 가나다순 정렬
• 
• 숙소 9가지 옵션 다중선택 필터
• 필터된 데이터 전역 상태관리

로그아웃 모달

• 모달 포트를 활용한 모달 구현
• 텍스트, 버튼동작 prop 전달
• 로그아웃 시 토큰 정보 제거 및 메인페이지 이동

4) 메인 페이지

전체 상품 조회

• 이름, 이미지, 주소, 숙박 카테고리 표시
• 예약마감 표시
• 무한 스크롤 구현 (스크롤에 따라 2개씩 아이템 불러오기)
• 

5) 숙소 상세 조회 페이지

개별 숙박 상품 상세 조회

• 이름, 주소, 예약 가능 여부, 전화번호, 소개, 위치, 옵션, 객실 표시
• useQuery를 이용해 효율적으로 데이터 관리
  
  
• kakao map api 연동 및 편의시설(은행,카페,편의점) 조회 기능
  
  

룸 조회

• swiper library & lodash debounce
• 일정과 인원수에 따른 룸 조회 및 예약 마감 표시
  
  
• 일정 및 인원수에 따른 가격 변동
  
  

장바구니 담기

• debouncing
• 비로그인 시 로그인 페이지로 이동
• 성공/실패를 판단할 수 있는 toast
  

즉시 결제하기

• 전역으로 상태 관리
• 비로그인 시 로그인 페이지로 이동
  

6) 장바구니

숙소 별 장바구니에 담은 객실 분류

장바구니 객실 총 갯수와 총 금액 계산 로직 구현

recoil useSetRecoilState를 사용하여 결제 페이지로 상태 전달

7) 결제 페이지

유효성 검사

• useValidation 커스텀 훅을 만들어서 항목에 대한 유효성 체크
  

utils 제작

• 날짜, 가격 같은 계산이 필요한 부분들을 유틸 함수로 제작

쿼리 스트링으로 데이터 구분

• 쿼리 스트링을 통해 데이터를 구분하여 어디서 온 데이터인지 체크하여 그에 맞는 API 요청

구매 후 처리

• 구매 후 성공과 실패 처리를 구분하였고 실패 시 사유를 사용자에게 제공함으로써 사용자 경험 개선
  
  

8) 마이 페이지

수정 기능

• 내 데이터를 불러와서 수정과 유효성 체크를 한 후 API 요청

axios instance

• axios instance를 만들어서 응답과 요청 전에 interceptor를 통해 토큰이 필요한 상황을 분리하지 않도록 하여 개발 비용을 줄이고
  에러 핸들링을 쉽게 하도록 제작

9) 주문 목록 페이지

더보기, 삭제 기능

• 서버와의 통신을 통해 데이터를 주고 받고 react-query를 사용하여 데이터가 삭제되면 바로 서버와 통신하여 업데이트하도록 제작
  

---

✅🖥️ 아키텍처

---

✅📂폴더 구조

📂 src
┣ 📂 api
┣ 📂 assets                   # 폰트, 이미지 ,아이콘
┣ 📂 components               # 공용 컴포넌트
┃  ┣ 📂 common
┃  ┃  ┣ 📂 badge
┃  ┃  ┣ 📂 modal
┃  ┃  ┣ ...
┃  ┣ 📂 roomName
┃  ┣ 📂 termsAgreement
┃  ┣ ...
┣ 📂 constant
┃  ┣ validation
┃  ┣ ...
┣ 📂 hooks                    # 커스텀훅
┣ 📂 mocks
┣ 📂 pages                    # 페이지 컴포넌트
┃  ┣ 📂 accommodation
┃  ┣ 📂 basket
┃  ┣ 📂 home
┃  ┣ 📂 members
┃  ┣ 📂 order
┃  ┃  ┣ 📂 bookInformation
┃  ┃  ┣ 📂 orderItem
┃  ┣ ...
┣ 📂 routes
┣ 📂 states                   # 전역상태
┣ 📂 styles                   # 스타일테마
┣ 📂 types                    # 타입스크립트 공용 인터페이스
┣ 📂 utils
┣ App.tsx
┣ main.tsx

---

✅📜회 고

훌륭한 프론트엔드와 백엔드 팀원들과 함께해서 정말 만족스러운 프로젝트 경험이었습니다. 매일 아침 데일리 스크럼을 통해 현재 진행 상황을 서로에게 공유하고 오늘의 목표를 세우는 것은 팀의 협업과 작업 효율성을 높이는 데 큰 도움이 되었습니다.
 

특히, 백엔드 팀원들과의 소통은 매우 유익한 경험이었습니다. 건의 사항이나 궁금한 점을 정리하고 토론하는 시간을 가져서 프로젝트에 대한 이해도를 높일 수 있었습니다. 또한, 빠른 디자인 결과물과 공통 컴포넌트의 활용은 레이아웃 작업을 빠르게 완료할 수 있게 해주었습니다.

팀원들 간의 협업은 에러 발생 시 빠르게 공유하고 해결하는 데 큰 역할을 했습니다. 코드리뷰를 통해 서로의 코드를 검토하고 더 나은 방향으로 나아갈 수 있도록 도움을 주고 받았습니다.

 팀장이 되어서 많은 걱정과 고민이 있었지만, 팀원들의 열정과 노력 덕분에 모든 것이 순조롭게 진행되었습니다. 특히, 바쁜 일정 속에서도 항상 친절하게 멘토링 질문에 답변해주신 멘토님에게도 큰 감사의 말씀을 전하고 싶습니다.  

이 경험을 통해 팀원들과의 협업, 소통, 그리고 문제 해결 능력이 크게 향상되었습니다. 다양한 경험을 나누어주셔서 정말 감사합니다. 앞으로도 함께 성장하며 더 좋은 결과물을 만들어 나갈 수 있기를 기대합니다.