[테마제작기(18記)] 쪽지 내역 및 전송 기능 개발 > 개발자팁

개발자팁

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

[테마제작기(18記)] 쪽지 내역 및 전송 기능 개발 정보

기타 [테마제작기(18記)] 쪽지 내역 및 전송 기능 개발

본문

원문(출처) : 그누보드 테마 제작 18 - 쪽지 내역 및 기능 개발

 

오늘은 쪽지 관련 기능을 개발해봅니다.

2949618301_1593703702.4077.png

 

받은쪽지, 보낸쪽지, 쪽지쓰기의 총 3페이지로 되어 있군요.
제가 만들고 있는 테마에서는 어떻게 보일런지 궁금하네요.

2949618301_1593703724.032.png

 

관련 파일은, memo.php와 memo_form.php 그리고 memo_view.php 네요.
당연히 bbs 폴더 안에 있는 것들일거고...
제가 작업해야 할 파일은
/theme/제작중인테마/skin/member/basic 폴더에 있는
memo.skin.php와 memo_form.skin.php, memo_view.skin.php가 되겠네요.
(그동안 작업 좀 했다고, 술술 나오네요 ㅎㅎ)

Metronic Admin Templat에서 어떤 화면을 이용해야 할지 살펴볼게 꽤 있네요.
테이블로 하면 편할 것 같긴 한데, 지양해야 하는 것 같기도 하고...
받은 쪽지나 보낸 쪽지에서 확인하지 않은 항목들은
사용자 프로파일 이미지에 표시도 해주고 있네요.
(걍 안읽음이라고 표시할 수도 있겠지만...)

우선 상단 보기 탭은 이걸 이용하구요.
https://keenthemes.com/metronic/preview/demo1/features/bootstrap/navs.html

2949618301_1593703756.2084.png

 

받은쪽지와 보낸쪽지의 리스트는 아래 두가지를 섞어야겠어요.
https://keenthemes.com/metronic/preview/demo1/features/widgets/lists.html

2949618301_1593703776.8364.png

 

쪽지보내기와 쪽지보기에서 사용할 화면은 다음과 정했습니다.
https://keenthemes.com/metronic/preview/demo1/features/widgets/forms.html

2949618301_1593703805.0536.png

 

창이 4개이다 보니, 해야 할 일이 많은 느낌이네요.
하나 하나 코드를 만들어보겠습니다.
(확실히 저는 화면을 만드는 부분이 시간이 제일 오래 걸리네요. ㅠㅠ)

2949618301_1593703820.7457.png

 

받은 쪽지함은 일단 받은 쪽지와 보낸 쪽지를 완료한 후에 만들기 위해 보류합니다.
(시간을 너무 끌어서, 작업의 효율이 떨어지니까요.)

 

 

"안읽은쪽지"에 깜빡거리는 파란점이 어려울 거라고 예상했는데,
그누보드 기본 테마의 CSS를 그대로 가져와 넣었더니 의외로 쉽게 해결되었습니다.

 

 

$list 변수의 내용을 살펴봅니다.
name 즉 사용자의 아이콘과 이름을 눌렀을 경우 나오는 툴팁도 수정이 필요하겠군요.
bootstrap의 툴팁도 있지만,  기존걸 사용하는것이 더 예쁠 것 같다는 생각이 드네요.
(절대 귀찮아서는 아닙니다. 아니에..요... 그럴거에요...)

2949618301_1593703884.9681.png

 

큰 어려움 없이 받은 편지함과 보낸 편지함을 완료하였습니다.

2949618301_1593703899.5827.png

 

사용자의 ID를 어떻게 처리할지... 
위에서 말한데로 기본 테마의 CSS를 몽땅 가져와서 처리해보겠습니다.
그누 기본 테마를 띄워놓고, 요소검사 요소검사 요소검사... 해서 모았습니다.

2949618301_1593703921.4875.png

 

무언가 찜찜하더라니, 페이징 작업이 남아있었네요.
샘플이 몇개 안되니, /bbs/memo.php에 가서
페이지당 리스트의 개수를 2개로 바꿉니다.

2949618301_1593703936.1997.png

 

스크랩때 했던것과 유사하게 진행이 될 것 같네요.
관련 코드를 찾아봅니다.
이런... /bbs/memo.php에서 페이징 html을 만들고 있네요.

2949618301_1593703981.8142.png

 

가능하면 테마폴더 이외의 파일을 만지면 안된기에,
(꼭 필요한 경우라면 IF문을 사용하자!)
memo.skin.php에서 테마 전용 페이징을 만드는 함수를 호출합니다

2949618301_1593703998.4295.png

 

이제 예쁘게 나옵니다. ^^

2949618301_1593704017.3103.png

 

 

이제 쪽지 전송부터 작업을 진행하겠습니다.
(아직 쪽지보기 페이지는 화면을 안만들었으니까요?)

 

쉽게 끝날 줄 알았는데, 문제가 생겼네요.
<form>과 </form>사이에 submit 버튼이 있어야 하는데, 
그렇지 못한 상황입니다.
form이 submit을 포함하게 코딩하면, 화면이 확 깨져버리네요. ㅠㅠ
그래서 이런 꼼수를 활용하여 해결합니다.

2949618301_1593704062.1838.png

 

여자 저차 완료하였는데...
포인트가 모자라네요. 쿨럭... 관리자에게 가서 삥 좀 뜯어와야겠습니다.

2949618301_1593704082.9711.png

2949618301_1593704090.8017.png

 

이제 테스트만 끝나면 되는군요.
정상적으로 전송 완료!!!

2949618301_1593704106.8807.png

 

이제, 쪽지보기만 남았습니다.
아 젤 오래 걸리는 화면 그리는 작업을 해야 하네요. ㅠㅠ
(요 부분은 정말 실력이 늘지 않는군요...)
시간이 늦어서, 걍 바로 코딩으로 작업했네요.
다음 쪽지, 이전 쪽지에서 시간이 좀 걸렸지만, (걍 좌우에 놓기가 안되어서...)
card-footer를 이용하여 간단히 해결해버렸습니다.

 

2949618301_1593704124.0567.png

글의 서두에 올렸던 깨졌단 화면과 완료된 화면을 비교해보고 싶어져 캡처를 뜹니다.
(사실 이 맛에 하는거죠~)

2949618301_1593704145.0542.png

 

이렇게 또 하나의 단계를 넘었네요.

이제 남은건!!!
게시판!!!
이거 끝내면 나머진 별거 없으니까!!!
힘을 내서 더 달려보겠습니다!!!

이번에도 양이 많아 소스까지 여기에 올리지는 못하였습니다.

아래 원문으로 가시면 소스까지 보실 수 있습니다.
항상 부족한 글 봐주셔서 감사드립니다.

원문(출처) : 그누보드 테마 제작 18 - 쪽지 내역 및 기능 개발

추천
3

댓글 8개

전체 5,352
개발자팁 내용 검색

회원로그인

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