소개
전국 숙소 실시간최저가 예약사이트 여기어때를 모티브로 한 프로젝트입니다😊
프론트엔드와 백엔드가 협업해서 개발했고 저는 프론트엔드로 참여했습니다.
힘들기도 했지만 즐거웠고 배운 점도 많았던 프로젝트 회고 시작합니다!
- 개발 기간: 2022. 09. 19 ~ 2022. 09. 30(2주)
- 개발 인원: 프론트엔드 4인, 백엔드 2인
- GitHub: 프론트엔드 | 백엔드
- 회의록 및 티켓관리: 팀 Notion
목표
유형별 숙소 조회 및 검색, 다양한 옵션/날짜 선택 등 구현해본 적 없는 기능을 구현해본다.
사용해보지 않은 라이브러리(styled components, recoil)의 사용법을 익힌다.
기술 스택
Front-end : JavaScript, React.js, styled components, recoil
Back-end : JavaScript, Node.js, Express, bcrypt, JWT
Database : MySQL
HTTP : Postman
Common : Slack, Zep, Notion, Git&Github
주요 기능
로그인, 회원가입
- 카카오 로그인
- 이메일 로그인, 휴대폰 문자인증
마이페이지
- 포인트/ 쿠폰 조회
- 예약내역 조회 및 취소
- 내 정보 수정
메인페이지
- 유형별 숙소리스트로 이동
- 이벤트배너 캐러셀
유형별 숙소리스트
- 날짜선택
- 베드타입, 공용시설, 객실 시설 등 숙소유형에 따라 각각 다른 옵션 선택 가능
- 추천/낮은가격/높은가격/거리 순으로 리스트 정렬
- 지도에서 현재 위치 근처의 숙소 확인
검색페이지
- 검색어에 해당하는 숙소리스트 확인
- 추천/낮은가격/높은가격/거리 순으로 리스트 정렬
- 지도에서 현재 위치 근처의 숙소 확인
- 검색페이지에 해당하는 옵션 선택 가능
상세페이지
- 숙소 메인이미지 캐러셀
- 날짜, 인원선택
- 객실별 이미지 캐러셀
- 숙소 정보 및 리뷰 확인
예약페이지
- 상세페이지에서 선택한 날짜, 인원으로 예약
- 로그인 된 상태일 시 자동으로 예약자성함, 번호 입력
내가 담당한 기능(프론트엔드)
👉 메인페이지
1. 아이콘 클릭 시 유형별 숙소리스트로 이동
2. 이벤트 배너 무한자동 캐러셀
👉 Nav
1. 스크롤의 위치에 따라 Nav바의 색상 변경
2. 돋보기 아이콘 클릭 시 검색창 모달 구현
3. 추천 검색어 클릭 시 해당 검색어의 숙소리스트 페이지로 이동
4. 미입력 상태로 검색 시 입력요청 모달 구현
5. 얼굴 아이콘 클릭 시 마이페이지로 이동
6. 얼굴 아이콘 hover 시 나오는 모달로 마이페이지 세부 메뉴로 이동
👉 검색페이지
1. 입력한 검색어에 해당하는 숙소리스트 조회
2. 추천/낮은 가격/높은 가격/거리 순 정렬
3. 지도에서 현재 위치 근처의 숙소 확인
4. 검색페이지에 해당하는 옵션 선택
👉 예약페이지
1. 로그인이 되어있을 시 서버에 고객정보 요청해 예약자이름/전화번호 자동 입력, 포인트 조회
2. 상세페이지에서 선택한 날짜, 인원, 객실정보 확인
👉 Footer
1. Link 컴포넌트를 이용해 링크 연결
어려웠던 부분
🏅라이브러리 없이 구현한 무한-자동 캐러셀
지난 프로젝트에서 캐러셀을 만들어본 적이 있다.
그때는 무한캐러셀도, 자동캐러셀도 아니었기 때문에 이번에 구현한 캐러셀과는 많이 달랐다.
setInterval
//일정시간마다 count의 수를 변경해 캐러셀을 움직이는 코드
useEffect(() => {
const timer = setInterval(
() => {
setCount((prev) => (prev === 4 ? 0 : prev + 1));
},
count === 4 || count === 0 ? 0 : 2500,
);
return () => {
clearInterval(timer);
};
}, [count]);
//count에 따라 움직이는 캐러셀
<div
className='slide-box'
style={{
transform: count === imgArr.length + 1 ? '' : `translate3d(${-imgWidth * count + 'px'},0px,0px)`,
transition: count === 0 || count !== imgArr.length + 1 ? '1000ms ease-in' : '',
}}>후기
🔥새로운 기술에 대한 두려움에 맞서다
이번 프로젝트에서 처음으로 styled-components를 사용했다.
프로젝트 한번 해봤으니까 이번엔 수월하겠지~라고 생각했던 것은 착각이었다 ㅎㅎ
완전 처음 사용하는 기술이고 수업을 들은 적도 없어서 2~3일을 공부만 했다.
첫날에는 두려웠지만 구글링해가며 배우고, 적용하는 것까지 오랜 시간이 걸리지 않았다
(물론 팀원들의 도움이 있었다😁).이번 기회로 새로운 기술에 대한 두려움을 떨쳤던 것 같다.
이렇게 계속 부딪치고, 경험해가면서 더 많은 것을 배울 수 있을 것 같아서 기대된다!
🔥티켓관리를 어떻게 하는 것이 더 효율적일까?
지난 프로젝트에는 trello, 이번에는 notion으로 티켓관리를 했다.
확실히 느낀 것인데 notion은 전체적인 티켓을 관리하기는 힘든 것 같다.
개개인이 사용하긴 좋지만 전체적인 티켓의 상태가 바로 파악이 안된다.
더 좋은 협업 툴이 무엇이 있을 지 알아봐야겠다. Jira를 많이 쓰던데...!
🔥꾸준한 리팩토링
프로젝트가 마무리된 지 약 한 달 정도 됐다. 끝나고나서 바로 리팩토링을 하고싶었지만
계속된 과제와 수업으로 미뤄왔고, 수료 후 조금씩 코드를 되돌아보며 리팩토링을 하고있다.
그 때 당시에 나는 최선을 다해 작성했겠지만, 역시 수정할 부분이 보인다😂🤣
더 잘 하지 못한게 아쉽기도 하고 내가 성장하고 있기 때문에 보이는 거라고 생각돼
뿌듯하기도 하다. 그리고 무엇보다 역시 코딩하는 그 순간이 제일 재밌다👍
정말 열정을 다했고 즐겁게 임했던 프로젝트인 만큼 애정이 가서
계속 꾸준히 리팩토링해보려고 한다!!! 그게 또 다음 프로젝트의 밑거름이 되겠지 ㅎㅎ
궁금하신 점 있으시면 댓글 편하게 달아주세요!
