commit

kngil/js/qa_write.js

@@ -0,0 +1,109 @@
+// /kngil/js/qa/qa_write.js
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  /* ==========================
+   * 1. CKEditor 초기화
+   * ========================== */
+  let editorInstance = null;
+
+  const contentEl = document.querySelector('#content');
+  if (contentEl) {
+    ClassicEditor
+      .create(contentEl, {
+        toolbar: [
+          'heading','|',
+          'bold','italic','link',
+          'bulletedList','numberedList','|',
+          'fontColor','fontBackgroundColor','fontSize',
+          '|','blockQuote','insertTable','imageUpload',
+          'undo','redo'
+        ],
+        language: 'ko',
+        ckfinder: {
+          uploadUrl: '/kngil/bbs/qa_img_upload.php'
+        }
+      })
+      .then(editor => {
+        editorInstance = editor;
+      })
+      .catch(err => console.error(err));
+  }
+
+  /* ==========================
+   * 2. 폼 submit 검증
+   * ========================== */
+  const form = document.getElementById('qaForm');
+  if (form) {
+    form.addEventListener('submit', (e) => {
+      if (!editorInstance) return;
+
+      const data = editorInstance.getData().trim();
+      if (!data) {
+        e.preventDefault();
+        alert('내용을 입력해주세요.');
+        editorInstance.editing.view.focus();
+        return;
+      }
+
+      contentEl.value = data; // textarea에 반영
+    });
+  }
+
+  /* ==========================
+   * 3. 첨부파일 Drag & Drop
+   * ========================== */
+  const dropZone  = document.getElementById('drop-zone');
+  const fileInput = document.getElementById('attach');
+  const fileList  = document.getElementById('file-list');
+
+  if (dropZone && fileInput && fileList) {
+
+    let uploadFiles = [];
+
+    dropZone.addEventListener('click', () => fileInput.click());
+
+    dropZone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dropZone.classList.add('dragover');
+    });
+
+    dropZone.addEventListener('dragleave', () => {
+      dropZone.classList.remove('dragover');
+    });
+
+    dropZone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropZone.classList.remove('dragover');
+      addFiles(e.dataTransfer.files);
+    });
+
+    fileInput.addEventListener('change', () => {
+      addFiles(fileInput.files);
+    });
+
+    function addFiles(files) {
+      for (const file of files) {
+        uploadFiles.push(file);
+      }
+      render();
+      syncInput();
+    }
+
+    function render() {
+      fileList.innerHTML = '';
+      uploadFiles.forEach(file => {
+        const li = document.createElement('li');
+        li.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
+        fileList.appendChild(li);
+      });
+    }
+
+    function syncInput() {
+      const dt = new DataTransfer();
+      uploadFiles.forEach(f => dt.items.add(f));
+      fileInput.files = dt.files;
+    }
+  }
+
+});