용어집 목록 수정

src/components/wordDict/DictAlphabetFilter.vue

@@ -1,18 +1,25 @@
 <template>
     <div>
-        <!-- 한글 버튼들 -->
+        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
-        <ul>
+            <li v-for="char in koreanChars" :key="char" class="mt-2 mx-1">
-            <li v-for="char in koreanChars" :key="char" >
+                <button 
-                <button type="button" class="nav-link" @click="filterByKoreanChar(char)">
+                    type="button" 
+                    class="btn" 
+                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'" 
+                    @click="selectAlphabet(char)"
+                >
                     {{ char }}
                 </button>
             </li>
         </ul>
-
+        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
-        <!-- 영어 버튼들 -->
+            <li v-for="char in englishChars" :key="char" class="mt-2 mx-1">
-        <ul>
+                <button 
-            <li v-for="char in englishChars" :key="char">
+                    type="button" 
-                <button type="button" class="nav-link" @click="filterByEnglishChar(char)">
+                    class="btn" 
+                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'" 
+                    @click="selectAlphabet(char)"
+                >
                     {{ char }}
                 </button>
             </li>
@@ -21,28 +28,27 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { ref } from 'vue';
 
-const emit = defineEmits();
+const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
+const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
 
-const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ'];
+const selectedAlphabet = ref(null);
-const englishChars = ['a', 'b', 'c', 'd', 'e'];
 
-// 한글 필터링
+const selectAlphabet = (alphabet) => {
-const filterByKoreanChar = (char) => {
+    selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
-    emit('filter', char, 'korean');
-};
-
-// 영어 필터링
-const filterByEnglishChar = (char) => {
-    emit('filter', char, 'english');
 };
 </script>
 
 <style scoped>
-.nav-pills {
+.alphabet-list {
-    display: flex;
+    margin-left: -0.25rem;
-    justify-content: space-between;
+}
-    margin-top: 10px;
+
+@media (max-width: 768px) {
+    .alphabet-list {
+        overflow: scroll;
+        flex-wrap: nowrap !important;
+    }
 }
 </style>

src/components/wordDict/DictCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="mt-5">
+    <li class="mt-5 card p-5">
         <div class="d-flex align-items-center">
             <div class="w-100 d-flex align-items-center">
                 <span class="btn btn-primary">{{ item.category }}</span>
@@ -7,7 +7,7 @@
             </div>
             <EditBtn />
         </div>
-        <p class="mt-5">{{ item.WRDDICCON }}</p>
+        <p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
         <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
             <div class="d-flex flex-wrap align-items-center mb-50">
                 <div class="avatar avatar-sm me-2">

src/views/wordDict/wordDict.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
 
-        <div class="card">
+        <div class="card p-5">
             <!-- 타이틀, 검색 -->
-            <div class="row mt-4">
+            <div class="row">
-                <div class="col-6">
+                <div class="col-12 col-md-6">
-                    <h5 class="mb-0">용어집</h5>
+                    <h5 class="mb-0 title">용어집</h5>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <SearchBar @update:data="search"/>
                 </div>
             </div>
@@ -32,30 +32,30 @@
             <div v-if="isWriteVisible" class="mt-5">
                 <DictWrite @close="isWriteVisible = false" />
             </div>
-
-            <!-- 용어 리스트 -->
-            <div class="mt-10">
-                <!-- 로딩 중일 때 -->
-                <div v-if="loading">로딩 중...</div>
-
-                <!-- 에러 메시지 -->
-                <div v-if="error" class="error">{{ error }}</div>
-
-                <!-- 단어 목록 -->
-                <ul v-if="filteredList.length" class="px-0 list-unstyled">
-                    <DictCard
-                    v-for="item in filteredList"
-                    :key="item.WRDDICSEQ"
-                    :item="item"
-                    />
-                </ul>
-
-                <!-- 데이터가 없을 때 -->
-                <div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
-
-            </div>
         </div>
 
+<!-- 용어 리스트 -->
+<div class="mt-10">
+    <!-- 로딩 중일 때 -->
+    <div v-if="loading">로딩 중...</div>
+
+    <!-- 에러 메시지 -->
+    <div v-if="error" class="error">{{ error }}</div>
+
+    <!-- 단어 목록 -->
+    <ul v-if="filteredList.length" class="px-0 list-unstyled">
+        <DictCard
+        v-for="item in filteredList"
+        :key="item.WRDDICSEQ"
+        :item="item"
+        />
+    </ul>
+
+    <!-- 데이터가 없을 때 -->
+    <div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
+
+</div>
+
     </div>
     
 </template>
@@ -95,6 +95,7 @@
             const wordResponse = await axios.get('worddict/getWordList');
             wordList.value = wordResponse.data.data.data;
             console.log('용어집 데이터:', wordList.value);
+
             // 카테고리
             const categoryResponse = await axios.get('worddict/getWordCategory');
             cateList.value = categoryResponse.data.data;
@@ -137,12 +138,14 @@
 
 <style scoped>
 
-.card > div {
-    padding: 0 30px
-}
-
 .error {
     color: red;
     font-weight: bold;
 }
+
+@media (max-width: 768px) {
+    .title {
+        margin-bottom: 0.5rem !important;
+    }
+}
 </style>