[테마제작기(20記)] 게시글 작성 및 수정 페이지 개발 - 2/3

원문(출처) : 그누보드 테마 제작 20 - 게시글 작성 및 수정 페이지 개발

글이 중간에 또 잘리는 바람에 두 번째를 급하게 작성합니다.

여차 저차 임시 저장글을 완료했네요.
(역시 하면 됩니다. ^^)
data-toggle 영역에 강제로 min-width를 주었더니 해결되었어요~

화면만 되어을 뿐,
삭제 버튼이나 내용 불러오는 기능은 여전히 안됩니다.
(걍 그누테마 기본 쓸걸 그랬어요 ㅠㅠ 왜 항상 같은 후회를...)

아놔 저장글은 잘 불러와지는데, 
그 담부턴 "임시 저장된 글"이 클릭이 안되는 버그가...
$("#autosave_pop").hide(); 
이 놈 때문이었네요. 주석처리!!!

임시 저장글 삭제는 쉽게 될까 했더니, 뭐 삭제는 됩니다. 
그런데 삭제 후에 화면이 회색으로 변해버리네요.
alert을 찍어봐도 그냥 함수 종료하는 시점에 회색이 되어버립니다.
하.. 이건 또 뭘까요? ㅠㅠ
$div.remove();  
이걸 주석 처리하니 정상적으로 수행됩니다.
삭제한 div 영역을 지우는 부분인데, 
주석처리를 해도 걍 지워집니다. (뭘까요?)
암튼 잘 되니까 그냥 넘어갑니다. ㅎㅎㅎ

변경한 주요 소스는 원문에서 확인할 수 있어요.

이제 웹에디터를 손봐야 하네요.
아래 네모 부분만 손보면 될 듯 하네요.

우선 "웹 에디터 시작"과 "웹 에디터 끝"은 class이름이 "sound_only"입니다.
알아본 것은 아니지만, 장애인차별법에 대응하여 넣는 코드가 아닌가 합니다.
(시각 장애인이 사이트에 접속하였을때, TTS로 읽어들이는 코드일거로 생각됩니다.)
그 동안은 귀찮아서 그냥 지웠는데,
아무래도 해당 CSS를 새로 만드는 테마에 추가하는게 맞을 것 같아
그 잡업을 진행합니다.
그럼 당연히 안보여지겠죠~

이제 "단축키 일람" 버튼을 수정해봅니다.
"단축키 일람" 버튼은 에디터에서 호출해주는 함수네요.
이건 뭐 테마 폴더로 옮겨오는건 무리이겠죠.
어쩔 수 없이 기존 클래스를 가져와서 넣어주어야 하겠습니다.
위에서 만든 gnuboard.css를 활용하면 쉽게 해결될 것 같네요

그렇다면 해당 CSS의 정의가 어디에 있는지 찾아보니,
테마 디렉토리의 style.css와 default.css에 나뉘어져 있습니다.
아래는 gnuboard.css에 추가한 내용입니다.

( 소스는 원문에서 확인할 수 있어요. )

이제 겨우 겨우 화면이 완료되었습니다.
거의 반나절이 걸린 작업이었어요.
(정말 테마를 2일만에 만들 수 있는건가요? ㅠㅠ)
아래는 완료된 화면!! 마음은 뿌듯하네요~

이제 글이 정말 저장이 되는지 테스트하는 것만 남았네요.
제발 한번에, 아니... 딱 3번만에 끝났으면 좋겠습니다.~

첫번째 테스트 : 작성 완료 버튼을 눌러도 아무런 반응이 없네요. ㅠㅠ
작성완료 버튼의 type이 reset이었네요. 뭐 이런 일이...

두번째 테스트 : 오... 정상 입력 되었네요 ^^

지금까지
관리자에서 가능한 모든 옵션을 사용상태로 만든 후에,
새로운 테마를 위한 UI를 만들었고 정상 입력이 되는 것을 확인하였습니다.

다음 에디터를 변경해도 정상동작하는지 확인합니다.

다행이 cheditor5로 변경해도 잘 되네요~~

이번엔 자유게시판에서 테스트를 진행합니다.

같은 방식으로 질문과 답변 게시판도 정상적으로 수행되네요.
큰  문제 없는 것 같습니다.
많이 기쁘네요.

갤러리 게시판은 보기와 리스트 페이지가 다를 뿐
글 작성 페이지는 동일한 것으로 보여지네요.
(파일 비교 프로그램으로 비교해보았어요~)
가벼운 마음으로 덮어씌우고 테스트를 진행합니다.

이렇게 해서 게시글 작성을 모두 완료하였습니다.

이제 수정이 잘 되는지 확인을 해보겠습니다.
시간이 조금 지나서 아까 무슨 코딩을 했었는지 기억이 가물가물합니다.
그 느낌이 사라지기전에
(전 오늘 한 코딩의 내용을 잠자고 나면 깨끗이 잊는답니다.)