라디오박스수정

src/components/input/FormInput.vue

@@ -2,7 +2,7 @@
     <div class="mb-2 row">
         <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
             {{ title }}
-            <span :class="isEssential ? 'text-red' : 'none'">*</span>
+            <span class="text-danger">*</span>
         </label>
         <div class="col-md-10">
             <input

src/views/board/BoardWrite.vue

@@ -17,16 +17,32 @@
                         v-model="title"
                     />
 
-                    <FormSelect
+                    <!-- 카테고리 선택 -->
-                        title="카테고리"
+                    <div class="mb-4 d-flex align-items-center">
-                        name="cate"
+                        <label class="col-md-2 col-form-label">카테고리 <span class="text-danger">*</span></label>
-                        :is-essential="true"
+                        <div class="d-flex flex-wrap align-items-center mt-3 ms-1">
-                        :data="categoryList"
+                            <div
-                        @update:data="category = $event"
+                                v-for="(categoryName, index) in categoryList"
+                                :key="index"
+                                class="form-check me-3"
+                            >
+                                <input
+                                    class="form-check-input"
+                                    type="radio"
+                                    :id="`category-${index}`"
+                                    :value="index"
+                                    v-model="category"
                                 />
+                                <label class="form-check-label" :for="`category-${index}`">
+                                    {{ categoryName }}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
 
+                    <!-- 비밀번호 필드 -->
+                    <div v-if="category === 1" class="mb-4">
                         <FormInput
-                        v-show="category === 1"
                             title="비밀번호"
                             name="pw"
                             type="password"
@@ -34,6 +50,7 @@
                             :is-alert="passwordAlert"
                             v-model="password"
                         />
+                    </div>
 
                     <FormFile
                         title="첨부파일"
@@ -66,16 +83,15 @@
 <script setup>
 import QEditor from '@c/editor/QEditor.vue';
 import FormInput from '@c/input/FormInput.vue';
-import FormSelect from '@c/input/FormSelect.vue';
 import FormFile from '@c/input/FormFile.vue';
 import { ref } from 'vue';
 import router from '@/router';
 import axios from '@api';
 
-const categoryList = ['자유', '익명', '공지사항'];
+const categoryList = ['자유', '익명', '공지사항']; // 카테고리 이름
 const title = ref('');
 const password = ref('');
-const category = ref(0);
+const category = ref(0); // 기본값 0
 const content = ref('');
 const attachFiles = ref(null);
 
@@ -89,12 +105,10 @@ const goList = () => {
 };
 
 const write = async () => {
-    // 모든 필드 검사
+    titleAlert.value = !title.value;
-    titleAlert.value = !title.value; // 제목이 비어 있으면 true
+    passwordAlert.value = category.value === 1 && !password.value;
-    passwordAlert.value = category.value === 1 && !password.value; // 익명 카테고리일 때 비밀번호 비어 있으면 true
+    contentAlert.value = !content.value;
-    contentAlert.value = !content.value; // 내용이 비어 있으면 true
 
-    // 필수 값 중 하나라도 비어 있으면 함수 종료
     if (titleAlert.value || passwordAlert.value || contentAlert.value) {
         return;
     }
@@ -113,16 +127,14 @@ const write = async () => {
         if (attachFiles.value && attachFiles.value.length > 0) {
             for (const file of attachFiles.value) {
                 const formData = new FormData();
-
+                const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');
-            // 파일 이름에서 확장자 제거
-            const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, ''); // 정규식을 사용하여 확장자 제거
 
                 formData.append('CMNBRDSEQ', boardId);
-            formData.append('CMNFLEORG', fileNameWithoutExt); // 확장자를 제거한 이름
+                formData.append('CMNFLEORG', fileNameWithoutExt);
-            formData.append('CMNFLEEXT', file.name.split('.').pop()); // 확장자
+                formData.append('CMNFLEEXT', file.name.split('.').pop());
-            formData.append('CMNFLESIZ', file.size); // 파일 크기
+                formData.append('CMNFLESIZ', file.size);
-            formData.append('CMNFLEPAT', 'boardfile'); // 파일 경로
+                formData.append('CMNFLEPAT', 'boardfile');
-            formData.append('file', file); // 실제 파일 데이터
+                formData.append('file', file);
 
                 await axios.post(`board/${boardId}/attachments`, formData, {
                     headers: {
@@ -131,6 +143,7 @@ const write = async () => {
                 });
             }
         }
+
         alert('게시물이 작성되었습니다.');
         goList();
     } catch (error) {
@@ -139,4 +152,3 @@ const write = async () => {
     }
 };
 </script>
-