용어집수정정

src/components/input/FormInput.vue

@@ -19,9 +19,6 @@
                     @focusout="$emit('focusout', modelValue)"
                     @input="handleInput"
                 />
-                <div v-if="isBtn" class="ms-2">
-                    <slot name="append"></slot>
-                </div>
             </div>
             <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</div>
             <div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">카테고리 중복입니다.</div>

src/components/input/FormSelect.vue

@@ -10,6 +10,9 @@
                     {{ isCommon ? item.label : item }}
                 </option>
             </select>
+            <div v-if="isBtn" class="ms-2">
+                    <slot name="append"></slot>
+            </div>
 
             <div v-if="isColor && selected"
                     class="w-px-40 h-px-30"
@@ -70,6 +73,11 @@ const props = defineProps({
         default: true,
         required: false,
     },
+    isBtn: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
     isCommon: {
         type: Boolean,
         default: false,

src/components/wordDict/DictWrite.vue

@@ -1,8 +1,6 @@
 <template>
     <div>
-        <div class="row">
+        <FormSelect class="me-5"
-            <div class="col-10">
-                <FormSelect
             name="cate"
             title="카테고리"
             :data="dataList"
@@ -12,27 +10,22 @@
             :value="formValue"
             :is-essential="false"
         />
-            </div>
+        <div v-if="!isDisabled" class="add-btn">
-            <div class="col-2" v-if="!isDisabled">
             <PlusBtn @click="toggleInput"/>
         </div>
     </div>
 
-        <div class="row" v-if="showInput">
+        <div v-if="showInput">
-            <div class="col-10">
+            <FormInput class="me-5"
-                <FormInput
                 ref="categoryInputRef"
                 title="새 카테고리"
-                    name="카테고리"
+                name="새 카테고리"
                 @update:modelValue="addCategory = $event"
                 :is-cate-alert="addCategoryAlert"
                 @focusout="handleCategoryFocusout(addCategory)"
             />
         </div>
-        </div>
+        <FormInput class="me-5"
-    </div>
-    <div class="dict-w">
-        <FormInput
             title="용어"
             type="text"
             name="word"
@@ -43,9 +36,8 @@
             :disabled="isDisabled"
             @keyup="ValidHandler('title')"
         />
-    </div>
         <div>
-        <QEditor  @keyup="ValidHandler('content')"  @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
+            <QEditor class="" @keyup="ValidHandler('content')"  @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
             <div class="text-end mt-5">
                 <button class="btn btn-primary" @click="saveWord">
                     <i class="bx bx-check"></i>
@@ -188,8 +180,9 @@ const saveWord = () => {
 
 // 카테고리 focusout 이벤트 핸들러 추가
 const handleCategoryFocusout = (value) => {
-    const valueTrim = value.trim();
 
+    const valueTrim = value.trim();
+    if(value){
         const existingCategory = props.dataList.find(item => item.label === valueTrim);
 
         // 카테고리 입력시 공백
@@ -219,6 +212,7 @@ const handleCategoryFocusout = (value) => {
         } else {
             addCategoryAlert.value = false;
         }
+    }
 };
 
 
@@ -234,4 +228,9 @@ const handleCategoryFocusout = (value) => {
         margin-top: 2.5rem
     }
 }
+.add-btn {
+    position: absolute;
+    right: 0.7rem;
+    top: 1.2rem;
+}
 </style>

src/views/wordDict/wordDict.vue

@@ -19,12 +19,10 @@
 
             <!-- 용어 리스트 컨텐츠 -->
             <div class="flex-grow-1">
-
                 <!-- 작성 -->
-                <div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5">
+                <div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
                     <DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
                 </div>
-
                 <!-- 용어 리스트 -->
                 <div>
                     <!-- 로딩 중일 때 -->