앞선 글에서 firebase에서 간단한 게시판을 만드는 과정을 소개한 바 있었다.(https://kongyine.com/223499829728) .
그리고, 이렇게 만든 게시판의 화면을 일정한 레코드 단위로 분할해 표시하는 Pagination 기법을 적용하는 과정(https://kongyine.com/223510496924)과 문제점을 소개했으며, 기존 게시글의 수정과 삭제 기능을 구현하는 부분에 대해서도 (https://kongyine.com/223510579210) 글에서 자세히 소개했었다.
se-l-large_image” id=”SE-c0f2bcd4-cffa-44c3-ad13-6c8c5d3b2514″>
c0f2bcd4-cffa-44c3-ad13-6c8c5d3b2514″, “data” : {“link” : “https://kongyine.com/223510579210”, : “false”, “thumbnail” : “https://dthumb-phinf.pstatic.net/?src=%22https%3A%2F%2Fblogthumb.pstatic.net%2FMjAyNDA3MTJfODkg%2FMDAxNzIwNzcxMjc4NTky.-6zcqNLKJeXXCO362d4jun5CC1Tpj7TvsL-UTn9BLTYg.BstvEogkbieQXTCDx–UDPHnfXbOAwV9Z4b1QqyowNgg.PNG%2Fimage.png%3Ftype%3Dw2%22&type=ff500_300
그 결과, 수정된 게시판의 출력은 다음과 같은 상태가 되었는데, 이러한 게시판은 글의 길이에 따라 각각의 레코드가 차지하는 화면이 달라지는 문제가 있었고, 작성 시기의 표시도 좀 더 보기 좋게 개선할 필요가 있을듯했다.
글 읽기 전용 페이지를 만들고, 게시판에는 제목만 표시하기
우선 게시판에서 표시되는 글의 내용을 전부 표시하는 대신 각각의 글의 처음 일정 부분(예: 50자)만 표시하면 좋겠다는 생각이 들었다. 그리고 그 대신 해당 레코드의 제목을 마우스로 클릭하면 별도의 화면이 열리면서 글 전체의 내용을 보여주는 형식으로 변경하는 게 좋겠다는 생각이 들었다.
그래서 기존에는 다음과 같은 포맷에 따라
다음과 같은 스크립트 명령에 의해 표시되던 부분을 변경하기로 했다.
우선 기존에는 전체 내용을 표시하던 부분을 다음과 같은 방식을 이용하여 초반부 50자만 표시하게 변경했다.
이렇게 하면 게시판의 글 내용 표시 부분은 다음과 같이 간략화되어 표시된다.
이렇게 하는 대신 글 전체의 내용을 보기 위해, 제목 부분을 마우스로 선택하면, 하나의 버튼으로 작동하여 새로운 글 읽기 전용 페이지로 이동하도록 다음과 같이 설정했다.
그런데, 이 과정에서 마우스가 접근한 레코드의 제목에 대해서만 선택 가능성을 암시하는 밑줄이 생기도록
style 구문에 다음과 같이 hovering을 지정해 주었다.
그 결과 게시판은 다음과 같이 간결해졌고, 한 페이지당 출력 길이도 일정해졌고,
실제 글을 읽는 페이지는 다음과 같은 글 읽기 전용 페이지에서 보다 시원스럽게 읽게 되었다.
이러한 글 읽기 전용 페이지는 기존에 게시판 글을 수정할 때 사용하던 페이지 포맷을, 다음과 같이 그대로 사용하되 다만 글의 각 요소가 편집은 되지 않도록 disabled 속성을 추가하는 방식으로 표시하였다.
편집 시간 표시 개선하기
이렇게 게시판을 수정하고 나니, 게시판이 이전보다 매우 깔끔해진 느낌이 들긴 하는데, 글 적성 시간 표시가 아직 마음에 들지 않는다. 시간 표시가 한 줄로 이루어지다 보니, 화면의 상태에 따라 날짜와 시간 부분이 표시되는 행이 달라지는 게 깔끔하지 않은 탓이다.
이 부분은 기존에 다음과 같이 표시되었었는데,
이 부분을 날짜와 시간으로 분할하고, 중간에 <br>로 행바꿈을 해주었다.
그 결과 게시판은 다음과 같은 형태로 시간 표시가 변경되어 좀 더 보기에 깔끔해진 듯하다.
