이제 실제로 숙소 데이터에 필터를 적용해야겠다 앞서서 가격범위, 숙소유형 등 우리가 검색을 할 때 필요한 필터링한 부분을 state 에 저장하는 부분까지 다뤄보았다. 이제 우리가 어떠한 체크박스나 가격 범위등을 설정하면, 그에 따른 설정 값들이 useState 에 의해 저장되어있다. 뭐 침대는 몇개여야 하고, 침실은 몇개에, 개인실이어야 하며 최대 10만 미만인 등등.... 사실 원래 같았음, 이러한 조건들을 한데 모아서 최종적으로 검색 버튼을 클릭할 시 navigate 를 활용하여 URL 을 변경해주고, 메인페이지에서 변경된 URL 을 통해 백엔드 API 에 요청을 하게 되면 된다. 그러니깐 원래 계획은 그냥 사용자가 어떻게 필터를 하던 마지막에 가서 최종적으로 검색을 눌렀을 때의 필터값들을 전송하려고..
앞서서 가격 범위를 결정하는 부분에 대해서 살펴보았고, 이제 나머지 유형들을 필터하는 과정을 살펴보자. 숙소 유형 숙소 요형은 총 3가지로 나뉘게 된다. 전체를 아우르는 집 전체와 개인실, 다인실로 구현하였다. 다만 어떠한 숙소는 개인실로도 사용이 가능할 것이고 다인실로도 사용이 가능하게 된다. 따라서 중복 체크가 될 수 있도록 해야하고, 필터링 결과는 체크된 조건들을 모두 포함하는 숙소를 나타내야 할 것이다. 기존 에어비엔비 사이트의 필터창과 동일하게, 그리고 가장 직관적인 표현방법은 역시나 체크박스를 이용하는것이다. 체크박스는 실제로 로서 구현할 수 있었지만, 위에서 metarial UI 를 활용하였으니 이번에도 같은 라이브러리를 사용해보기로 하였다. 연습할겸 편리하기도 하니 사용하는 게 좋을것이라 ..
갑작스럽게 일들이 많아져서 작성이 좀 늦어졌다. 조금만 시간이 지나도 다시 가물가물해지는게 내 기억력의 한계인가 싶기도 하고, 원래 다 이런건가 스스로에게 위안을 삼아본다. 검색바를 클릭함에 따라 2가지의 형태로 나뉘게 되는 Nav 이전 글에서 이미 확인을 하셨겠지만, 다시 사진을 참조하자면 아래와 같다. 원래 에어비엔비 사이트가 어떤식으로 Nav 가 형성되어있는지 까지는 모르겠다. 에어비엔비 사이트에서는 마치 검색창을 클릭할 시 가운데 검색바가 확대되면서 밑 Nav 처럼 변하는 식으로 되었는데, 시간도 부족하고 아직 방법을 잘 모르겠어서 나의 경우는 opacity 의 변화로 부드럽게 전환되도록 표현하였다. 파일은 2가지로 컴포넌트를 나누어 놨는데, 상위 Nav 컴포넌트에서 조건부 랜더링을 하지 않고, ..
지난 시간에 이어서 상단 유저 프로필 모달창에 대해서 다루고자 한다. 전체 코드를 리뷰하여, 왜 이렇게 코드를 작성하였는지, 또한 유지관리 측면이라는 점에서 어떤 방식이 더 유리할지 생각해보고자 한다. 보기 편한게 더 좋은 코드가 아닐까? 로그인이 되기 전 모달창과 로그인 이후 모달창은 각각 구성되는 선택 옵션에서 차이가 있기에, 따로 컴포넌트로 관리하였다. 우선 로그인이 되기 전 모달창을 살펴보자면 const ProfileContainer = ({ setProfileModal, switchModal, }) => { return ( setProfileModal(false)} /> e.stopPropagation()}> 로그인 회원가입 숙소 호스트되기 체험 호스팅하기 도움말 ); }; export defa..
추후에 두가지로 상태가 변하는 Nav 에 대해서 다루겠지만, 그 전에 어떠한 상태에서든지 우측 상단에는 프로필 버튼이 있다. 추후 로그인을 할때나 로그아웃, 마이페이지, 혹은 예약상태 등등 추가기능이 구현될 경우 navigate 를 걸어줘야 하기 때문에 당연히 만들었어야 했고, 로그인 상태와 비 로그인 상태에 따라 생성되는 모달창 역시 컴포넌트로 나누어서 구성하였다. 고려해야 할 점은 모달창이 열리고 닫히는 것과, 2가지 다른 모달창이 구별되어 나와야 하는 점이다. 더 좋은 방법이 있을 것 같지만, 당시에 생각했을 때는 2가지의 nav 형태에서 모두 버튼에 모달창이 연결되어있어야 하고, 같은 state 변화로 관리를 하는게 효율적이라 판단했다. 그래서 크게 나눠보면 profileModal : 네이밍을 좀..
왜인지 모르겠지만, 코드를 짜다보면 어느순간 아무것도 진행이 되지 않은 시기가 온다. 이번 프로젝트에서 가장 당황하였던 것은 그 시기가 프로젝트 시작부터 찾아와버렸다는 점이다. 지친거였을까.. 시간은 흘러가는데 무엇인가 하고 싶진 않은 마음을 진정시키려 하는데, 에어비엔비 검색창을 보니 조급함만이 살아나버렸다.. 적어도 지금까지 만들어온 nav 와는 사뭇 다른 느낌이었다. 동적이면서도 절제된듯한 UI 에 놀랍기도, 욕심도 나기 시작했다. (근데 왜 의욕이 안생기는거지). 사라진 의욕만 돌아와 준다면 좀 더 재미있게 작업할 수 있을 것 같은데! 왠지 비슷하게라도 구현하지 못할거 같은 느낌때문에 시작을 못하는게 아닐까 생각이 들어서, 동기들도 열심히 하는데 이리저리 생각만 하지말고 일단 시작하자라고 굳건히 ..
