Merge branch 'board-write'

src/views/board/BoardWrite.vue

@@ -9,12 +9,15 @@
 
             <div class="col-xl-12">
                 <div class="card-body">
+                    <!-- 제목 입력 -->
                     <FormInput
                         title="제목"
                         name="title"
                         :is-essential="true"
                         :is-alert="titleAlert"
                         v-model="title"
+                        @update:alert="titleAlert = $event"
+                        @input="validateTitle"
                     />
 
                     <!-- 카테고리 선택 -->
@@ -32,16 +35,19 @@
                                     :id="`category-${index}`"
                                     :value="category.CMNCODVAL"
                                     v-model="categoryValue"
+                                    @change="categoryAlert = false"
                                 />
                                 <label class="form-check-label" :for="`category-${index}`">
                                     {{ category.CMNCODNAM }}
                                 </label>
                             </div>
                         </div>
-                        <div class="invalid-feedback" :class="categoryAlert ? 'display-block' : ''">카테고리를 선택해주세요.</div>
+                        <div class="invalid-feedback" :class="categoryAlert ? 'd-block' : 'd-none'">
+                            카테고리를 선택해주세요.
+                        </div>
                     </div>
 
-                    <!-- 비밀번호 필드 -->
+                    <!-- 비밀번호 필드 (익명게시판 선택 시 활성화) -->
                     <div v-if="categoryValue === 300102" class="mb-4">
                         <FormInput
                             title="비밀번호"
@@ -50,6 +56,8 @@
                             :is-essential="true"
                             :is-alert="passwordAlert"
                             v-model="password"
+                            @update:alert="passwordAlert = $event"
+                            @input="validatePassword"
                         />
                     </div>
 
@@ -61,14 +69,16 @@
                         @update:isValid="isFileValid = $event"
                     />
 
+                    <!-- 내용 입력 (에디터) -->
                     <div class="mb-4">
-                        <label for="html5-tel-input" class="col-md-2 col-form-label">
-                            내용
-                            <span class="text-danger">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
+                        <label class="col-md-2 col-form-label">
+                            내용 <span class="text-danger">*</span>
                         </label>
                         <div class="col-md-12">
-                            <QEditor @update:data="content = $event" />
+                            <QEditor @update:data="updateContent" />
+                        </div>
+                        <div class="invalid-feedback mt-1" :class="contentAlert ? 'd-block' : 'd-none'">
+                            내용을 입력해주세요.
                         </div>
                     </div>
 
@@ -115,10 +125,9 @@ const fetchCategories = async () => {
     try {
         const response = await axios.get('board/categories');
         categoryList.value = response.data.data;
-        // "자유" 카테고리 찾기 (CMNCODNAM이 '자유'인 것 선택)
         const freeCategory = categoryList.value.find(category => category.CMNCODNAM === '자유');
         if (freeCategory) {
-            categoryValue.value = freeCategory.CMNCODVAL; // 기본 선택값 설정
+            categoryValue.value = freeCategory.CMNCODVAL;
         }
     } catch (error) {
         console.error('카테고리 불러오기 오류:', error);
@@ -129,15 +138,44 @@ onMounted(() => {
     fetchCategories();
 });
 
+// 제목 유효성 검사: 공백만 입력하면 경고 유지, 문자 포함 시 정상
+const validateTitle = () => {
+    titleAlert.value = title.value.trim().length === 0;
+};
+
+// 비밀번호 유효성 검사: 공백 입력 방지
+const validatePassword = () => {
+    password.value = password.value.replace(/\s/g, ""); // 공백 제거
+    passwordAlert.value = password.value.length === 0;
+};
+
+// 에디터에서 업데이트된 데이터를 반영하는 함수
+const updateContent = (data) => {
+    let rawText = '';
+
+    if (typeof data === 'object' && data.ops) {
+        rawText = data.ops.map(op => (typeof op.insert === 'string' ? op.insert : '')).join('').trim();
+    } else if (typeof data === 'string') {
+        rawText = data.replace(/(<([^>]+)>)/gi, "").trim();
+    } else {
+        rawText = '';
+    }
+
+    content.value = rawText.length > 0 ? data : "";
+    contentAlert.value = rawText.length === 0;
+};
+
+/** 페이지 이동 (목록으로 이동) */
 const goList = () => {
     router.push('/board');
 };
 
 const write = async () => {
-    titleAlert.value = !title.value;
-    passwordAlert.value = categoryValue.value === 300102 && !password.value;
-    contentAlert.value = !content.value;
+    validateTitle();
+    validatePassword();
+
     categoryAlert.value = !categoryValue.value;
+    contentAlert.value = content.value.length === 0;
 
     if (titleAlert.value || passwordAlert.value || contentAlert.value || categoryAlert.value || !isFileValid.value) {
         return;
@@ -154,26 +192,6 @@ const write = async () => {
         const { data: boardResponse } = await axios.post('board', boardData);
         const boardId = boardResponse.data;
 
-        if (attachFiles.value && attachFiles.value.length > 0) {
-            for (const file of attachFiles.value) {
-                const formData = new FormData();
-                const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');
-
-                formData.append('CMNBRDSEQ', boardId);
-                formData.append('CMNFLEORG', fileNameWithoutExt);
-                formData.append('CMNFLEEXT', file.name.split('.').pop());
-                formData.append('CMNFLESIZ', file.size);
-                formData.append('CMNFLEPAT', 'boardfile');
-                formData.append('file', file);
-
-                await axios.post(`board/${boardId}/attachments`, formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                });
-            }
-        }
-
         toastStore.onToast('게시물이 작성되었습니다.', 's');
         goList();
     } catch (error) {