사실 1차 프로젝트가 끝나고 주말에 어느정도 전체적으로만 정리해놓고 바로 2차 프로젝트가 시작되면서 신경을 못쓰다가 이제서야 다시 정리해서 글 작성을 해보았습니다.
📌 프로젝트 소개
STAYFOLIO 는 숙박 사이트로 국내 뿐만 아니라 해외 숙박 시설을 예약할 수 있는 사이트 이다. 단순히 숙박 시설을 보여주고 예약하는게 아닌 각 숙박시설의 스토리들을 큐레이팅하여 정보를 제공하는 사이트 입니다. 이러한 사이트를 클론하는 프로젝트 입니다.
-
개발 기간 : 2022-06-20 ~ 2022-07-08
-
개발 인원 : 5명(프론트, 백 각각 하나씩 맡아서 진행)
-
기술 스택
프론트엔드(React, Javascript, HTML, SCSS)
백엔드(NodeJS, ExpressJS, MySQL, Prisma)
📌 프로젝트 진행과정
📝 역할 배분
- 기존
- Main페이지 - 상민
- 회원가입/로그인/footer - 관희
- Find페이지/Nav - 광현
- Detail페이지 - 상현
- Reservation 페이지 - 재훈
- 개선
- Main페이지 - [F]상민, [B]광현
- 회원가입/로그인/footer - [F],[B]관희
- Find페이지/Nav - [F]광현, [B]상민
- Detail페이지 - [F]상현, [B]재훈
- Reservation 페이지 - [F]재훈, [B]상현
첫 역할 배분때는 일단은 첫 프로젝트이기도하고해서 프론트와 백을 둘다 경험해보면 좋겠다고 의견이 모아져서 각자 맡은 페이지의 프론트와 백을 담당하기로 했었습니다. 하지만 프로젝트를 진행하던 중 이렇게하면 둘다 경험은 해볼수있지만 프론트와 백 간의 소통 부분을 경험해 볼 기회가 없다고 생각하여 기존의 역할배분에서 개선하여 역할배분을 하게 되었습니다.
📝 DB 모델링
아무래도 첫 프로젝트이다보니 처음부터 한번에 되는건 없었습니다.
먼저 선정한 사이트를 같이 보면서 기능이나 구조에 대해서 전반적으로 이야기를 나눈 후 각자 모델링을 해본뒤 다시 모여서 각자가 해온 모델링을 상호보완하여 모델링을 완료하고 데이터 모델링 리뷰시간을 통해 다시 한번 개선하여 최종적으로 모델링을 완료 하였습니다.
테이블에 데이터를 넣는 부분은 각자 몇개의 데이터를 정해서 만들어 온 후 취합해서 한번에 집어 넣을 수 있도록 하였습니다.
📝 개발
📒 [F][B] 메인 페이지
일단 제가 프론트엔드와 백엔드 부분을 맡은 메인페이지 같은 경우는 주로 슬라이드로 이루어져 있었습니다. 아무래도 메인페이지이다보니 최대한 시각적으로 기존의 스테이폴리오 사이트와 최대한 똑같이 만들어 보자는게 목표였습니다.
메인 슬라이더 같은 경우에는 버튼 뿐만 아니라 마우스를 끌어서 넘어갈 수 있도록 구현하였고, 프로모션과 이벤트 슬라이더의 경우에는 현재 시간을 기준으로 몇일 남았는지 오른쪽 상단에 보여주었고 얼마 남지 않은 순으로 정렬하고 이미 끝난 이벤트나 프로모션에 대해서는 closed로 표시해주면서 가장 마지막순으로 데이터를 정렬하여 보내주었습니다.
📒 [B] FIND 페이지
FIND STAY 페이지의 경우에는 프론트를 담당한 광현님이랑 파인드스테이 페이지의 검색 기능에 대해서 많은 소통을 하면서 진행하였습니다.
먼저 숙소의 각각의 방에대해 체크인 체크아웃날짜,최대인원,가격범위에 대해 예약가능한 방을 필터링하였고, 그 방이 속해있는 숙소들의 지역,스테이유형,테마에 대해 다시 한번 필터링하였고 높은가격순 or 낮은가격순 정렬을 할 수 있도록 구현하였습니다. 또한, 페이지당 4개씩 보여줄 수 있도록 다음과 같이 해주었습니다.
LIMIT 4 OFFSET ${
(page - 1) * 4
}검색의 경우에는 숙소 단위이지만 예약의 경우에는 해당 숙소의 방단위 이기 때문에 원하는 예약날짜에 대해서 예약 가능한 방이 하나라도 있다면 그에 맞는 가격과 인원과 같은 데이터를 보내주었습니다.
이번 프로젝트는 아무래도 첫번째 프로젝트이다보니 앞선 2달동안 배웠지만 막상 프로젝트를 시작하니 어떻게 시작해야하는지 어디서부터 시작해야하는지 처음에는 거기서부터 막혔던 것 같고 제가 하고 있는게 맞게하고있는건지 틀리게하고있는건지 조차 헷갈렸던것 같습니다. 하지만 팀원들과 소통하면서 실마리를 찾을 수 있었고 해결되지 않는 문제를 만날때마다 직접 찾아보면서 문제를 해결하면서 그 부분에서 흥미나 재미를 느낄 수 있었던 경험이였습니다.
