버튼 수정

src/components/button/WriteBtn.vue

@@ -5,17 +5,28 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineExpose } from 'vue';
+import { ref, defineProps, defineExpose, watch } from 'vue';
 
 const props = defineProps({
     isToggleEnabled: {
         type: Boolean,
         default: false,
     },
+    isActive: {
+            type: Boolean,
+            required: false,
+    },
 });
 
 const buttonClass = ref("bx bx-edit");
 
+watch(
+    () => props.isActive,
+    newVal => {
+        buttonClass.value = newVal ? 'bx bx-x' : 'bx bx-edit';
+    },
+);
+
 const toggleText = () => {
     if (props.isToggleEnabled) {
         buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";

src/components/wordDict/DictCard.vue

@@ -11,7 +11,6 @@
             :contentValue="item.WRDDICCON"
             :isDisabled="userStore.user.role !== 'ROLE_ADMIN'"
             />
-
         <div v-else>
             <input
                 v-if="userStore.user.role == 'ROLE_ADMIN'"

src/views/wordDict/wordDict.vue

@@ -6,9 +6,10 @@
         <SearchBar @update:data="search"/>
         <div class="d-flex">
         <!-- 단어 갯수, 작성하기 -->
-        <!-- 왼쪽 사이드바 -->
-        <div class="sidebar position-sticky" style="top: 100px; max-width: 250px; min-width: 250px;">
-                <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
+            <!-- 왼쪽 사이드바 -->
+            <div class="sidebar position-sticky" style="top: 100px; max-width: 250px; min-width: 250px;">
+                <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"
+                :isActive="writeStore.activeItemId === 999999"/>
                 <!-- ㄱ ㄴ ㄷ ㄹ -->
                 <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
                 <!-- 카테고리 -->