Modal 생성

출처 https://getbootstrap.kr/docs/5.0/components/modal/

  <!-- Modal -->
  <div class="modal fade" id="board_create_modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">게시판 제목</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body d-flex gap-2">
          <input type="text" id="board_title" class="form-control" placeholder="게시판 이름">
          <select name="" id="board_type" class="form-select">
            <option value="board">게시판</option>
            <option value="gallery">갤러리</option>
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
          <button type="button" class="btn btn-primary" id="btn_board_create">확인</button>
        </div>
      </div>
    </div>
  </div>

게시판 - JS

document.addEventListener("DOMContentLoaded", () => {
  const btn_board_create = document.querySelector("#btn_board_create")

  btn_board_create.addEventListener("click", () => {
    const board_title = document.querySelector("#board_title")
    const board_type = document.querySelector("#board_type")

    if (board_title.value == "") {
      alert("게시판 이름을 입력해 주세요.")
      board_title.focus()
      return false
    }

    const xhr = new XMLHttpRequest()
    const f = new FormData()

    f.append("board_title", board_title.value)
    f.append("board_title", board_type.value)
    f.append("mode", "input")

    xhr.open("post", "pg/board_process.php", true)
    xhr.send(f)

    xhr.onload = () => {
      if (xhr.status == 200) {
        alert("통신 성공")
      } else {
        alert("통신 실패 " + xhr.status)
      }
    }
  })

  const btn_create_modal = document.querySelector("#btn_create_modal")
  btn_create_modal.addEventListener("click", () => {
    board_title.value = ""
    return false
  })
})

마무리

다음 시간에는 게시판 코드 생성 로직 Backend 부분을 해보겠습니다.

감사합니다.