35기 2차 프로젝트 "Oil Of Yats"

1. 프로젝트 소개

1-1. 프로젝트 개요

• 프론트엔드 개발자 4명, 백엔드 개발자 3명이 팀을 이뤄 커머셜 예약 사이트를 구현하는 프로젝트.
• 2주라는 제한된 기간내에 완성하기 위해 기능 구현에만 집중하고 디자인 및 기획적인 요소는 기존 사이트를 참고하여 진행.

1-2. 스테이폴리오 웹사이트 선정 이유

먼저, 스테이폴리오 사이트는 서비스에 만족했던 예약사이트로 개인적으로 구현해보고 싶은 마음에 팀원들에게 추천한 사이트입니다. 타사 예약 사이트대비 과도한 css 요소가 없어 기능구현에 더 집중할 수 있고, 지도/소셜로그인/달력/모달창 등 다양한 라이브러리를 경험해볼 수 있습니다. 또한, 입점문의라는 기능을 활용하여 유저가 자신의 숙소를 추천하고 등록이 완료되면 리스트에 출력되게끔 하는 기능 구현을 하고 싶어 선정하게 되었습니다.

---

2. 작업기간, 사용기술 소개

작업기간

8월 1일 ~ 8월 12일

사용기술

• Front-end: HTML, Javascript, React, Styled Components

• Back-end: Phython, Django, MySQL, AWS-RDS S3

  ---

3. 팀원 소개 및 분담 역할

3-1. FRONT-END

길현민: Stay 리스트 페이지

김수정: Stay 상세페이지

주원영: 입점문의 페이지, 네비게이션 바 & 푸터, Room 상세페이지

최재홍: 소셜 로그인&회원가입, 외부 지도 API 구현, 마이페이

3-2. BACK-END

홍현진: 입점문의, 좋아요, 예약하기, 마이페이지

성바울: 카카오 소셜로그인, 메인페이지

이정훈: Stay 리스트, Stay 상세, Room 상세 페이지

---

4. FRONTEND 필수구현 기능

4-1. 로그인&회원가입

4-2. Stay 리스트 페이지

4-3. Stay 상세 페이지

• Stay Detail (Stay 상세) 페이지 레이아웃 구성
• useEffect를 사용하여 Stay list 페이지에서 선택한 숙소의 상세페이지로 이동이 가능하도록 구현
• 백엔드 API 통신으로 나타내야 하는 그림과 글 구현
• 라이브러리를 이용한 무한 루프 캐러셀 기능으로 숙소 이미지 표현
• 날짜 선택 시, 라이브러리를 통해 달력 기능을 첨부
• 모달창으로 달력 기능을 첨부하였으며 원하는 날짜를 선택하여 해당 날짜를 표현하도록 구현

4-4. Room 상세 페이지

4-5. 마이페이지

4-6. 입점문의 페이지

• 입점 문의 페이지 레이아웃 구현
• FormData를 이용한 첨부 이미지 저장 및 API에 전송 기능 구현
• 반복되는 정보 입력란을 map함수를 통해 구현
• 모달창에서 룸 정보를 입력 후 submit 발생 시 룸의 모든 정보를 객체에 담아 저장하고, 룸 ui를 페이지에 띄우는 기능 구현
• 체크박스 체크 시 배열 형태로 객체에 저장, 체크해제시 배열에서 삭제하는 기능 구현.
• 모든정보 입력 후 입점문의를 요청하면 객체에 담긴 모든 정보를 formData 형식에 저장하는 로직 구현

4-7. 네비게이션 바 및 푸터

---

5. 프로젝트 협업 도구

1. Trello

• 기능 단위로 카드를 세분화하여 생성 => 프로젝트 진도 한눈에 파악
• Daily Stand Up 미팅 기록, Blocker 및 공유사항 기록
• API명세서 작성을 통한 프론트 백엔드 간의 작업 소통

2. Slack

• 팀원간의 실시간 소통 창구
• git hub 알림 연동

---