애드온으로 만들기가 좀 애매해서 그냥 팁으로 공유합니다.
사전준비
1. "통합게시판 글쓰기" 용으로 사용할 게시판 생성 (예: mid=total)
2. "통합게시판"에 분류 아무거나 하나 추가
요약:
1. 분류 선택 엘리먼트를 복사해서 게시판 선택 엘리먼트로 만든다.
2. 게시판 리스트는 그냥 하드코딩
3. 게시판을 선택하면 change 이벤트 발생
3-1. hidden input 의 mid 값을 value를 바꿔준다.
3-2. 선택한 게시판의 분류내용을 ajax로 가져와서 교체해준다.
----------------------------------------------
$(document).ready(() => {
const CSS_SELECTOR = "분류선택창을 골라낼 수 있는 CSS 셀럭터";
// 가령 (.category.selector) 이런식
const hiddenMid = document.querySelector(".write_Form input[type=hidden][name=mid]");
// 이 css 셀렉터도 잘 찾아서 교체
// 분류 선택 엘리먼트 복사해서 게시판 선택 엘리먼트로 사용할 예정
const categorySelector = document.querySelector(CSS_SELECTOR);
const boardSelector = categorySelector.cloneNode();
// 분류 선택창은 잠시 내용을 비우고, 안보이게 감춘다.
categorySelector.querySelector("[name=category_srl]").innerHTML = "";
categorySelector.style.display = "none";
// 하드코딩으로 게시판 이름과 mid이 들어간 리스트를 만들어준다
boardSelector.innerHTML = `
<select name="category_srl">
<option value="">게시판 선택</option>
<option value="free1"> 자유1</option>
<option value="free2"> 자유2</option>
<option value="free3"> 자유3</option>
</select>`;
// 분류선택 엘리먼트 앞에 놓아준다.
categorySelector.insertAdjacentElement("beforebegin", boardSelector);
// 변경 이벤트 감지
boardSelector.addEventListener("change", e => {
const mid = e.target.value;
hiddenMid.value = mid; // 숨은 mid 값 교체 해줌
categorySelector.innerHTML = "";
categorySelector.style.display = "none";
// 선택한 게시판의 분류 내용을 가져와서 교체하고 노출시켜준다.
$.get(`/index.php?mid=${mid}&act=dispBoardWrite`, function (response) {
const newCategory = $(response).find(CSS_SELECTOR);
if (newCategory.length) {
categorySelector.style.display = null;
$(categorySelector).html(newCategory.html());
$(categorySelector).find("option:eq(1)").prop("selected", true);
}
});
});
})
저 같은 경우는 제 사이트에 맞는 코드로 애드온 형태로 만들어서
해당 게시판 글쓰기 페이지에 들어오면 위 자바스크립트가 실행되고
통합글쓰기 형태로 바뀌게 하였습니다.
어디서부터 어디까지 선택하거나 복사할 것인지
레이아웃마다 디자인이 뒤틀어지진 않는지 요소가 많아서
하드코딩이 들어갈 수 밖에 없네요.
어느 정도 코드 작성이 가능하신 분은
그냥 아이디어 차원의 팁으로 읽어주시면 될 것 같습니다.
혹시 더 좋은 아이디어 있으신 분은 알려주세요.
