From f32a45c69cff024ee7d23e9fff400a96fae6e855 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Fri, 24 Jan 2025 15:03:55 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/category/CategoryBtn.vue       |  49 +++++++
 .../wordDict/DictAlphabetFilter.vue           |  48 +++++++
 src/components/wordDict/DictCard.vue          |  50 +++++++
 src/components/wordDict/DictWrite.vue         |  21 +++
 src/views/wordDict/wordDict.vue               | 129 +++++-------------
 5 files changed, 203 insertions(+), 94 deletions(-)
 create mode 100644 src/components/category/CategoryBtn.vue
 create mode 100644 src/components/wordDict/DictAlphabetFilter.vue
 create mode 100644 src/components/wordDict/DictCard.vue
 create mode 100644 src/components/wordDict/DictWrite.vue

diff --git a/src/components/category/CategoryBtn.vue b/src/components/category/CategoryBtn.vue
new file mode 100644
index 0000000..912348c
--- /dev/null
+++ b/src/components/category/CategoryBtn.vue
@@ -0,0 +1,49 @@
+<template>
+    <ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
+        <li
+        v-for="category in lists"
+        :key="category.CMNCODVAL"
+        class="mt-2 mx-1"
+        >
+            <button 
+                type="button"
+                class="btn"
+                :class="{
+                    'btn-outline-primary': category !== selectedCategory,
+                    'btn-primary': category === selectedCategory
+                }" 
+                @click="selectCategory(category)"
+            >{{ category.CMNCODNAM }}</button>
+        </li>
+    </ul>
+</template>
+
+<script setup>
+import { defineProps, ref  } from 'vue';
+
+// lists prop 정의
+const props = defineProps({
+    lists: {
+        type: Array,
+        required: true,
+    },
+});
+
+// 카테고리 선택
+const selectedCategory = ref(null);
+
+const selectCategory = (category) => {
+    selectedCategory.value = category;
+};
+</script>
+
+
+<style scoped>
+.cate-list {
+    margin-left: -0.25rem;
+}
+
+@media screen and  (max-width:450px) {
+    
+}
+</style>
\ No newline at end of file
diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
new file mode 100644
index 0000000..bdc0c15
--- /dev/null
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <!-- 한글 버튼들 -->
+        <ul>
+            <li v-for="char in koreanChars" :key="char" >
+                <button type="button" class="nav-link" @click="filterByKoreanChar(char)">
+                    {{ char }}
+                </button>
+            </li>
+        </ul>
+
+        <!-- 영어 버튼들 -->
+        <ul>
+            <li v-for="char in englishChars" :key="char">
+                <button type="button" class="nav-link" @click="filterByEnglishChar(char)">
+                    {{ char }}
+                </button>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const emit = defineEmits();
+
+const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ'];
+const englishChars = ['a', 'b', 'c', 'd', 'e'];
+
+// 한글 필터링
+const filterByKoreanChar = (char) => {
+    emit('filter', char, 'korean');
+};
+
+// 영어 필터링
+const filterByEnglishChar = (char) => {
+    emit('filter', char, 'english');
+};
+</script>
+
+<style scoped>
+.nav-pills {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
new file mode 100644
index 0000000..9477747
--- /dev/null
+++ b/src/components/wordDict/DictCard.vue
@@ -0,0 +1,50 @@
+<template>
+    <li class="mt-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>
+                <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
+            </div>
+            <EditBtn />
+        </div>
+        <p class="mt-5">{{ 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">
+                    <img :src="getProfileImage(item.author.profileImage)" alt="최초 작성자" class="rounded-circle">
+                </div>
+                <div>
+                    <p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
+                </div>
+            </div>
+        </div>
+        <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">
+                    <img :src="getProfileImage(item.lastEditor.profileImage)" alt="최근 작성자" class="rounded-circle">
+                </div>
+                <div>
+                    <p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
+                </div>
+            </div>
+        </div>
+    </li>
+</template>
+
+<script setup>
+import EditBtn from '@/components/button/EditBtn.vue';
+
+  // Props
+defineProps({
+    item: {
+        type: Object,
+        required: true,
+    },
+});
+
+// 날짜
+const formatDate = (dateString) => new Date(dateString).toLocaleString();
+// 이미지
+const getProfileImage = (imagePath) =>
+imagePath ? `/img/avatars/${imagePath}` : '/img/avatars/default-Profile.jpg';
+</script>
\ No newline at end of file
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
new file mode 100644
index 0000000..441ffbe
--- /dev/null
+++ b/src/components/wordDict/DictWrite.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <FormSelect/>
+        <button>쇼핑몰</button>
+        <button>저장</button>
+    </div>
+    <div>
+        <FormInput/>
+    </div>
+    <div>
+        <QEditor/>
+        <button>저장</button>
+        <button @click="$emit('close')">취소</button>
+    </div>
+</template>
+
+<script setup>
+import QEditor from '@/components/editor/QEditor.vue';
+import FormInput from '@/components/input/FormInput.vue';
+import FormSelect from '@/components/input/FormSelect.vue';
+</script>
\ No newline at end of file
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 4382d55..1ba0c77 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -15,47 +15,26 @@
             <!-- 단어 갯수, 작성하기 -->
             <div class="mt-4">
                 단어 : {{ filteredList.length }}
-                <WriteButton />
+                <WriteButton @click="toggleWriteForm" />
             </div>
 
+            <!-- ㄱ ㄴ ㄷ ㄹ -->
             <div>
-                <div class="nav-align-top">
-                    <ul class="nav nav-pills" role="tablist">
-                        <li class="nav-item" role="presentation">
-                            <button type="button" class="nav-link">ㄱ</button>
-                        </li>
-                        <li class="nav-item" role="presentation">
-                            <button type="button" class="nav-link">ㄴ</button>
-                        </li>
-                        <li class="nav-item" role="presentation">
-                            <button type="button" class="nav-link">ㄷ</button>
-                        </li>
-                    </ul>
-                    <ul class="nav nav-pills" role="tablist">
-                        <li class="nav-item" role="presentation">
-                            <button type="button" class="nav-link">a</button>
-                        </li>
-                        <li class="nav-item" role="presentation">
-                            <button type="button" class="nav-link">b</button>
-                        </li>
-                        <li class="nav-item" role="presentation">
-                            <button type="button" class="nav-link">c</button>
-                        </li>
-                    </ul>
-                </div>
+                <DictAlphabetFilter/>
             </div>
             
             <!-- 카테고리 -->
-            <div>
-                <ul v-if="cateList.length">
-                    <li v-for="item in cateList" :key="item.CMNCODVAL">
-                        <button>{{ item.CMNCODNAM }}</button>
-                    </li>
-                </ul>
+            <div v-if="cateList.length" class="mt-5">
+                <CategoryBtn :lists="cateList" />
+            </div>
+
+            <!-- 작성 -->
+            <div v-if="isWriteVisible" class="mt-5">
+                <DictWrite @close="isWriteVisible = false" />
             </div>
 
             <!-- 용어 리스트 -->
-            <div>
+            <div class="mt-10">
                 <!-- 로딩 중일 때 -->
                 <div v-if="loading">로딩 중...</div>
 
@@ -63,48 +42,18 @@
                 <div v-if="error" class="error">{{ error }}</div>
 
                 <!-- 단어 목록 -->
-                <ul v-if="filteredList.length" class="word-list">
-                    <li v-for="item in filteredList" :key="item.WRDDICSEQ">
-                        <div class="d-flex">
-                            <div>
-                                ({{ item.category }}) <strong>{{ item.WRDDICTTL }}</strong>
-                            </div>
-                            <WriteButton />
-                        </div>
-                        <p>{{ item.WRDDICCON }}</p>
-                        <div>
-                            <img :src="'/img/avatars/' + item.author.profileImage" alt="최초 작성자" />
-                            최초 작성자 {{ item.author.name }}
-                            작성일 {{ new Date(item.author.createdAt).toLocaleString() }}
-                        </div>
-                        <div>
-                            <img :src="'/img/avatars/' + item.lastEditor.profileImage" alt="최근 수정자" />
-                            최근 수정자 {{ item.lastEditor.name }}
-                            수정일 {{ new Date(item.lastEditor.updatedAt).toLocaleString() }}
-                        </div>
-                    </li>
+                <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>
-                    <FormSelect/>
-                    <button>쇼핑몰</button>
-                    <button>저장</button>
-                </div>
-                <div>
-                    <FormInput/>
-                </div>
-                <div>
-                    <QEditor/>
-                    <button>저장</button>
-                </div>
-            </div>
         </div>
 
     </div>
@@ -116,35 +65,36 @@
     import axios from '@api';
     import SearchBar from '@c/search/SearchBar.vue';
     import WriteButton from '@c/button/WriteBtn.vue';
-    import QEditor from '@/components/editor/QEditor.vue';
-    import FormInput from '@/components/input/FormInput.vue';
-    import FormSelect from '@/components/input/FormSelect.vue';
+    import CategoryBtn from '@/components/category/CategoryBtn.vue';
+    import DictCard from '@/components/wordDict/DictCard.vue';
+    import DictWrite from '@/components/wordDict/DictWrite.vue';
+    import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
+    
 
-    // /** 상세로 이동 */
-    // const goDetail = idx => {
-    //     router.push(`/board/get/${idx}`);
-    // };
+    // 공통
+    const loading = ref(false);
+    const error = ref('');
 
     // 용어집
     const wordList = ref([]);
     // 카테고리
     const cateList = ref([]);
-    const loading = ref(false);
-    const error = ref('');
 
     // 검색
     const searchText = ref('');
 
-    // 단어 및 카테고리 목록 통합 API 호출
+    // 작성
+    const isWriteVisible = ref(false);
+
+    // 용어집 및 카테고리 목록 통합 API 호출
     const fetchAllData = async () => {
         loading.value = true;
         error.value = '';
         try {
-            // 단어
+            // 용어집
             const wordResponse = await axios.get('worddict/getWordList');
             wordList.value = wordResponse.data.data.data;
-            console.log('단어 데이터:', wordList.value);
-
+            console.log('용어집 데이터:', wordList.value);
             // 카테고리
             const categoryResponse = await axios.get('worddict/getWordCategory');
             cateList.value = categoryResponse.data.data;
@@ -173,8 +123,10 @@
         )
     );
 
-    
-
+    // 작성 toggle
+    const toggleWriteForm = () => {
+        isWriteVisible.value = !isWriteVisible.value;
+    };
 
     // `watchEffect`로 API 호출
     watchEffect(() => {
@@ -189,17 +141,6 @@
     padding: 0 30px
 }
 
-.word-list {
-    padding-left: 0;
-}
-.word-list li {
-    list-style: none;
-}
-
-.word-list li ~ li {
-    margin-top: 20px;
-}
-
 .error {
     color: red;
     font-weight: bold;