From 3fed02825966db13548eeec79a8bfc85adf49d85 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Fri, 17 Jan 2025 12:52:30 +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/router/index.js             |   4 +
 src/views/wordDict/wordDict.vue | 207 ++++++++++++++++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 src/views/wordDict/wordDict.vue

diff --git a/src/router/index.js b/src/router/index.js
index a19d7da..1ad0673 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,10 @@ const routes = [
             }
         ]
     },
+    {
+        path: '/wordDict',
+        component: () => import('@v/wordDict/wordDict.vue'),
+    },
     // 레이아웃 필요없을 때 예시
     // {
     //     path: '/login',
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
new file mode 100644
index 0000000..4382d55
--- /dev/null
+++ b/src/views/wordDict/wordDict.vue
@@ -0,0 +1,207 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+
+        <div class="card">
+            <!-- 타이틀, 검색 -->
+            <div class="row mt-4">
+                <div class="col-6">
+                    <h5 class="mb-0">용어집</h5>
+                </div>
+                <div class="col-6">
+                    <SearchBar @update:data="search"/>
+                </div>
+            </div>
+
+            <!-- 단어 갯수, 작성하기 -->
+            <div class="mt-4">
+                단어 : {{ filteredList.length }}
+                <WriteButton />
+            </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>
+            </div>
+            
+            <!-- 카테고리 -->
+            <div>
+                <ul v-if="cateList.length">
+                    <li v-for="item in cateList" :key="item.CMNCODVAL">
+                        <button>{{ item.CMNCODNAM }}</button>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- 용어 리스트 -->
+            <div>
+                <!-- 로딩 중일 때 -->
+                <div v-if="loading">로딩 중...</div>
+
+                <!-- 에러 메시지 -->
+                <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>
+
+                <!-- 데이터가 없을 때 -->
+                <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>
+    
+</template>
+
+<script setup>
+    import { ref, watchEffect, computed } from 'vue';
+    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';
+
+    // /** 상세로 이동 */
+    // const goDetail = idx => {
+    //     router.push(`/board/get/${idx}`);
+    // };
+
+    // 용어집
+    const wordList = ref([]);
+    // 카테고리
+    const cateList = ref([]);
+    const loading = ref(false);
+    const error = ref('');
+
+    // 검색
+    const searchText = ref('');
+
+    // 단어 및 카테고리 목록 통합 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);
+
+            // 카테고리
+            const categoryResponse = await axios.get('worddict/getWordCategory');
+            cateList.value = categoryResponse.data.data;
+            console.log('카테고리 데이터:', cateList.value);
+        } catch (err) {
+            error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    // 검색
+    const search = (e) => {
+        const trimmedSearchText = e.trim();
+        if (trimmedSearchText.length === 0) {
+            alert('검색어를 입력해주세요.');
+            return;
+        }
+        searchText.value = trimmedSearchText;
+    };
+
+    // 검색
+    const filteredList = computed(() => 
+        wordList.value.filter(item => 
+            item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
+        )
+    );
+
+    
+
+
+    // `watchEffect`로 API 호출
+    watchEffect(() => {
+        fetchAllData();
+    });
+
+</script>
+
+<style scoped>
+
+.card > div {
+    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;
+}
+</style>