Final Project - (13) 2020_0210

이번에는 매물의 상세 스크린에 대해서 만들어 주었다.

 

bottom tab navigator의 첫번째 tab의 stack 중 detail screen에 대해서 만들어 주었다.

 

- Home screen

- More List screen

- Detail screen

- Review screen

- Review posting screen

 

저번에 홈스크린을 만들어 줄 때 추천매물/종류별 매물의 카드와 More List에서 카드를 TouchableOpacity로 만들어주었고, onPress로 터치 시에 HouseDetail로 navigate되도록 만들어주었다고 했다. 그래서 카드를 터치할 경우 매물의 상세 스크린으로 이동된다.

 

이때 navigation의 navigate 메소드로 스크린을 이동시켜줄 때, 두번째 인자로 param을 전달 할 수 있다.

그래서 navigate될 때, param으로 매물의 id를 param으로 전달하도록 하였다. 이 id는 database에서 매물의 id를 가리킨다.

 

서버의 매물의 상세 정보를 받아오는 api가 매물의 id를 요청으로 받아 id를 이용하여 database에서 해당하는 매물의 정보를 꺼내와서 응답으로 주도록 되어있기 때문에 navigate시에 house의 id를 가져가도록 만든 것이다.

 

navigate 시 param으로 id 전달 / 상세 스크린에서 param을 사용

 

상세 스크린에서는 navigation의 getParam 메소드를 통해 전달받은 param을 받을 수 있다.

상세 스크린 진입 시에 param을 받아서 useEffect hook으로 매물의 상세 정보에 대한 요청을 서버로 보내고 응답을 받아 하위 컴포넌트에 props 로 내려준다.

param으로 받은 houseId로 서버에 상세 정보 요청

 

여기서도 isReady라는 state를 활용하여 데이터를 받아오기 전까지 ActivityIndicator로 로딩 표시가 뜨도록 조건부렌더링을 해주었다. 그리고 데이터를 받아오면 setReady로 상세 스크린이 나오게 된다.

 

카드 터치 시, 로딩 표시 / 로딩 완료

 

 

상세 스크린은 크게 매물에 대한 이미지와 매물에 대한 세부 정보로 나누어져 있다. 

 

그래서 우선은 전체를 스크롤뷰로 구성을 하였고, 하위에 이미지 컴포넌트와 세부 정보 컴포넌트로 구성을 하였다.

 

이미지 컴포넌트는 위에서 매물의 타이틀 위에 위치한 부분을 말한다.

 

이미지 컴포넌트

이미지 컴포넌트는 Carousel, Pagination, 찜하기 토글 컴포넌트로 구성이 되어있다.

 

Carousel

Carousel의 뜻은 회전목마라는 뜻이다. 즉 이미지가 회전목마가 돌아가는 것처럼 옆으로 슬라이드 할 수 있게 되어있는 것이다. 

 

매물의 여러 이미지를 어떻게 보여줄까 고민하다가 슬라이드해서 옆으로 넘겨서 매물의 이미지를 볼 수 있도록 만드는게 좀 있어(?) 보이는 것 같았다. 그래서 방법을 찾던 중에 react-native-snap-carousel라는 라이브러리를 찾았고 이 라이브러리를 적용해서 이미지를 옆으로 넘겨볼 수 있게 만들었다.

 

 

Carousel 컴포넌트는 이미지 배열을 data로 받고 renderItem으로 컴포넌트를 map 메소드 처럼 렌더링 한다. renderItem에서 각 이미지를 DetailImageComponent에 props로 내려주어서 렌더링한다. DetailImageComponent는 react native elements의 Image 컴포넌트를 이용하여 구성되어 있다.

 

 

Pagination

Pagination은 위에 이미지를 보면 하단에 - - - 이런식으로 나오는 것인데 이미지를 슬라이드 할 때, 몇번째 이미지를 보고 있는지, 이미지 전체는 몇개인지 알려주기 위해서 만들었다. react-native-snap-carousel 라이브러리에서 Pagination 컴포넌트를 import해서 사용하였다.

 

Carousel에서 onSnapToItem으로 해당 이미지에 대한 index를 state로 설정하고 이 값을 Pagination 컴포넌트에 props로 내려주어서 Carousel로 현재 보고있는 이미지와 Pagination이  동기화 되도록 하였다.

 

 

 

찜하기 토글 컴포넌트

 

우리 프로젝트에서는 매물에 찜하기 기능을 만들어서 자신이 찜한 매물들을 따로 볼 수 있도록 만들 예정이었다. 

 

Bottom tab의 두번째 tab이 자신이 찜한 매물들을 볼 수 있는 스크린이다. 그래서 이 찜하기 기능을 매물 상세에서 토글 기능으로 만들어서 터치 시, 자신의 찜목록에 추가되고 다시 누르면 해제되도록 만들어 주려고 했다.

 

찜하기 토글

 

이미지 오른쪽 상단에 있는 하트 모양의 아이콘이 토글 컴포넌트이다. expo vector icon에서 하트 모양의 아이콘 컴포넌트로 만들었고, 토글 상태를 나타내는 state를 잡아주어서 onPress시에 state에 따라 찜/찜해제 상태로 토글 되도록 만들어 주었다. state에 따라서 삼항연산자로 색깔과 아이콘 모양 (비어있는 하트 / 꽉 차있는 하트)로 변하게 된다.

 

그리고 각 상태가 될때마다 서버로 요청을 보내는데 database의 찜목록에 추가/삭제하는 요청을 보낸다. 예를들어 찜이 안되어 있는 상태에서 터치를 하면 찜상태로 아이콘이 (빨간색) 변하게 되고, 서버에 찜목록에 추가하는 POST 요청을 보내게 된다. 그리고 만약 찜이 되어있는 상태에서 터치를하게되면 아이콘이 다시 찜해제 상태로 (하얀색) 변하게되고, 서버에는 찜목록에서 삭제하는 DELETE 요청을 보내도록 했다.

 

 

 

---

여기까지 매물의 이미지 컴포넌트에 대해서 만들었고 다음에는 매물의 상세정보를 나타내는 컴포넌트를 만들 것이다.