From 55d9ea0ebe9ef8bba554caa20cb2f039ca3a08fa Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Mon, 17 Mar 2025 13:07:44 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/WriteBtn.vue   | 13 ++++++++++++-
 src/components/wordDict/DictCard.vue |  1 -
 src/views/wordDict/wordDict.vue      |  7 ++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/button/WriteBtn.vue b/src/components/button/WriteBtn.vue
index 7f2bdb8..0d5cc7e 100644
--- a/src/components/button/WriteBtn.vue
+++ b/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";
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 541e0db..6b19f79 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/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'"
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index c81a75f..fe23c7f 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/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" />
                 <!-- 카테고리 -->