원문(출처) : 그누보드 테마 제작 22 - 게시글 리스트 페이지 개발

오늘도 포스팅양이 꽤 되네요.

아무래도 모두 여기에 올리진 못할 것 같구요.

위 링크에 가시면 모든 내용을 보실 수 있을거에요~

게시판 관련 마지막 작업이네요.
바로 게시글 리스트 작업입니다.

그누의 기본 테마를 살펴보고, 이전에 준비해둔 제작할 테마의 모양을 보겠습니다

지금까지 게시글에 적용하는 UI는
사실 Metronic Admin에서 제공하는 Mail UI 였습니다.
여러가지로 비슷해보여서 작업을 하고 있습니다만, 
고쳐야 할 부분이 너무 많아서 시간이 많이 걸리고 있네요.
(사실 그만 할까 라는 생각도 굴뚝같습니다. 그러나 나와의 약속이니 어떻게든 마무리하려 합니다.)

잘해서 이쁜 화면 만들어보리라는 다짐을 해봅니다!

오늘은 순서를 정해보고 하겠습니다.
1. 카테고리 영역
2. 게시글 상단 영역
3. 게시글 리스트 영역
4. 페이징 영역
5. 검색 영역
이 정도 업무로 나뉘는것으로 보여집니다.

이제 달려봅니다!!!

1. 카테고리 영역

카테고리 영역은 준비된 UI에 없네요. 상단 영역을 복사하여 하나 더 만들어야겠습니다.
또, 카테고리영역은 관리자에서 설정을 안하면 안보이는 부분이니까요.
Bootstrap의 버튼 UI를 이용해서 작성을 하겠습니다.
얼마전까지 Bootstrap1이나 2를 썼었습니다. 
그때는 많이 어렵다고 느꼈었는데... 
지금은 4를 쓰고 있는데 많이 쉬워진 느낌이네요.
(작업하면서 많이 배우는 중입니다.)

$category_option이라는 변수가 나오는데요.
아마도 /bbs/list.php 에서 미리 만들어서 넘어오는 변수네요.
이런 경우에는 테마에서 다시 만들어야 합니다.
list.php에서도 만들고, list.skin.php에서도 만들면 서버 리소스 측면에서도 안좋긴 하지만
그누보드의 보안 패치, 다른 테마 적용등을 생각하면
테마 폴더 이외에는 건들면 안되겠습니다

/bbs/list.php에서 $category_option을 만드는 부분을 
list.skin.php로 옮겨와 수정을 합니다.

카테고리 관련 제작한 소스는 원문에서 확인하실 수 있습니다.

2. 게시글 상단 영역

검색 영역을 제외하고 나머지 부분에 대한 작업을 진행합니다.
이 부분은 Bootstrap의 다양한 Class 옵션을 이해하기 위해 많은 시간이 필요했습니다.

// 뭔놈의 클래스가 이리도 많이 들어있는건지...
<div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-3 d-flex align-items-center justify-content-sm-end text-right my-2 btn_bo_user">

3. 게시글 리스트 영역

리스트만 하면 거의 다 끝나가는거겠죠?
얼른 하고 놀러 가고 싶네요.

제목줄은 새로 만들어야 하네요.
메일의 UI를 가져오니 제목이 없네요. 흠냐...

이제 그누보드의 코딩을 옮겨옵니다.
먼저 제목부터!!
조회, 추천, 비추천, 날짜에는 정렬을 위한 <a>Tag가 존재하네요.
이를 위해 common.lib.php에 subject_sort_link() 함수가 존재합니다.
이 역시 HTML 문자열을 돌려주는 함수기에 수정이 필요하네요.

항상 이런 경우에 제가 잘하는 건지 의문이 남아서 
SIR.KR의 Q&A에 질문을 남겨보았습니다.
이런 경우 경험을 알려주세요~ 라구요~
sir.kr/qa/366925

일반적으로 저와 비슷한 방식으로 작업을 한다고 하네요.
더욱 자신감을 가지고 진행해볼게요~

지난 번처럼(여지껏 해오던데로) 테마내에 미리 만들어둔 mt703.lib.php 파일에
subject_sort_link_mt703() 함수를 다시 정의합니다.

subject_sort_link_mt703() 관련 제작한 소스는 원문에서 확인하실 수 있습니다.

눈치채셨나요?
넵 기존과는 조금 다르게 했어요.
제목줄의 조회, 추천 등을 눌렀을때 
현재 정렬상태가 무엇인지 알 수 있도록 아이콘을 추가하였습니다.

이제 리스트 코딩 작업 들어갑니다.
공지일때의 BG Color와 짝수, 홀수일때 BG Color...
첫 줄부터 혼란스럽게 하네요. ㅎㅎ

원문(출처) : 그누보드 테마 제작 22 - 게시글 리스트 페이지 개발