라디오박스수정

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,23 +17,40 @@
                         v-model="title"
                     />
 
-                    <FormSelect
-                        title="카테고리"
-                        name="cate"
-                        :is-essential="true"
-                        :data="categoryList"
-                        @update:data="category = $event"
-                    />
+                    <!-- 카테고리 선택 -->
+                    <div class="mb-4 d-flex align-items-center">
+                        <label class="col-md-2 col-form-label">카테고리 <span class="text-danger">*</span></label>
+                        <div class="d-flex flex-wrap align-items-center mt-3 ms-1">
+                            <div
+                                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>
 
-                    <FormInput
-                        v-show="category === 1"
-                        title="비밀번호"
-                        name="pw"
-                        type="password"
-                        :is-essential="true"
-                        :is-alert="passwordAlert"
-                        v-model="password"
-                    />
+                    <!-- 비밀번호 필드 -->
+                    <div v-if="category === 1" class="mb-4">
+                        <FormInput
+                            title="비밀번호"
+                            name="pw"
+                            type="password"
+                            :is-essential="true"
+                            :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; // 제목이 비어 있으면 true
-    passwordAlert.value = category.value === 1 && !password.value; // 익명 카테고리일 때 비밀번호 비어 있으면 true
-    contentAlert.value = !content.value; // 내용이 비어 있으면 true
+    titleAlert.value = !title.value;
+    passwordAlert.value = category.value === 1 && !password.value;
+    contentAlert.value = !content.value;
 
-    // 필수 값 중 하나라도 비어 있으면 함수 종료
     if (titleAlert.value || passwordAlert.value || contentAlert.value) {
         return;
     }
@@ -111,26 +125,25 @@ const write = async () => {
         const boardId = boardResponse.data.CMNBRDSEQ;
 
         if (attachFiles.value && attachFiles.value.length > 0) {
-        for (const file of attachFiles.value) {
-            const formData = new FormData();
+            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('CMNFLEEXT', file.name.split('.').pop());
+                formData.append('CMNFLESIZ', file.size);
+                formData.append('CMNFLEPAT', 'boardfile');
+                formData.append('file', file);
 
-            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',
-                },
-            });
+                await axios.post(`board/${boardId}/attachments`, formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+            }
         }
-    }
+
         alert('게시물이 작성되었습니다.');
         goList();
     } catch (error) {
@@ -139,4 +152,3 @@ const write = async () => {
     }
 };
 </script>
-