여행자의 동반자, Traveler

여행을 떠나신다고요? Traveler를 통해서 숙소를 예약해보세요!

Test ID : [email protected]
Test PW : 123qwe

🖌 3조 FE Contributors

FE팀장[박준규] 로그인, 회원가입	FE팀원[박가현] 장바구니, 예약내역	FE팀원[배경규] 상세페이지	FE팀원[서예빈] 결제완료, 예약진행	FE팀원[최선파] 메인페이지	김민수 멘토님 3조 FE멘토님

⚙ 3조 BE Contributors

BE팀장[임경민]	BE팀원[박건우]	BE팀원[한상우]	BE팀원[문창호]	박경태 멘토님 3조 BE멘토님

🧑🏻‍💻 프로젝트 소개

📜 프로젝트 기획안

📜 API 위키 (Swagger)

프로젝트 실행 결과 및 주요 페이지

로그인 페이지	회원가입 페이지
로그인 페이지입니다. 각 Input 태그의 하단에 위치한 label로 유효성 검사 여부를 알 수 있습니다.	이메일 중복 여부와 더불어 각 Input 태그의 하단에 위치한 label로 유효성 검사 여부를 알 수 있습니다.

메인 페이지	상세 상품 페이지
메인 페이지에서는 지역별로 숙박 상품을 무한 스크롤을 통해 조회가 가능합니다.	개별 상품을 조회하며 숙박을 위한 날짜 및 인원수를 설정하여, 장바구니에 담거나 바로 결제를 할 수 있습니다.

장바구니 페이지	예약진행 페이지
개별 상품 페이지에서 설정했던 날짜와 인원수대로, 최대 10개까지 저장이 가능합니다.	한번에 여러 상품을 결제 할 수 있으며, 예약자 정보를 로그인한 유저의 정보에서 가져와 저장합니다.

예약내역 페이지	결제확인 페이지
결제를 진행했던 숙박 상품들을 모두 조회할 수 있습니다.	결제를 성공적으로 진행한 상품의 목록을 확인할 수 있습니다.

🛢️ Stack

🛠️ Tools

🤝 Communication

🎨 Frontend Stacks

Git Branches

• main: 배포용 브랜치
• develop : 개발용 브랜치
• feature/~~ : 개별 개발용 브랜치

❗ 필수 구현 사항

✅ 회원 인증

• 회원가입
• 로그인

✅ 상품 조회

• 전체 숙박 상품 목록 조회
• (옵션) 카테고리를 임의 생성하여 분류하여 출력
• 개별 숙박 상품 상세 소개

✅ 상품 선택 및 장바구니 담기

• 숙박 상품 옵션 선택
• 장바구니 담기
• (또는) 바로 결제하기

✅ 장바구니

• 장바구니 보기
• 장바구니에서 주문하기 버튼 클릭 시, 예약(주문) 페이지로 이동

✅ 예약(주문) 하기

• 만 14세 이상 이용 동의 (상세 설명서 X, 체크박스로만 간단히 처리)
• 결제하기 버튼 클릭 시, 상품을 주문한 것으로 처리 (별도 결제 로직 없음)
• 결제 성공 시 주문 결과 출력

✅ (옵션) 주문 내역 조회

• 별도 주문 내역 페이지를 통해 주문 내역 확인

❕ 프론트엔드 기능적 요구사항

✅ 사용자 인터페이스 예시를 참고하여, 화면을 구성합니다.

✅ API 명세에 따라 백엔드에 전달된 JSON 데이터를 필요에 따라 정돈하여 화면에 출력합니다.

✅ 프론트엔드단에서 유효성 검사를 수행해야하는 지점을 고려합니다.

✅ React.js 또는 Next.js를 기반으로 구현하며, 컴포넌트 단위로 구조를 설계합니다.

✅ (옵션) 페이징 처리 시, 무한 스크롤을 고려합니다.

💻 커밋 컨벤션

Code	설명
✨ Feat	기능 개발
♻️ Refactor	리팩토링, 개선 코드 작성 - 수정 이유와 수정 내역
🐛 Fix	버그 수정 - 수정 이유와 수정 내역
📝 Docs	문서 작성 및 수정
🎨 Style	디자인(ui) 관련된 커밋
✅ Test	테스트 코드 작성 및 수정
📌 Setting	개발 환경 설정
📦 Chore	단순한 작업 (예: 파일 경로)

🚩 Script

Development Mode

$ git clone https://github.com/FAST-gamsungcoding/FE_MiniProject.git
$ npm i
$ npm run dev

🧑🏻‍💻 회고록

박준규

지난번 토이2 프로젝트까지만 해도 사실 학습이 아닌 완성에만 급급하여 '쉬운 역할', '간단한 것', '내가 지금 할 수 있는 역할'만 고집하다보니, 항상 프로젝트가 끝나는 시점에서는 뿌듯함과 성취감보다는, 앞으로 다가오는 미니프로젝트와 파이널 프로젝트에 대해서 새로운 것에 대한 막연한 두려움만 앞섰습니다.

하지만 이번 프로젝트를 통해서 기나긴 7개월 과정동안에서 제일 많은 성장을 이뤄내지 않았을까 싶습니다. 슬럼프에 빠져있던 저에게 따뜻한 조언을 아껴주지 않으신 매니저님, 자신감 결여에 빠져있던 저에게 팀장이라는 역할을 수행할 수 있게끔 진심을 다해 응원해주며 함께해준 팀원들 덕분에 7월부터 지금까지의 그 어느때보다도 열정적인 자세로 프로젝트에 임할 수 있었지 않았을까 하는 생각에 감사함을 전달하고 싶습니다.

사실, 새로움에 주저하던 저에게 있어서 여러 프레임워크나 라이브러리는 그저 '프로젝트라는 급한불을 끄기 위한 도구' 그 이상, 그 이하도 아니었습니다. 하지만, 팀원들과 함께 이번 프로젝트의 기초 빌드와 컨벤션들부터 하나하나 함께 지정하며 "이걸 왜 사용하는걸까?", "왜 이렇게 지정해야 할까?" 라는 질문과 같이, 제 스스로에게 "why"라는 질문을 통해 항상 '근거'가 뒷받침 되어야 함은 물론, 더 나아가 프로젝트를 완수함에는 항상 주인의식을 가지고 있어야한다는 것을 배울 수 있었던 정말 소중한 경험이었다고 생각합니다.

끝으로 프로젝트의 마무리까지 서로에게 힘이 되어주며 마찰없이 성공적으로 끝맺을 수 있도록 도와준 프론트팀원분들과 백엔드 팀원분들, 그리고 무너질 듯 위태롭던 저에게 용기를 복돋아준 패캠 매니저님들께 감사하다는 말씀 드리고 싶습니다.

박가현

컴포넌트 설계를 어떻게 할 것인지, 어떤 기술 스택을 사용할 것인지 그 과정속에서 팀원들과 논의하고 고민하는 시간들이 저에게 큰 도움이 되었습니다. 다만 기술적인 부분에서 Suspense를 적용하지 못한 점, 세세하게 에러처리 하지 못한 점이 아쉬움을 남지만 어떻게 코드를 짜야 할지, 어떤 게 좋은 코드인지에 대한 생각을 하게 되어 더 성장할 수 있었던 것 같습니다.

배경규

이번 프로젝트에서, Next.js를 3번째 사용하면서, 전에 프로젝트에서 사용했던 이유는 '단순히 현업에서 많이사용해서', '요즘 트렌드' 라는 이유로 사용했더라면 이번에는 next를 선택해야 하는 이유를 생각하고 만들었기에 앞서서 만들었던 프로젝트보다 next에 대해 좀 더 많이 알아가게 되고, 고민하는 시간들이 컸던 것 같습니다. 평소에 생각만 하던 컴포넌트 단위를 어떻게 쪼갤것인가에 대해서도 팀원들과 깊게 이야기를 나누었고, 이것도 단순히 이유 없는 코딩이 아닌 왜 필요한지 어떻게 해야하는지 팀원들과 소통했기에 기억속에 가장 남았고 많은 부분에서 성장한 것 같습니다

서예빈

미니 프로젝트를 통해 API, Recoil, Postman 등등 접해보지 못한 언어, 툴, 기술 등을 사용해 볼 수 있어 좋았습니다. 팀 회의를 통해 서로에게 끊임없는 "Why?"를 던지고 기획 단계부터 기술 스택을 고르는 과정까지 무엇 하나 배움이 없는 길이 없었습니다. 백엔드와 협업 과정을 통해 서로의 입장을 이해하고 의견을 조율하는 방법 또한 익혔습니다. 이를 통해 웹 서비스가 어떻게 만들어지고 유지가 되는지에 대한 전체적인 그림을 그릴 수 있게 된 거 같습니다. 또한 좋은 팀원들을 만나 "시너지 효과가 무엇인지"에 대해 깨달을 수 있었으며 서로에게 좋은 자극이 되어 같이 성장해 나갈 수 있었습니다.

최선파

리액트 쿼리, 리코일 등 처음 다뤄보는 기술스택으로 로직을 짜는 데에 미숙한 점이 있어 아쉬움이 남는 프로젝트였습니다. 하지만 동시에 컨벤션의 힘에 대해 다시금 깨닫게 되는 프로젝트였습니다. 팀원들과 함께 공들인 컨벤션은 협업에서 원활한 의사소통을 도와주었고, 팀원들간의 관계형성에도 큰 도움이 되었습니다. 2주라는 짧은 시간이었지만 새로운 기술스택을 배우고, 좋은 인연도 얻은 후회없는 시간이었습니다.

🧑🏻‍💻 개발 기간

15일 23.11.17 금 ~ 23.12.01 금