👩‍🌾 촌캉스 연결 플랫폼 '촌스럽게'👨‍🌾

[ 촌스럽게 URL ] [ 촌스럽게 PPT ] [ 촌스럽게 시연영상 ]

📚 프로젝트 소개

• 촌스럽게는 촌캉스를 원하는 게스트와 호스트를 연결해주는 사이트입니다.
• 촌캉스 숙소들의 정보를 검색할 수 있고 확인할 수 있습니다.
• 숙소예약 신청시 게스트와 호스트에게 각각 알림톡을 보냅니다.
• 알림톡의 버튼url로 이동해 게스트와 호스트가 예약 현황을 확인하고 관리할 수 있습니다.

👨‍🏫 팀원 구성

손근영 팀장	권혜진 팀원	박정선 팀원
@daabaat	@zinee81	@jeongsun-park
프론트 엔드	백 엔드	UI/UX 설계 및 디자인 웹 퍼블리싱

🗓 개발 기간 및 작업 환경

개발 기간

• 전체 개발 기간 : 2024.11.04 ~ 2024.11.27
• UI/UX 설계 및 디자인 : 2024.11.06 ~ 2024.11.15
• 웹 구현,개발 : 2024.11.11 ~ 2024.11.22
• 백엔드 개발 : 2024.11.13 ~ 2024.11.22
• 배포 및 오류 수정 : 2024.11.22 ~ 2024.11.27

작업 환경

• 아침 회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 Notion에 회의 내용을 기록했습니다.

📝 개발 환경

📝 사용한 기술과 브랜치 전략

react-calendar

• react-calendar는 날짜와 달력을 쉽게 구현할 수 있게 도와주는 라이브러리입니다.
• 게스트가 특정 날짜를 선택하여 숙소를 검색할 수 있고 예약신청을 할수있는 기능을 구현하는데 사용했습니다.

react-loading-skeleton

• react-loading-skeleton은 로딩 상태를 시각적으로 표현하는 라이브러리입니다.
• 페이지 로딩 중이나 데이터를 기다리는 동안, 사용자에게 로딩 상태를 보여주기 위해 사용했습니다.

react-paginate

• react-paginate는 페이지 네비게이션을 구현하기 위한 라이브러리입니다.
• 숙소 검색하기를 했을시 나오는 결과들을 화면에 나누어 출력하기 위해 사용했습니다.

react-router-dom

• react-router-dom은 React 애플리케이션에서 클라이언트 사이드 라우팅을 처리하기 위한 라이브러리입니다.
• 랜딩페이지에서 새로고침 하지않고 회원가입,로그인 페이지들과 동적으로 전환하기위해 사용했습니다.

sweetalert2

• sweetalert2는 웹 애플리케이션에서 아름답고 사용자 친화적인 알림을 제공하는 라이브러리입니다.
• 사용자에게 중요한 알림이나 경고 메시지를 표시하기 위해 사용되었습니다.

swiper

• swiper는 터치 및 모바일 친화적인 슬라이더 라이브러리입니다.
• 랜딩페이지의 추천 숙소들과 숙소를 클릭했을시 나오는 상세정보 모달창에서 숙소의 이미지들, 그리고 숙소의 리뷰들을 동적으로 출력하기위해 함께 사용되었습니다.

브랜치 전략

• main , front_develop , node_develop
• front_develop과 node_develop에서 프론트엔드와 백엔드 작업을 독립적으로 진행
• main에 통합하여 배포 준비

🖥 프로젝트 구조

📦src
 ┣ 📂api
 ┃ ┣ 📜accommodationReservation.js
 ┃ ┗ 📜accommodationSearch.js
 ┣ 📂assets
 ┃ ┗ 📜react.svg
 ┣ 📂components
 ┃ ┣ 📂CardSkeleton
 ┃ ┃ ┣ 📜CardSkeleton.jsx
 ┃ ┃ ┗ 📜CardSkeleton.module.css
 ┃ ┣ 📂Footer
 ┃ ┃ ┣ 📜Footer.jsx
 ┃ ┃ ┗ 📜Footer.module.css
 ┃ ┣ 📂Header
 ┃ ┃ ┣ 📜Header.jsx
 ┃ ┃ ┗ 📜Header.module.css
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂Faq
 ┃ ┃ ┃ ┣ 📜Faq.jsx
 ┃ ┃ ┃ ┗ 📜Faq.module.css
 ┃ ┃ ┣ 📂List
 ┃ ┃ ┃ ┣ 📂SwiperChonList
 ┃ ┃ ┃ ┃ ┣ 📂ChonCard
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ChonCard.jsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜ChonCard.module.css
 ┃ ┃ ┃ ┃ ┣ 📜SwiperChonList.jsx
 ┃ ┃ ┃ ┃ ┗ 📜SwiperChonList.module.css
 ┃ ┃ ┃ ┣ 📜List.jsx
 ┃ ┃ ┃ ┗ 📜List.module.css
 ┃ ┃ ┣ 📂Search
 ┃ ┃ ┃ ┣ 📂AccomSearch
 ┃ ┃ ┃ ┃ ┣ 📜AccomSearch.jsx
 ┃ ┃ ┃ ┃ ┗ 📜AccomSearch.module.css
 ┃ ┃ ┃ ┣ 📜Search.jsx
 ┃ ┃ ┃ ┗ 📜Search.module.css
 ┃ ┃ ┗ 📜Main.jsx
 ┃ ┣ 📂Modal
 ┃ ┃ ┣ 📂icon
 ┃ ┃ ┃ ┣ 📜map-pin.png
 ┃ ┃ ┃ ┗ 📜users.png
 ┃ ┃ ┣ 📜customSwiper.css
 ┃ ┃ ┣ 📜Modal.jsx
 ┃ ┃ ┗ 📜Modal.module.css
 ┃ ┣ 📂ModalCalender
 ┃ ┃ ┣ 📜StyledCalender.css
 ┃ ┃ ┗ 📜StyledCalender.jsx
 ┃ ┣ 📂SearchCalender
 ┃ ┃ ┣ 📜SearchCalender.css
 ┃ ┃ ┗ 📜SearchCalender.jsx
 ┃ ┗ 📂TopButton
 ┃ ┃ ┣ 📜TopButton.jsx
 ┃ ┃ ┗ 📜TopButton.module.css
 ┣ 📂context
 ┃ ┗ 📜AuthContext.jsx
 ┣ 📂hooks
 ┃ ┗ 📜useQueryRemover.js
 ┣ 📂pages
 ┃ ┣ 📂GuestResve
 ┃ ┃ ┣ 📜GuestResve.jsx
 ┃ ┃ ┗ 📜GuestResve.module.css
 ┃ ┣ 📂HostResve
 ┃ ┃ ┣ 📜HostResve.jsx
 ┃ ┃ ┗ 📜HostResve.module.css
 ┃ ┣ 📂HostResveList
 ┃ ┃ ┣ 📂ReservationItem
 ┃ ┃ ┃ ┗ 📜ReservationItem.jsx
 ┃ ┃ ┣ 📜HostResveList.jsx
 ┃ ┃ ┗ 📜HostResveList.module.css
 ┃ ┣ 📂Login
 ┃ ┃ ┣ 📜FormGroup.jsx
 ┃ ┃ ┣ 📜FormHeader.jsx
 ┃ ┃ ┣ 📜Login.jsx
 ┃ ┃ ┣ 📜Login.module.css
 ┃ ┃ ┣ 📜LoginForm.jsx
 ┃ ┃ ┗ 📜ResisterTag.jsx
 ┃ ┗ 📂Register
 ┃ ┃ ┣ 📜CheckboxGroup.jsx
 ┃ ┃ ┣ 📜FormGroup.jsx
 ┃ ┃ ┣ 📜Register.jsx
 ┃ ┃ ┣ 📜Register.module.css
 ┃ ┃ ┣ 📜RegisterForm.jsx
 ┃ ┃ ┗ 📜RegisterFormHeader.jsx
 ┣ 📂utils
 ┃ ┗ 📜AlertUtils.js
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx

✨ 구현 기능

회원가입 · 로그인

• 회원가입과 로그인을 할수있다.
• 알림톡을 보내기위한 정보수집을 위해 회원가입 기능을 넣었습니다.

숙소 검색

• 지역, 체크인, 체크아웃, 인원수로 숙소를 검색할 수 있습니다.

알림톡

• 숙소 상세정보에서 게스트가 예약신청을 누를시 호스트와 게스트에게 알림톡을 보냅니다.
• 호스트는 받은 알림톡의 url을 눌러 예약 정보를 확인하고 승인 or 거절을 할 수 있습니다.
• 게스트는 받은 알림톡의 url을 눌러 예약 정보를 확인하고 예약 취소를 할수있습니다.
• 승인시 게스트에게 승인 알림톡이 날아가고 호스트와 게스트는 예약 정보창에서 서로의 이름 or 전화번호를 확인할 수 있습니다.
• 거절시 게스트에게 거절 알림톡이 갑니다.

🏃‍♂️ 추후 개발 예정

지도 API 추가

• 상세 정보창에 지도를 추가하거나 알림톡을 이용해 게스트에게 숙소의 위치를 지도로 보내주고 싶습니다.

게스트 후기 작성

• 현재 사이트는 더미데이터로 후기를 채워넣었습니다.
• 추후 실제 게스트들이 숙박한뒤 후기를 작성할 수 있는 기능을 개발하여 실제 후기를 볼 수 있도록 하고싶습니다.

호스트 / 게스트 마이페이지

• 본인의 가입정보 수정과 예약 정보를 확인하고 관리할 수 있는 페이지를 만들고 싶습니다.

관리자 페이지

• 사이트를 전체적으로 관리할 수 있는 관리자 페이지를 만들고 싶습니다.

🗨 프로젝트 자체평가 및 소감

📙 손근영

자체평가

프로젝트를 기획하면서 기능 구현이 가능할지 걱정했지만, 예상보다 순조롭게 진행되어 기획했던 모든 기능을 완성할 수 있었습니다. 특히, 추후에 개발 예정인 리뷰 작성 및 관리자 페이지 기능까지 추가된다면 실무에서도 충분히 활용 가능한 수준의 결과물이 될 것으로 보입니다.

소감

React를 활용한 첫 프로젝트를 진행하면서 다양한 라이브러리를 접하고 활용해 보는 과정에서 큰 성장을 경험했습니다. 특히, API 통신 개념에 대한 이해가 부족했던 제가 이번 기회를 통해 API를 직접 구현하고 사용하는 과정을 거치며 확실히 개념을 익힐 수 있었습니다.

또한, 백엔드 개발자와의 소통이 많았던 만큼 팀원 간 소통의 중요성을 깊이 깨닫게 되었습니다. 프로젝트 초반에는 일정에 대한 우려가 있었으나, 팀원들의 훌륭한 협업 덕분에 시간적으로 무리 없이 진행할 수 있었습니다. 이번 프로젝트는 기술적 성장 뿐 아니라 협업 능력의 중요성까지 배울 수 있었던 의미 있는 경험이었습니다.

📕 권혜진

자체평가

처음 랜딩 페이지를 시작할 때, 웹사이트와 달리 한 페이지에 모든 내용을 다 보여줘야 하고, 이목을 끌어야 한다는 점이 부담스러웠지만 페이지 디자인의 완성도가 높아서 충분히 이목을 끌 수 있다고 생각합니다. 그리고 처음에는 예약 기능을 구현할 수 있을지 걱정했었는데, 거의 완벽하게 구현된 것 같고 어려울 거라 생각했던 기능들이 대부분 잘 구현되어 완성도 높은 페이지가 제작된 것 같습니다.

소감

리액트를 배우고 한달 만에 다시 해야한다는 생각과 데이터베이스도 noSQL인 몽고DB를 처음 사용해서 이번 프로젝트를 시작할 때는 아무것도 모르는 상태가 된 것 같아 많이 힘들었는데 교수님께서 알려주시고 제가 힘들어하는 부분을 팀장님이 많이 구현해 주셔서 마무리 할 수 있었습니다. 특히 API를 만들고 사용하는 것에 대한 개념자체가 이해가 안되었었는데 이번에 API를 직접 만들어보면서 알 수 있게 되었습니다. 제 실력이 부족함을 많이 느낀 프로젝트였지만 팀원들의 노력들로 완성할 수 있어서 다행이고 제가 더 노력해야겠다고 생각했습니다.

📘 박정선

자체평가

처음 기획 단계에서 기존에 작업해왔던 페이지들과 랜딩 페이지의 차이점에 대해 많은 고민을 했습니다. 한 페이지 안에서 모든 것을 구현해야 한다는 점이 어려웠지만, 결국 디자인을 완성할 수 있었습니다. 그리고 오랜만에 React로 웹 퍼블리싱을 진행하게 되어 처음엔 조금 당황스러웠지만, 점차 익숙해지면서 작업을 마무리할 수 있었습니다. 그 과정에서 팀원들이 열심히 개발해 주셔서, 함께 협력하여 페이지를 완성할 수 있었습니다.

소감

첫 프로젝트보다 기획 단계에서 많은 고민을 했던 것 같습니다. 기획의 중요성을 깨닫고, 팀원들과 머리를 맞대어 다양한 고민과 토론을 거쳤습니다. 예상보다 시간이 소요되었지만, 덕분에 디자인과 기능 개발이 차질 없이 진행될 수 있었던 것 같습니다. 프로젝트 일정이 이전보다 타이트했기에 걱정도 많았지만, 팀원들과 지속적으로 소통하며 각자 맡은 일을 성실히 수행해 주셨기에 예정된 시간보다 빠르게 프로젝트를 마칠 수 있었습니다.