From 4258881d4b3d3e60182a9b20f6d874df81251bbc Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Mon, 17 Mar 2025 10:24:41 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormInput.vue    |   3 -
 src/components/input/FormSelect.vue   |   8 ++
 src/components/wordDict/DictWrite.vue | 123 +++++++++++++-------------
 src/views/wordDict/wordDict.vue       |   4 +-
 4 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 7c1da23..931ff2e 100644
--- a/src/components/input/FormInput.vue
+++ b/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>
diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index bc7e9f4..915deaf 100644
--- a/src/components/input/FormSelect.vue
+++ b/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,
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index c672043..f4fd4a2 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -1,38 +1,31 @@
 <template>
     <div>
-        <div class="row">
-            <div class="col-10">
-                <FormSelect
-                    name="cate"
-                    title="카테고리"
-                    :data="dataList"
-                    :is-common="true"
-                    @update:data="selectCategory = $event"
-                    @change="onChange"
-                    :value="formValue"
-                    :is-essential="false"
-                />
-            </div>
-            <div class="col-2" v-if="!isDisabled">
-                <PlusBtn @click="toggleInput"/>
-            </div>
-        </div>
-
-        <div class="row" v-if="showInput">
-            <div class="col-10">
-                <FormInput
-                    ref="categoryInputRef"
-                    title="새 카테고리"
-                    name="카테고리"
-                    @update:modelValue="addCategory = $event"
-                    :is-cate-alert="addCategoryAlert"
-                    @focusout="handleCategoryFocusout(addCategory)"
-                />
-            </div>
+        <FormSelect class="me-5"
+            name="cate"
+            title="카테고리"
+            :data="dataList"
+            :is-common="true"
+            @update:data="selectCategory = $event"
+            @change="onChange"
+            :value="formValue"
+            :is-essential="false"
+        />
+        <div v-if="!isDisabled" class="add-btn">
+            <PlusBtn @click="toggleInput"/>
         </div>
     </div>
-    <div class="dict-w">
-        <FormInput
+
+        <div v-if="showInput">
+            <FormInput class="me-5"
+                ref="categoryInputRef"
+                title="새 카테고리"
+                name="새 카테고리"
+                @update:modelValue="addCategory = $event"
+                :is-cate-alert="addCategoryAlert"
+                @focusout="handleCategoryFocusout(addCategory)"
+            />
+        </div>
+        <FormInput class="me-5"
             title="용어"
             type="text"
             name="word"
@@ -43,15 +36,14 @@
             :disabled="isDisabled"
             @keyup="ValidHandler('title')"
         />
-    </div>
-    <div>
-        <QEditor  @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>
-            </button>
+        <div>
+            <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>
+                </button>
+            </div>
         </div>
-    </div>
 </template>
 
 <script setup>
@@ -188,36 +180,38 @@ const saveWord = () => {
 
 // 카테고리 focusout 이벤트 핸들러 추가
 const handleCategoryFocusout = (value) => {
+
     const valueTrim = value.trim();
+    if(value){
+        const existingCategory = props.dataList.find(item => item.label === valueTrim);
 
-    const existingCategory = props.dataList.find(item => item.label === valueTrim);
+        // 카테고리 입력시 공백
+        if(valueTrim == ''){
+            addCategoryAlert.value = true;
 
-    // 카테고리 입력시 공백
-    if(valueTrim == ''){
-        addCategoryAlert.value = true;
-
-        // 공백시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+            // 공백시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
 
 
-    }else if (existingCategory) {
-        addCategoryAlert.value = true;
+        }else if (existingCategory) {
+            addCategoryAlert.value = true;
 
-        // 중복시 강제 focus
-        setTimeout(() => {
-            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-            if (inputElement) {
-                inputElement.focus();
-            }
-        }, 0);
+            // 중복시 강제 focus
+            setTimeout(() => {
+                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 0);
 
-    } else {
-        addCategoryAlert.value = false;
+        } 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>
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index f4fef8e..c81a75f 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/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>
                     <!-- 로딩 중일 때 -->