메인슬라이더 : 이미지슬라이드 기능(버튼을 눌렀을때와 onMouseDown과 onMouseUp시 현재 마우스의 좌표값을 계산하여 이미지를 드래그했을때 좌우로 슬라이드됩니다) 이벤트/프로모션 슬라이드 : 데이터를 받아와서 마감시간과 현재시간을 계산하여 d-day 순으로 정렬하고 d-day를 화면에 보여주었습니다. 최대한 기존사이트와 똑같게 만들어 보려고 노력하였습니다.
처음 메인페이지 및 검색 api 구현을 시작할때는 뭐부터 어떻게 시작해야할지 막막했지만 팀원들과 매일매일 지금까지 구현한것 구현할것 등을 소통하면서 미쳐 생각지도 못했던 부분을 알 수 있었고, 특히 findstay 페이지의 front를 맡으신 광현님과 뭔가 하나 생길때마다 계속해서 소통하면서 문제를 하나씩하나씩 해결할 수 있었고, 협업의 중요성을 느낄 수 있었습니다.
[추후 개선하고 싶은 부분] 마지막 슬라이드에서 다음으로 이동 시 바로 첫번째 슬라이드를 보여줄 수 있도록 개선 더 효율적인 필터링 방식이 있는지 개선
숙소 상세페이지(naver-map-api : 위도경도 데이터 사용하여 개선 필요) 룸 상세페이지, calendar 컴포넌트(reservation 적용)
개발과정(과정 중의 어려움) 먼저 프론트 개발초기에는 스테이폴리오와 최대한 같은 레이아웃 틀을 만드는 데 집중했고 그 이후 컴포넌트로 슬라이더를 구현 했는데 roomsilder는 또 약간 변형된 silder 라서 슬라이더 컴포넌트에서 props를 받아 silder 컴포넌트를 커스텀 할 수 있게 구현했습니다. 이 후 데이터를 get 할때에는 처음 상세페이지에서 데이터를 패치하고 하위컴포넌트들에게 데이터를 뿌리는 과정인데 (ex) detailpage -> slider -> silde 이런식으로 넘기고 넘기는 방식을 이용해서 약간의 혼동을 겪었습니다.
일단, 방금 이야기한 내용처럼 props를 넘기는데 있어 혼동이 발생할 때에는 지나가면서 본거라 확실하진 않지만 라우터.js 쪽에서 전역으로 뿌려줄 수 있는 기능이 있었던거 같은데 공부해봐야 할 것 같습니다. checkin,checkout 날짜를 Page 이동마다 넘겨 받는 부분이 필요하고 calendar 컴포넌트에서 처음에는 checkin~checkout 날짜로 예약이 되 있다는 것을 나타내 줬는데 실제로는 checkout 날짜에 checkin을 할 수 있고 check in 날짜에도 check out 할수 있으니까 그 부분 logic을 잘 연구해서 구현해 봐야 할 것 같습니다. 더하여, 중간중간에 각자 개발한 내용을 머지하면서 눈으로 직접 확인하며 의견을 나누는 것 그리고 매일 정해진 시간에 짧은 시간이라도 간단하게 회의를 하며 의견을 공유 하는 것 이 정말 중요하다고 느꼈습니다. 그날 그날 개발에 집중하면서도 “아 이 부분이 필요하겠구나!, 이 부분이 부족하겠구나” 생각이 들 때 바로 다음날 피드백을 할 수 있어 잊지않고 바로 얘기해 볼 수 있고 나중에 실수로 다시 롤백하는 일도 줄어드는 것 같습니다.
Find 페이지 필터기능, stay컴포넌트 image slide, 동적 라우터, bidirectional input rage, pagination, header, date-modal, location-modal
코드의 재사용성을 높이기 위해서 children에 대해서 공부하였고, 이전에는 Link와 useNavigate를 이용해서만 url값을 동적으로 변경했었지만 이번 프로젝트를 통해서 urlSearchParams, useSearchparams를 공부하여 사용했고, 실제 stayfolio페이지와 동일한 동적 라우팅을 구현할 수 있었음. 개발자가 아닌 실제 사용자의 시선에서 UI/UX 적인 면을 고려하여 사용자의 편의성을 높이기 위해서 많이 고민했고, 그 결과 실제 클론프로젝트의 대상이었던 Stayfolio 페이지에서 다수의 버그 발견. 그리고 backend를 맡으신 상민님과의 협업을 통해서 실제로 backend 개발자와의 협업, 소통은 이렇게 하는 것이구나 느낌으로서 개발에 대한 흥미를 더 가질 수 있었음.
[추후 개선하고 싶은 부분] 코드의 재사용성 증가, 코드의 가독성 증가, search 기능 추가, pagination을 프론트단에서 구현하는 것이 아닌 backend와의 date-fetching으로 구현하고싶음.
Footer, Login/Signup
먼저 이전 수업때 로그인 수업이 있어서 무난할줄 알았는데, 갈수록 어려워졌고, 특히 수업중에 token을 깊게 여겨보지를 않아 token의 개념이 뭔지 몰라 헤매대가 팀원들 덕분에 알게 되었고 로그인해서 token 까지 받는 것은 어렵지 않았으나 로그인시 실패 했을때 백엔드에서 프론트로 statusCode를 다시 보내는 것이 무척 힘들었습니다. 깃을 통한 협업을 처음해보는 저로서는 정말 신기한 기능이었습니다. 팀원들과 함께 각자 브랜치를 나누고 그것을 하나로 묶고 하는등을 통해 많이 배웠고 특기 프리티어가 있어서 처음에는 공백이 있어서 에러나고 또 붙였다고 에러나고 이러는 것이 불편했으나 이것을 통해 깃에서 묶었을때 에러가 나지않는다는 것을 알고 정말 중요하다는 것을 알았습니다. 앞으로 더 배워 더 많은 것을 이루겠습니다.
[추후 개선하고 싶은 부분] 코드의 재사용성 증가, 코드의 가독성 증가, search 기능 추가, pagination을 프론트단에서 구현하는 것이 아닌 backend와의 date-fetching으로 구현하고싶음.
Reservation page
깃을 통해 협업을 해보는 경험이 너무나 소중했던 것 같습니다. 팀원들과 함께 각자의 브랜치를 나누고 하나의 메인 브랜치로 통합, 그것을 머지하고 풀 하는 과정에서 여러가지 난항을 겪었고 그것을 해결하는 과정에서 많이 성장했습니다. 앞으로는 깃을 통해 협업하는 과정에서 어떠한 문제든 해결할 수 있을 것 같습니다.
[추후 개선하고 싶은 부분] 프론트 - 예약페이지 부분에서 다른 분들이 작업한 달력에서 현재 유저가 선택한 날짜가 예약 페이지에 그대로 들어가게 했으면 좋겠다. 그러나 이 부분은 전역 상태관리를 사용해야 하므로, 전역 상태 관리를 배워서 도입해보고 싶다.