[테마제작기(22記)] 게시글 리스트 페이지 개발 2/2 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

[테마제작기(22記)] 게시글 리스트 페이지 개발 2/2 정보

기타 [테마제작기(22記)] 게시글 리스트 페이지 개발 2/2

본문

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

 

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

 

또 위와 같은 문제가 발생했네요.
바로 get_list() 함수입니다.
/bbs/list.php에서 호출하는 함수로 게시글 리스트를 불러오는 함수죠.
역시 HTML을 포함해서 가져오네요.
또 이 놈은 /bbs/list.php에서 호출되는 함수이기에
어쩔 수 없이 테마 이외의 파일을 건드려야 하는 상황이 되었습니다.
다른 테마 제작자분들은 어떻게 처리하시는지 다시 또 궁금해집니다.

 

어... 함수의 소스를 보니 어쩔 수 없는건 아니었나봅니다.
일단 로그부터 찍어봅니다.

로그의 내용 역시 원문에서 확인하실 수 있습니다.

글이 자꾸 잘려 쪼개서 쓰기 힘드네요 ㅠㅠ

 

DB 조회 결과를 그대로 포함하고 있고, 추가로 필요한 문자열들만 배열에 추가시킨거네요.
DB에서 조회한 bo_hot 필드는 그대로 있고, 
icon_hot 필드라는 HTML을 포함한 문자열 필드를 추가하는 방식으로요.
함수 재정의 필요 없이, 바로 사용해도 되겠네요. ㅎㅎ

 

바로 NEW 아이콘 적용을 위해서 icon 파일을 찾고 있는데
fontawesome, flaticon, lineawesome, SVG icon ....
다 찾아봐도 "NEW"를 대체할 아이콘이 없네요.
해외 게시판은 NEW를 표시하지 않는건가?
(그래서 그누보드도 New 아이콘은 fontawesome이 아닌 만들어서 쓰는가봅니다. ㅠㅠ)
걍 아무거나 써야겠어요 ㅠㅠ (결국 그냥 Pencil을 사용했네요)

3067617148_1594311297.7184.png

 

아... 망했어요 ㅠㅠ
그냥 Table로...

망한 이야기도 역시 원문에서 확인하실 수 있습니다.

글이 자꾸 잘려 줄이고 줄여도 잘리는군요 ㅠㅠ

 

여차 저차 망한 걸 극복하고 완료 단계로 나아갑니다.

3067617148_1594311370.9018.png

 

앞에 번호부분도 틀어지네요...
이 부분도 DIV로 묶어서 고정시킵니다.

 

앞으로 비스한 상황이 발생하면,
bootstrap의 d-flex와 flow-grow-1 클래스는 영역을 3~4개 정도로 나누고
flow-grow-1을 제외한 영역은 사이즈를 정확히 주면 큰 문제 없겠네요.

 

4. 페이징 영역

3067617148_1594311438.2069.png

페이징 영역은 지난 스크랩에서 했었으니 무난히 진행되리라 봅니다.
상단영역의 HTML 구조를 그대로 가져와 작업합니다.

3067617148_1594311456.2759.png

이제 페이징 작업은 넘나 쉽네요~ ㅎ

 

 

아마도 이쯤에서 잘릴것 같네요. 22記 3부로 넘어갑니다. (아니 웬지 될것같기도...)

 

5. 검색 영역

3067617148_1594311712.9479.png

 

고민이네요. 뭘 어떻게 이용을 할지요...
Metronic Admin Template에 있는 상단 검색창을 이용을 할지...
Modal 창을 이용해서 해야 할지...
그누보드 방식으로 걍 빠르게 처리해버릴지...
음.. 인생은 결정의 연속이라더니...

 

모달창을 이용하는게 제일 빠르고 낫겠다고 판단했어요.
역시 한 번 해보았다고 금방 끝났어요 ^^

 

3067617148_1594311745.9717.png

 

그누 기본은 검색된 단어에 표시를 해주는데, 그게 빠져있습니다.

뭘까요... 다시 찾아봐야죠 뭐...

3067617148_1594311800.6071.png

3067617148_1594311815.6833.png

 

음... 이런 원리로군요...
제목 부분에 있는 검색어를 치환하는 방식.
저도 두가지 방법을 선택할 수 있겠네요.
1. sch_word를 gnuboard.css에 넣어서 간단히 처리
2. Bootstrap의 BG-RED 클래스를 이용하여 직접 치환.

 

그누보드 기본 테마에서 처리하는 방식을 확인해보겠습니다.
/bbs/list.php에서 검색어가 있을 경우 search_font() 함수를 호출하여 처리하고 있습니다.
그누보드 개발자의 고뇌가 느껴지는 주석들이 존재하네요 ^^
"태그는 포함하지 않아야 하는데 잘 안되는군. ㅡㅡa" 라구요~ ㅋㅋ

 

search_font() 함수 관련 소스는 원문에서 확인하실 수 있습니다.

글이 자꾸 잘려서...

 

저는 bootstrap의 bg-danger 클래스를 이용하기로 합니다.
<b class="bg-danger">검색어</b>

3067617148_1594311952.2158.png

 

search_font() 함수는 그누 기본 함수이니 
전 search_font_mt703() 함수를 그대로 복사하여 mt703.lib.php에 옮깁니다.
그리고 sch_world 문자열을 bg-danger 로 바꾸어 준비해둡니다.

 

위에서 보여준 $list 변수의 내용은 검색을 하지 않은 결과였습니다.
검색을 한 $list 변수를 살펴보고,
sch_word가 포함된 제목과 원문 그대로 담긴 제목 배열을 찾아봅니다.

 

위 내용 관련 소스는 원문에서 확인하실 수 있습니다.

3067617148_1594312045.8658.png

잘 처리되었습니다. ^^

 

이제 거의 끝났습니다.
마지막으로 전체적으로 기능 테스트를 진행해보았는데,
큰 문제가 발견되지 않네요.

 

3067617148_1594312072.5978.png

3067617148_1594312081.2187.png

3067617148_1594312090.0462.png

3067617148_1594312098.9883.png

3067617148_1594312109.2339.png

3067617148_1594312118.0527.png

 

이렇게 완료되었네요.
예상대로 게시판이 가장 오래 걸리는 작업이었네요.

 

다음 포스팅은 우측 영역에 뭘 넣어야 좋을지 고민해보고 작업 진행하겠습니다. 

 

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

추천
2

댓글 4개

전체 1,262
개발자팁 내용 검색 기타에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT