From fe8abc7f7c846e544dcbb1428e952bf289c96f28 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 14 Mar 2025 13:16:47 +0900
Subject: [PATCH] =?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

---
 .../wordDict/DictAlphabetFilter.vue           | 64 +++++++++----
 src/components/wordDict/DictCard.vue          |  4 +-
 src/components/wordDict/DictWrite.vue         |  5 +-
 src/views/wordDict/wordDict.vue               | 96 +++++++++++--------
 4 files changed, 101 insertions(+), 68 deletions(-)

diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
index e18f954..8479312 100644
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -1,29 +1,18 @@
 <template>
-            <ul class="d-flex p-0 mb-0">
-            <li class="d-flex">
+    <!-- <ul class="d-flex p-0 mb-0 flex-wrap">
+        <li class="d-flex">
             <button
                 type="button"
                 class="alphabet-btn"
                 :class="{ active: selectedAl === 'all' }"
                 @click="selectAlphabet('all')"
-            > 전체 ({{ totalCount}})
+            > 전체 ({{ totalCount }})
             </button>
-            <span class="divider">|</span>
-            </li>
-            <li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
-                <button
-                    type="button"
-                    class="alphabet-btn"
-                    :class="{ active: selectedAl === char.CHARACTER_ }"
-                    @click="selectAlphabet(char.CHARACTER_)"
-                >
-                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
-                </button>
-                <span v-if="index !== koreanChars.length - 1" class="divider">|</span>
-            </li>
-        </ul>
+        </li>
+    </ul> -->
+    <div v-for="(group, groupIndex) in chunkedKoreanChars" :key="'ko-group-' + groupIndex">
         <ul class="d-flex p-0 mb-0">
-            <li v-for="(char, index) in englishChars" :key="char.CHARACTER_" class="d-flex">
+            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
                 <button
                     type="button"
                     class="alphabet-btn"
@@ -32,9 +21,25 @@
                 >
                     {{ char.CHARACTER_ }} ({{ char.COUNT }})
                 </button>
-                <span v-if="index !== englishChars.length - 1" class="divider">|</span>
+                <span v-if="index !== group.length - 1" class="divider">|</span>
             </li>
         </ul>
+    </div>
+    <div v-for="(group, groupIndex) in chunkedEnglishChars" :key="'en-group-' + groupIndex">
+        <ul class="d-flex p-0 mb-0">
+            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
+                <button
+                    type="button"
+                    class="alphabet-btn"
+                    :class="{ active: selectedAl === char.CHARACTER_ }"
+                    @click="selectAlphabet(char.CHARACTER_)"
+                >
+                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
+                </button>
+                <span v-if="index !== group.length - 1" class="divider">|</span>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script setup>
@@ -47,7 +52,7 @@ const props = defineProps({
     },
     selectedAl: {
         type: String,
-        default : '',
+        default: '',
         required: false,
     },
 });
@@ -56,14 +61,24 @@ const selectedAlphabet = ref(props.selectedAl);
 const totalCount = computed(() => {
     return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
 });
+
+const chunkArray = (arr, size) => {
+    return arr.reduce((acc, _, i) => {
+        if (i % size === 0) acc.push(arr.slice(i, i + size));
+        return acc;
+    }, []);
+};
+
 const koreanChars = computed(() => {
     return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
 });
-
 const englishChars = computed(() => {
     return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
 });
 
+const chunkedKoreanChars = computed(() => chunkArray(koreanChars.value, 5));
+const chunkedEnglishChars = computed(() => chunkArray(englishChars.value, 5));
+
 const emit = defineEmits();
 const selectAlphabet = (alphabet) => {
     selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
@@ -81,6 +96,7 @@ const selectAlphabet = (alphabet) => {
     cursor: pointer;
     width: 70%;
     height: 40px;
+    transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition for color */
 }
 
 .alphabet-btn:hover {
@@ -90,10 +106,16 @@ const selectAlphabet = (alphabet) => {
 .alphabet-btn.active {
     color: #0d6efd;
     text-decoration: underline;
+    font-size: 13px; /* Keep font size fixed in active state */
 }
+
 .divider {
     color: #bbb;
     font-size: 14px;
     font-weight: bold;
 }
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
 </style>
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 7a6377d..541e0db 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <li class="mt-5 card p-5">
+    <li class="card p-5 mb-2">
         <DictWrite
             v-if="writeStore.isItemActive(item.WRDDICSEQ)"
             @close="writeStore.closeAll();"
@@ -64,7 +64,7 @@
             </div>
         </div>
 
-        <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
+        <div class="edit-btn">
             <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"
             :isActive="writeStore.activeItemId === item.WRDDICSEQ"/>
         </div>
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index daec5be..28c8b9c 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -4,13 +4,12 @@
             <div class="col-10">
                 <FormSelect
                     name="cate"
-                    title="카테고리 선택"
+                    title="카테고리"
                     :data="dataList"
                     :is-common="true"
                     @update:data="selectCategory = $event"
                     @change="onChange"
                     :value="formValue"
-                    :disabled="isDisabled"
                     :is-essential="false"
                 />
             </div>
@@ -23,7 +22,7 @@
             <div class="col-10">
                 <FormInput
                     ref="categoryInputRef"
-                    title="카테고리 입력"
+                    title="새 카테고리"
                     name="카테고리"
                     @update:modelValue="addCategory = $event"
                     :is-cate-alert="addCategoryAlert"
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index ebd0a67..f4fef8e 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -1,48 +1,57 @@
 <template>
-    <div class="container-xxl flex-grow-1 container-p-y">
-        <div >
-            <!-- 타이틀, 검색 -->
-            <SearchBar @update:data="search"/>
-            <!-- 단어 갯수, 작성하기 -->
-            <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
-            <!-- ㄱ ㄴ ㄷ ㄹ -->
-            <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
-            <!-- 카테고리 -->
-            <div v-if="cateList.length">
-                <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory"  />
+<div class="container-xxl flex-grow-1 container-p-y d-flex">
+    <!-- 메인 컨텐츠 -->
+    <div class="flex-grow-1">
+        <!-- 타이틀, 검색 -->
+        <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"/>
+                <!-- ㄱ ㄴ ㄷ ㄹ -->
+                <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
+                <!-- 카테고리 -->
+                <div v-if="cateList.length" class="mt-3">
+                    <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory"  />
+                </div>
             </div>
-            <!-- 작성 -->
-            <div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
-                <DictWrite @close="writeStore.closeAll()" :dataList="cateList"  @addWord="addWord"/>
+
+            <!-- 용어 리스트 컨텐츠 -->
+            <div class="flex-grow-1">
+
+                <!-- 작성 -->
+                <div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5">
+                    <DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
+                </div>
+
+                <!-- 용어 리스트 -->
+                <div>
+                    <!-- 로딩 중일 때 -->
+                    <LoadingSpinner v-if="loading"/>
+                    <!-- 에러 메시지 -->
+                    <div v-if="error" class="error">{{ error }}</div>
+                    <!-- 단어 목록 -->
+                    <ul v-if="total > 0" class="ms-3 list-unstyled">
+                        <DictCard
+                            v-for="item in wordList"
+                            :key="item.WRDDICSEQ"
+                            :item="item"
+                            v-model:cateList="cateList"
+                            @refreshWordList="refreshWordList"
+                            @updateChecked="updateCheckedItems"
+                        />
+                    </ul>
+                    <!-- 데이터가 없을 때 -->
+                    <div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요</div>
+                </div>
             </div>
         </div>
-
-        <!-- 용어 리스트 -->
-        <div >
-            <!-- 로딩 중일 때 -->
-            <LoadingSpinner v-if="loading"/>
-            <!-- 에러 메시지 -->
-            <div v-if="error" class="error">{{ error }}</div>
-            <!-- 단어 목록 -->
-            <ul v-if="total > 0" class="px-0 list-unstyled">
-                <DictCard
-                    v-for="item in wordList"
-                    :key="item.WRDDICSEQ"
-                    :item="item"
-                    v-model:cateList="cateList"
-                    @refreshWordList="refreshWordList"
-                    @updateChecked="updateCheckedItems"
-                />
-            </ul>
-            <!-- 데이터가 없을 때 -->
-            <div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요 </div>
-        </div>
-
     </div>
-
-    <button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
-        <i class="bx bx-trash"></i>
-    </button>
+</div>
+<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
+    <i class="bx bx-trash"></i>
+</button>
 
 </template>
 
@@ -255,7 +264,6 @@
 </script>
 
 <style scoped>
-
 .admin-del-btn {
     position: fixed;
     right: 1.5rem;
@@ -263,11 +271,15 @@
     width: 3rem;
     height: 3rem;
 }
-
 .error {
     color: red;
     font-weight: bold;
 }
+.sidebar {
+    position: sticky;
+    top: 5px;
+    height: fit-content;
+}
 
 @media (max-width: 768px) {
     .title {