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

---
 src/components/button/EditBtn.vue             | 37 ++++++++++++-------
 src/components/button/WriteBtn.vue            |  2 +-
 src/components/category/CategoryBtn.vue       | 20 ++++++++--
 .../wordDict/DictAlphabetFilter.vue           | 15 +++++++-
 src/components/wordDict/DictCard.vue          | 29 ++++++++-------
 src/views/wordDict/wordDict.vue               | 24 +++++++++---
 6 files changed, 88 insertions(+), 39 deletions(-)

diff --git a/src/components/button/EditBtn.vue b/src/components/button/EditBtn.vue
index d3437b0..153525a 100644
--- a/src/components/button/EditBtn.vue
+++ b/src/components/button/EditBtn.vue
@@ -1,30 +1,39 @@
 <template>
-    <button class="btn btn-label-primary btn-icon" @click="toggleText">
-      <i :class="buttonClass"></i>
+    <button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
+        <i :class="buttonClass"></i>
     </button>
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue';
+import { ref, watch, defineProps } from 'vue';
 
 const props = defineProps({
-  isToggleEnabled: {
-      type: Boolean,
-      default: false,
-  },
+    isToggleEnabled: {
+        type: Boolean,
+        default: false,
+    },
+    isActive: {
+        type: Boolean,
+        required: false,
+    },
 });
 
-const buttonClass = ref("bx bx-edit-alt");
+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-alt" ? "bx bx-x" : "bx bx-edit-alt";
-  }
+    if (props.isToggleEnabled) {
+        buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
+    }
+};
+const resetButton = () => {
+    buttonClass.value = "bx bx-edit";
 };
 
-const resetButton = () => {
-    buttonClass.value = "bx bx-edit-alt";
-};
 
 defineExpose({ resetButton });
+
 </script>
diff --git a/src/components/button/WriteBtn.vue b/src/components/button/WriteBtn.vue
index 0bc6ef9..7f2bdb8 100644
--- a/src/components/button/WriteBtn.vue
+++ b/src/components/button/WriteBtn.vue
@@ -27,4 +27,4 @@ const resetButton = () => {
 };
 
 defineExpose({ resetButton });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/category/CategoryBtn.vue b/src/components/category/CategoryBtn.vue
index 6536b88..9e8138e 100644
--- a/src/components/category/CategoryBtn.vue
+++ b/src/components/category/CategoryBtn.vue
@@ -1,5 +1,18 @@
 <template>
     <ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
+        <li v-if="showAll" class="mt-2 me-2">
+        <button
+            type="button"
+            class="btn"
+            :class="{
+                'btn-outline-primary': selectedCategory !== 'all',
+                'btn-primary': selectedCategory === 'all'
+            }"
+            @click="selectCategory('all')"
+        >
+        All
+        </button>
+        </li>
         <li v-for="category in lists" :key="category.value" class="mt-2 me-2">
             <button
                 type="button"
@@ -26,6 +39,10 @@ const props = defineProps({
         type: Array,
         required: true,
     },
+    showAll: {
+        type: Boolean,
+        required: false,
+    },
 });
 
 // 카테고리 선택
@@ -46,9 +63,6 @@ const selectCategory = (cate) => {
         overflow-x: scroll;
         flex-wrap: nowrap !important;
 
-        li {
-            flex: 0 0 auto;
-        }
     }
 }
 </style>
diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
index 902ea28..e18f954 100644
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -1,5 +1,15 @@
 <template>
-        <ul class="d-flex p-0 mb-0">
+            <ul class="d-flex p-0 mb-0">
+            <li class="d-flex">
+            <button
+                type="button"
+                class="alphabet-btn"
+                :class="{ active: selectedAl === 'all' }"
+                @click="selectAlphabet('all')"
+            > 전체 ({{ totalCount}})
+            </button>
+            <span class="divider">|</span>
+            </li>
             <li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
                 <button
                     type="button"
@@ -43,6 +53,9 @@ const props = defineProps({
 });
 
 const selectedAlphabet = ref(props.selectedAl);
+const totalCount = computed(() => {
+    return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
+});
 const koreanChars = computed(() => {
     return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
 });
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 392a544..7a6377d 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -1,23 +1,23 @@
 <template>
     <li class="mt-5 card p-5">
-        <DictWrite 
-            v-if="writeStore.isItemActive(item.WRDDICSEQ)" 
-            @close="writeStore.closeAll();" 
-            :dataList="cateList" 
+        <DictWrite
+            v-if="writeStore.isItemActive(item.WRDDICSEQ)"
+            @close="writeStore.closeAll();"
+            :dataList="cateList"
             @addWord="editWord"
             :NumValue="item.WRDDICSEQ"
-            :formValue="item.WRDDICCAT" 
+            :formValue="item.WRDDICCAT"
             :titleValue="item.WRDDICTTL"
             :contentValue="item.WRDDICCON"
             :isDisabled="userStore.user.role !== 'ROLE_ADMIN'"
-        />
+            />
 
         <div v-else>
-            <input 
+            <input
                 v-if="userStore.user.role == 'ROLE_ADMIN'"
-                type="checkbox" 
+                type="checkbox"
                 class="form-check-input admin-chk"
-                :name="item.WRDDICSEQ" 
+                :name="item.WRDDICSEQ"
                 @change="toggleCheck($event)"
             >
             <div class="d-flex align-ite-center">
@@ -43,8 +43,8 @@
                     </div>
                 </div>
             </div>
-            <div 
-                v-if="item.author.createdAt !== item.lastEditor.updatedAt" 
+            <div
+                v-if="item.author.createdAt !== item.lastEditor.updatedAt"
                 class="d-flex justify-content-between flex-wrap gap-2 mb-2"
             >
                 <div class="d-flex flex-wrap align-items-center mb-50">
@@ -65,7 +65,8 @@
         </div>
 
         <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
-            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"/>
+            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"
+            :isActive="writeStore.activeItemId === item.WRDDICSEQ"/>
         </div>
     </li>
 </template>
@@ -124,7 +125,7 @@ const editWord = (data) => {
     })
     .then((res) => {
         if (res.data.data === 1) {
-            toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
+            toastStore.onToast('용어가 수정되었습니다.', 's');
             writeStore.closeAll();
             if (writeButton.value) {
                 writeButton.value.resetButton();
@@ -183,4 +184,4 @@ const toggleCheck = (event) => {
     top: -0.5rem;
     --bs-form-check-bg: #fff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index be95d5b..d83e19a 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -11,10 +11,10 @@
             <!-- 단어 갯수, 작성하기 -->
                 <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
             <!-- ㄱ ㄴ ㄷ ㄹ -->
-            <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet"/>
+            <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
             <!-- 카테고리 -->
             <div v-if="cateList.length">
-                <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
+                <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true"/>
             </div>
             <!-- 작성 -->
             <div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
@@ -28,7 +28,6 @@
             <div v-if="loading">로딩 중...</div>
             <!-- 에러 메시지 -->
             <div v-if="error" class="error">{{ error }}</div>
-
             <!-- 단어 목록 -->
             <ul v-if="total > 0" class="px-0 list-unstyled">
                 <DictCard
@@ -41,7 +40,7 @@
                 />
             </ul>
             <!-- 데이터가 없을 때 -->
-            <div v-else-if="!loading && !error" class="card p-5 text-center mt-5">✏️ 용어를 선택/작성해 주세요 ✏️ </div>
+            <div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요 </div>
         </div>
 
     </div>
@@ -153,13 +152,26 @@
     // 알파벳 선택
     const handleSelectedAlphabetChange = (newAlphabet) => {
         selectedAlphabet.value = newAlphabet;
-        getwordList(searchText.value, selectedAlphabet.value,  selectedCategory.value);
+        if (newAlphabet !== null) {
+            getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
+        } else {
+            wordList.value = [];
+            total.value = 0;
+        }
     };
 
     // 카테고리 선택
     const handleSelectedCategoryChange = (category) => {
         selectedCategory.value = category;
-        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
+        if (category !== null ) {
+            getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
+            if(category == 'all'){
+                getwordList(searchText.value, selectedAlphabet.value, '');
+            }
+        } else {
+            wordList.value = [];
+            total.value = 0;
+        }
     }
 
     // 용어집 등록

From 7a51ee37c8976853b6392d0ebfdfe84062b496d3 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 7 Mar 2025 11:18:58 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wordDict/DictWrite.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index 94a153b..77cb786 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -150,7 +150,6 @@ const saveWord = () => {
             typeof op.insert === 'string' ? op.insert.trim() : op.insert
         );
     }
-
     // 내용 체크
     if(content.value == '' || inserts.join('') === ''){
         wordContentAlert.value = true;