카테고리 추가 버튼 css 수정

src/components/wordDict/DictWrite.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="dataList.length > 0">
+    <div v-if="dataList.length > 0" >
         <FormSelect
             class="me-5"
             name="cate"
@@ -10,14 +10,18 @@
             @change="onChange"
             :value="formValue"
             :is-essential="false"
-        />
-        <div v-if="!isDisabled" class="add-btn">
-            <PlusBtn @click="toggleInput"/>
-        </div>
+            :is-btn="true"
+        >
+        <template v-slot:append>
+            <div v-if="!isDisabled">
+                <PlusBtn @click="toggleInput"/>
+            </div>
+        </template>
+        </FormSelect>
     </div>
     <div v-if="dataList.length === 0 || showInput">
         <FormInput
-            class="me-5 parent-class "
+            class="me-5 justify-content-end"
             ref="categoryInputRef"
             title="새 카테고리"
             :isLabel="dataList.length === 0 ?true : false"
@@ -204,23 +208,3 @@ const handleCategoryFocusout = (value) => {
 };
 
 </script>
-
-<style scoped>
-.dict-w {
-    width: 83%;
-}
-
-@media (max-width: 768px) {
-    .btn-margin {
-        margin-top: 2.5rem
-    }
-}
-.add-btn {
-    position: absolute;
-    right: 0.7rem;
-    top: 1.2rem;
-}
-.parent-class {
-  justify-content: flex-end;
-}
-</style>