2차 프로젝트 - 에어비엔비 상단 검색창(1)

1차에 이어 2차 프로젝트도 되돌아 보면 첫 planning meeting 때 부터 의욕이 너무 앞서 나간편이었다. 이제 라이브러리를 활용할 수 있다는 생각에 들뜬 나머지 1주차 스프린트 계획을 좀 타이트하게 잡아버렸다. (아, 이번에도 PM 으로 선정되었다..)

그래도 Nav 컴포넌트 정도는 그렇게 어렵지 않겠지..?

---

역할 분담

첫 역할 분담을 나누기 위해 회의를 가지면서, 스스로한테 다짐했던 것은 이번에는 '기존 프로젝트때 많이 해보지 않은 기능'을 구현해보는 것이었다. 그렇게 1차 프로젝트 때를 떠올려보니, 크게 두가지 기능을 가진 컴포넌트 혹은 페이지가 나왔던 것 같다.

• 상단 Nav bar
• list page 와 detail page

어느 페이지를 담당해야 할지 고민이 생기는 찰나에 조원분께서 손을 드시더니, 상세페이지를 담당하겠다고 하셔서(놀랐다) 자연스럽게 이번 프로젝트에서는 navbar 를 담당해야겠다 마음먹고 허락을 구했다. 

내심 마음속으로는 이번 프로젝트는 좀 쉽게 갈 수 있으려나 싶기도 했다. 그리고 프로젝트를 진행해보니 왜 큰 회사들은 기능마다 팀을 꾸려서 작업을 하는지 간접적이나마 알게 된 경험이었다..

이게 아닌데..

구현된 상단 Nav

최종적으로 구현한 상단 navbar는 아래처럼 구현되었다.

화질이 좀 좋지 않아서 화면이 좀 겹쳐보이는데 실제론 그렇진 않고, 기본적으로 검색버튼 클릭시 새로운 nav 바를 연결한다.

첫 메인 화면에서 검색 버튼을 클릭 할 시, 새로운 navbar 가 형성된다. 이후 여행지, 체크인.아웃, 여행자를 필터로 하여 검색기능을 갖추고 있다. 화면에서는 나오지 않지만 오른쪽 상단 마이페이지 버튼을 클릭 시, 로그인이 되어있지 않다면 로그인 클릭이 가능하고, 로그인이 된 후에는 localstorage 에 토큰값을 저장해두었기에 이를 조건화 하여 마이페이지 모달창을 띄운다.

 

기존 에어비엔비 사이트에서 상단 nav 의 애니매이션 효과가 좀 더 멋있긴 하지만.. 나름 최선을 다해서 만들었다. 2주동안 모든걸 다 고려하면서 페이지를 만들기에는 좀 무리가 있었고, 적당히 타협을 봐야했다. 타협을 보면서 구현하고자 했던 기능들을 다시 정리하자면,

• 2가지의 다른 navbar 조건화 랜더링
• 지역, 체크인 및 체크아웃(달력 - datepicker 이용), 여행자 인원 필터 적용
• 로그인 여부에 따른 조건화 모달창 랜더링
• 그 외 외부클릭으로 모달창 닫기 등

이정도로 간추릴 수 있겠다. 컴포넌트부터 작업을 해야되겠다 생각해서 자식 컴포넌트부터 쭉 올라가서 최종적으로 Nav 컴포넌트에 취합되도록 설정하고자 계획하였는데, 짜다보니 최종적으로 아래와 같이 파일이 구성되었다.

Nav라는 부모 컴포넌트 내부에 나머지 컴포넌트가 들어가는 구조

각자의 부모와 자식 관계를 살펴보자면

최상위 부모 Nav 로 부터 props 를 전달받는 형식으로 진행하였다.

• Nav : 최상위 컴포넌트로서 각 컴포넌트들을 연결해주는 역할을 해준다.
• BeforeClick : 상단 검색 버튼을 클릭하기 전 상태이며, 검색 버튼 외 프로필 버튼이 같이 있다.
• OnClick : 상단 검색 버튼을 클릭한 뒤의 상태이며, 세부 필터를 적용하는 검색창을 활용할 수 있는 컴포넌트.
• Search : OnClick 상태에서 사용 가능한 컴포넌트로서 Search Component 와 연동되어있다.
• Calender : 달력 컴포넌트로 Date picker 라이브러리를 활용하여 생성한 모달창 
• Location : 경기도 및 인천 지역을 필터 적용할 수 있게 해주는 모달창
• GuestType : 여행자 수를 필터 적용할 수 있게 해주는 모달창
• ProfileContainer : 비로그인 상태에서 상단 우측 프로필 버튼을 눌렀을 때 나오는 모달창
• LoginContainer : 로그인 상태에서 상단 우측 프로필 버튼을 눌렀을 때 나오는 모달창(여행정보, 마이프로필, 로그아웃 등 접근가능)

이렇게 구성을 하였다. 원래 에어비엔비 사이트는 느슨한 계획 등등 여러 필터조건이 더 있지만, 2주라는 프로젝트 기간을 고려하여 이 정도라도 생성해야 겠다 다짐하여 구조를 계획했고, 솔직히 이때까지만 크게 어렵게 느껴지진 않았다. 그리고 작업을 할수록... 어렵다는것을 깨달았다.

 

코드도 많고 기능도 많아서 몇개의 글로 나누어서 작성해야겠다. 대략적으로 4개의 글까지 나올 수 있겠다 싶기도 하는데.. 일단 작성해봐야겠다~ 우선 Search 부분부터 다뤄볼 예정이다.