시작하면서
앞선 글( https://blog.naver.com/mythee1/223493415455)에서 파이어 베이스에 등록된 자료를 가져와 표시하는 방법을 소개한 바 있었고,
이러한 기본 방법에
– 정렬 버튼을 이용하여 문서들이 보이는 순서를 변경하는 기능
– 페이지 단위의 분할 표시인 pagination 적용
– 그리고 여러 개의 사진들을 커로젤(Carousel)방식으로 표시하는 기능을 반영하는 방법과,
이러한 기능들이 반영된 코드를 다음 글에서 소개한 바 있었다.
상세페이지 연결하기
그런데, 이렇게 표시되는 결과들은 기본적으로 다음과 같은 목록 형태의 결과 표시이기에, 재한된 공간에 표시할 수 있는 정보의 양이 매우 제한적이다. 만일 누군가가 좀 긴 설명이나 특정 제품에 대한 경험을 기록해서 표시하려 하면, 이러한 목록형 자료 표시는 정보 표시 공간의 제약으로 인해 효율적인 수단이 되질 못하는 문제가 있다.
그래서, 이러한 목록형 정보 표시에서는 필수 정보만을 표시하고, 상세한 정보는 위에서와 같이 “상세 보기” 버튼을 이용해 별도의 페이지로 이동한 후, 다음과 같은 형식으로 표시하는 것이 좋을 것 같다는 생각이 들었다.
굳이 이렇게 상세페이지를 별도로 만든 이유는, 목록에 미처 반영하지 못한 정보들을 표시하려면 화면상의 공간이 필요하기도 했고, 추후 필요에 따라 새로운 필드를 추가하는 경우 매번 목록형 표시를 고치기보다는 가급적 이런 상세페이지에서 처리하면 좋겠다는 생각이 들었기 때문이다.
또한, 다음과 같은 댓글 기능을 구현하고 싶은 마음도 있었는데, 아무래도 목록형 정보 표시 화면에 이런 댓글 기능을 추가로 만들기는 어려울 것 같았기 때문이다.
우선, 기존 화면에서 상세페이지로 이동을 위한 버튼은 기존의 목록형 정보 표시 코드에 다음과 같은 버튼 코드를 추가하는 방법으로, 매 문서마다 각각의 상세 보기 버튼을 추가했다. 이 버튼이 눌려졌을 때 동작을 위해 viewdetails라는 이름을 부여했다.
그리고, 각각의 상세 페이지로의 이동은 다음과 같은 간단한 핸들러로 처리했는데, 다만, 보여줄 상세페이지에 대한 정보를 id 변수로 url에 추가하는 방식으로 함께 전달해 주었다.
상세페이지의 정보 표시용 HTML은 기존에 상품정보를 수정할 때 사용하던 것을 가져와 사용하되, 수정만 안되도록 각각의 태그에 “disabled” 문구만 추가하여 주었다.
정보의 표시는 기존 정보 수정용 코드를 그대로 다음과 같이 사용했고, 사진 파일이 여러 개일 수 있음을 고려해 배열 형태로 처리하고, 사진을 그대로 나열하는 방식으로 표시했다.
여기서 표시할 정보는 전달받은 URL에서 함께 전달된 id 값을 분리하고, id 값은 기본적으로 문자열 정보이로, 이를 숫자인 상품번호와 비교하는 쿼리를 만들기 위해 parseInt 함수로 정수로 변환해 주었다.
(참고: 이 id는 이후 구현할 댓글 기능에서도 활용하게 되므로 전역변수로 설정해둔다.)
그 이후에는 firebase의 기본적인 쿼리 문법을 이용해 값을 불러와 표시했다.
한편 현재 페이지 사용을 마치고 돌아가는 기능은 목록 표시 페이지(readitinpages.html)에서 상세페이지로 이동한 것과 완전히 동일한 방법을 이용해 다음의 간단한 코드로 처리하였다. 다만 이 경우는 굳이 id 정보를 반영할 필요는 없어 URL만 간단히 사용했다.
참고를 위해 상세페이지 코드를 첨부한다.