Write.cshtml 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. @page
  2. @model Admin.Pages.Forum.Posts.List.WriteModel
  3. @using Microsoft.AspNetCore.Mvc.Rendering
  4. @{
  5. ViewData["Title"] = "게시글 등록";
  6. }
  7. <partial name="_Editor" />
  8. <div class="container">
  9. <h3 class="mb-3">@ViewData["Title"]</h3>
  10. <hr />
  11. <partial name="_StatusMessage" />
  12. <form id="fPostWrite" method="post" accept-charset="utf-8" autocomplete="off" enctype="multipart/form-data">
  13. <!-- 게시판 -->
  14. <div class="row mb-2">
  15. <label class="col-sm-2 col-form-label"><span class="text-danger">*</span> 게시판</label>
  16. <div class="col-sm-10">
  17. @if ((Model.BoardList?.Count ?? 0) > 0)
  18. {
  19. <select asp-for="Input.BoardID" class="form-select w-auto" required asp-items="@Model.BoardList" id="Input_BoardID">
  20. <option value="">- 선택 -</option>
  21. </select>
  22. }
  23. else
  24. {
  25. <input type="number" asp-for="Input.BoardID" class="form-control w-auto" required />
  26. }
  27. </div>
  28. </div>
  29. <!-- 말머리 -->
  30. <div class="row mb-2" id="prefixRow" hidden>
  31. <label class="col-sm-2 col-form-label" id="prefixLabel">말머리</label>
  32. <div class="col-sm-10">
  33. <select asp-for="Input.BoardPrefixID" class="form-select w-auto" id="boardPrefixSelect">
  34. <option value="">- 선택 -</option>
  35. </select>
  36. </div>
  37. </div>
  38. <!-- 제목 -->
  39. <div class="row mb-2">
  40. <label class="col-sm-2 col-form-label"><span class="text-danger">*</span> 제목</label>
  41. <div class="col-sm-10">
  42. <input type="text" asp-for="Input.Subject" class="form-control"
  43. required maxlength="255" placeholder="제목을 입력하세요 (최대 255자)" />
  44. </div>
  45. </div>
  46. <!-- 내용 (CKEditor) -->
  47. <div class="row mb-2">
  48. <label class="col-sm-2 col-form-label">내용</label>
  49. <div class="col-sm-10">
  50. <textarea asp-for="Input.Content" class="ck-editor" id="Input_Content" rows="12"
  51. placeholder="내용을 입력하세요"></textarea>
  52. </div>
  53. </div>
  54. <!-- 썸네일 -->
  55. <div class="row mb-2">
  56. <label class="col-sm-2 col-form-label">대표 이미지</label>
  57. <div class="col-sm-10">
  58. <div id="thumbPrev" hidden>
  59. <img class="img-fluid img-thumbnail" alt="대표 이미지 미리보기" style="max-width: 300px;" /><br />
  60. <button type="button" class="btn btn-sm btn-danger mt-2 mb-2 btn-remove-preview">삭제</button>
  61. </div>
  62. <input type="file" id="Input_ThumbnailFile" asp-for="Input.ThumbnailFile" class="form-control" />
  63. <span class="form-text text-muted">
  64. 지원 확장자: <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>, <code>.webp</code>, <code>.bmp</code>
  65. </span>
  66. </div>
  67. </div>
  68. <!-- 첨부파일 -->
  69. <div class="row mb-2">
  70. <label class="col-sm-2 col-form-label">첨부파일</label>
  71. <div class="col-sm-10">
  72. <input type="file" asp-for="Input.Files" class="form-control" multiple />
  73. <span class="form-text text-muted">허용 확장자: <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>, <code>.gif</code>, <code>.webp</code>, <code>.bmp</code>, <code>.pdf</code>, <code>.doc</code>, <code>.docx</code>, <code>.xls</code>, <code>.xlsx</code>, <code>.ppt</code>, <code>.pptx</code>, <code>.txt</code>, <code>.zip</code>, <code>.rar</code>, <code>.7z</code>, <code>.hwp</code>, <code>.hwpx</code>, <code>.csv</code></span>
  74. </div>
  75. </div>
  76. <!-- 태그 -->
  77. <div class="row mb-2">
  78. <label class="col-sm-2 col-form-label">태그</label>
  79. <div class="col-sm-10">
  80. <input type="text" asp-for="Input.TagsInput" class="form-control" placeholder="태그를 쉼표(,)로 구분하여 입력하세요" />
  81. <span class="form-text text-muted">예: 비트코인, 이더리움, 블록체인</span>
  82. </div>
  83. </div>
  84. <!-- 상태 -->
  85. <div class="row mb-2">
  86. <label class="col-sm-2 col-form-label">상태</label>
  87. <div class="col-sm-10 align-content-center">
  88. <div class="form-check form-check-inline">
  89. <input class="form-check-input" type="checkbox" asp-for="Input.IsNotice" />
  90. <label class="form-check-label" for="Input_IsNotice">공지</label>
  91. </div>
  92. <div class="form-check form-check-inline">
  93. <input class="form-check-input" type="checkbox" asp-for="Input.IsSecret" />
  94. <label class="form-check-label" for="Input_IsSecret">비밀</label>
  95. </div>
  96. <div class="form-check form-check-inline">
  97. <input class="form-check-input" type="checkbox" asp-for="Input.IsAnonymous" />
  98. <label class="form-check-label" for="Input_IsAnonymous">익명</label>
  99. </div>
  100. </div>
  101. </div>
  102. <hr />
  103. <div class="d-grid gap-2 text-center d-md-block">
  104. <button type="submit" class="btn btn-success">저장</button>
  105. <a class="btn btn-secondary btn-cancel" href="/Forum/Posts/List">취소</a>
  106. </div>
  107. <br />
  108. </form>
  109. </div>
  110. @section Scripts {
  111. <script>
  112. setupImagePreview("Input_ThumbnailFile", "thumbPrev");
  113. // 게시판 변경 시 말머리 동적 로드
  114. document.getElementById("Input_BoardID")?.addEventListener("change", async function () {
  115. const boardID = this.value;
  116. const prefixRow = document.getElementById("prefixRow");
  117. const prefixSelect = document.getElementById("boardPrefixSelect");
  118. prefixSelect.innerHTML = '<option value="">- 선택 -</option>';
  119. if (!boardID) {
  120. prefixRow.hidden = true;
  121. return;
  122. }
  123. try {
  124. const res = await fetch(`/Forum/Posts/List/Write?handler=Prefixes&boardID=${boardID}`);
  125. const data = await res.json();
  126. const prefixLabel = document.getElementById("prefixLabel");
  127. if (prefixLabel) {
  128. prefixLabel.textContent = data.isQnA ? "문의 유형" : "말머리";
  129. }
  130. if (data.items.length > 0) {
  131. data.items.forEach(item => {
  132. const opt = document.createElement("option");
  133. opt.value = item.id;
  134. opt.textContent = item.name;
  135. prefixSelect.appendChild(opt);
  136. });
  137. prefixRow.hidden = false;
  138. } else {
  139. prefixRow.hidden = true;
  140. }
  141. } catch {
  142. prefixRow.hidden = true;
  143. }
  144. });
  145. // 취소 버튼 확인
  146. $(function () {
  147. $(".btn-cancel").on("click", function (e) {
  148. const s = $("input[name='Input.Subject']").val()?.trim();
  149. if (s) {
  150. e.preventDefault();
  151. if (confirm("내용이나 제목이 남아 있습니다. 글 작성을 취소하시겠습니까?")) {
  152. location.href = $(this).attr("href");
  153. }
  154. }
  155. });
  156. });
  157. </script>
  158. }