From 61a3041a5e8804bf88b2eab9ccc0753938dd454a Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Tue, 1 Apr 2025 16:16:42 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20-=EC=9A=A9=EC=96=B4?=
 =?UTF-8?q?=EC=A7=91=20=ED=88=AC=ED=91=9C=EC=A7=84=ED=96=89=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainVote.vue      | 128 ++++++++++++++++++++------
 src/components/main/MainWordDict.vue  | 126 +++++++++++++++++++++----
 src/views/voteboard/voteBoardList.vue |   8 +-
 src/views/wordDict/wordDict.vue       |  32 ++++---
 4 files changed, 232 insertions(+), 62 deletions(-)

diff --git a/src/components/main/MainVote.vue b/src/components/main/MainVote.vue
index ddf77a5..78c26d0 100644
--- a/src/components/main/MainVote.vue
+++ b/src/components/main/MainVote.vue
@@ -6,48 +6,120 @@
                 <h5 class="mb-1 me-2">투표진행</h5>
             </div>
         </div>
-    <div class="card-body">
-        <ul class="p-0 m-0">
-            <li class="d-flex align-items-center mb-5">
-                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                    <div class="me-2">
-                        <div class="d-flex flex-wrap align-items-center">
-                        <div class="avatar avatar-sm me-2">
-                            <img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle"
-                            @error="$event.target.src = '/img/icons/icon.png'">
-                        </div>
-                        <div>
-                            <p class="mb-0 fw-medium">12월 회식투표</p>
-                        </div>
-                        </div>
-                        <small>2025-01-02 11:20~2025-01-02 11:20</small>
-                    </div>
+        <div class="card-body">
+            <ul class="p-0 m-0">
+                <li class="d-flex  mb-1" v-for="item in voteList" :key="item.LOCVOTSEQ">
                     <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                        <div class="me-2">
+                        <div class="me-2 mb-3">
+                            <small class="card-subtitle">{{ item.localVote.formatted_LOCVOTEDT }}</small>
                             <div class="d-flex flex-wrap align-items-center">
-                                <div class="avatar avatar-sm me-2">
-                                    <img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle"
-                                    @error="$event.target.src = '/img/icons/icon.png'">
+                                <div class="avatar flex-shrink-0 me-1">
+                                    <img
+                                        style="cursor: auto;"
+                                        class="rounded-circle user-avatar"
+                                        :src="getProfileImage(item.localVote.MEMBERPRF)"
+                                        alt="최초 작성자"
+                                        :style="{ borderColor: item.localVote.usercolor }"
+                                        @error="setDefaultImage"
+                                    />
                                 </div>
-                                <div>
-                                    <p class="mb-0 fw-medium">커피타임 장소 투표해요</p>
+                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goVoteList()" >
+                                    <div class="timeline-header ">
+                                        <small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
+                                    </div>
+                                    <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-warning  me-1">
+                                    </span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }}</small>
                                 </div>
                             </div>
-                            <small>2025-01-02 11:20~2025-01-02 11:20</small>
                         </div>
                     </div>
-                </div>
-            </li>
-        </ul>
-    </div>
+                </li>
+            </ul>
+        </div>
+        <!-- 모달 푸터: 더보기 버튼 오른쪽 정렬 -->
+        <div class="modal-foote d-flex">
+            <router-link
+            to="/voteboard"
+            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
+            >
+            more
+            </router-link>
+        </div>
     </div>
 </div>
 </template>
 
 <script setup>
+import router from '@/router';
+import $api from '@api';
+import { onMounted, ref } from 'vue';
 
+// 프로필 이미지
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+const defaultProfile = "/img/icons/icon.png";
+const getProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+};
+const setDefaultImage = (event) => {
+    event.target.src = defaultProfile;
+};
+
+const currentPage = ref(1);
+const voteset = ref(0);
+const voteList= ref([]);
+onMounted(() => {
+    getvoteList();
+});
+
+//투표목록
+const getvoteList = () => {
+    $api.get('vote/getVoteList',{
+            //목록조회시 파라미터 전달
+            params:
+            {
+                page: 1
+                ,voteset:'2' //투표중
+                ,myVote:'2' //내가한 투표표
+            }
+        }).then(res => {
+            voteList.value = res.data.data.list;
+            voteList.value = res.data.data.list.slice(0, 5);
+        })
+    };
+
+// 제목이 14글자 넘어가면 ... 처리하는 함수
+const truncateTitle = title => {
+return title.length > 14 ? title.slice(0, 14) + '...' : title;
+};
+
+//투표이동
+const goVoteList = () =>{
+    router.push({
+        path: '/voteboard',
+        query: {
+            voteset: '2',
+        }
+    });
+}
+//종료 ㅇㅇ 일 전
+const getDaysAgo = (dateString) => {
+    const inputDate = new Date(dateString); // 문자열을 Date 객체로 변환
+    const today = new Date(); // 현재 날짜 가져오기
+
+    // 날짜 차이 계산 (밀리초 기준)
+    const timeDiff = today - inputDate;
+    const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))+1; // 일 단위 변환
+
+    // 오늘 날짜인 경우 "오늘" 반환
+    if (dayDiff === 0) return "금일 종료";
+
+    return `종료 ${Math.abs(dayDiff)}일 전`;
+};
 </script>
 
 <style scoped>
-
+.user-avatar {
+    border: 3px solid;
+    padding: 0.1px;
+}
 </style>
diff --git a/src/components/main/MainWordDict.vue b/src/components/main/MainWordDict.vue
index 5099379..fb14152 100644
--- a/src/components/main/MainWordDict.vue
+++ b/src/components/main/MainWordDict.vue
@@ -7,39 +7,125 @@
             </div>
         </div>
         <div class="card-body">
-            <ul class="p-0 m-0">
-                <li class="d-flex align-items-center mb-5">
-                    <div class="avatar flex-shrink-0 me-3">
-                        <span class="avatar-initial rounded bg-label-primary"><span class="avatar-initial rounded bg-label-primary"><span class="avatar-initial rounded bg-label-primary">it</span></span></span>
+            <ul class="p-0 m-0" v-for="item in wordList" :key="item.WRDDICSEQ">
+                <small class="card-subtitle">{{$common.dateFormatter(item.lastEditor.updatedAt)}}</small>
+                <li class="d-flex  mb-1">
+                    <div class="avatar flex-shrink-0 me-1" >
+                                <img
+                                    style="cursor: auto;"
+                                    class="rounded-circle user-avatar"
+                                    :src="getProfileImage(item.lastEditor.profileImage)"
+                                    alt="최종 작성자"
+                                    :style="{ borderColor: item.lastEditor.color }"
+                                    @error="setDefaultImage"
+                                />
                     </div>
-                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                        <div class="me-2">
-                            <h6 class="mb-0">css</h6>
-                            <small>class 주는방법은 ...</small>
-                        </div>
-                    </div>
-                </li>
-                <li class="d-flex align-items-center mb-5">
-                    <div class="avatar flex-shrink-0 me-3">
-                        <span class="avatar-initial rounded bg-label-primary"><span class="avatar-initial rounded bg-label-primary"><span class="avatar-initial rounded bg-label-primary">it</span></span></span>
-                    </div>
-                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                        <div class="me-2">
-                            <h6 class="mb-0">css</h6>
-                            <small>class 주는방법은 ...</small>
+                    <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goWordList(item.WRDDICCAT,item.WRDDICTTL)">
+                        <div class="timeline-header">
+                            <small class="text-primary text-uppercase">{{ item.category }}</small>
                         </div>
+                        <h6  class="my-50">{{truncateTitle(item.WRDDICTTL) }}</h6>
                     </div>
                 </li>
             </ul>
         </div>
+        <!-- 모달 푸터: 더보기 버튼 오른쪽 정렬 -->
+        <div class="modal-foote d-flex ">
+            <router-link
+            to="/wordDict"
+            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
+            >
+            more
+            </router-link>
+        </div>
     </div>
 </div>
 </template>
 
 <script setup>
+import axios from '@api';
+import { getCurrentInstance, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import commonApi from '@/common/commonApi';
+
+const { appContext } = getCurrentInstance();
+const $common = appContext.config.globalProperties.$common;
+const router = useRouter();
+
+onMounted(() => {
+    getwordList();
+});
+
+// 프로필 이미지
+const baseUrl = axios.defaults.baseURL.replace(/api\/$/, '');
+const defaultProfile = "/img/icons/icon.png";
+const getProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+};
+const setDefaultImage = (event) => {
+    event.target.src = defaultProfile;
+};
+const wordList = ref([]);
+//용어 목록
+const getwordList = (searchKeyword='', indexKeyword='', category='') => {
+    axios.get('worddict/getWordList',{
+            params: {
+                searchKeyword : searchKeyword,
+                indexKeyword :indexKeyword,
+                category : category,
+                pageNum:5
+            }
+        })
+        .then(res => {
+            wordList.value = res.data.data.data;
+        });
+};
+//초성 /알파벳 변환
+const getFirstCharacter = (char) => {
+    const CHOSUNG_LIST = [
+        'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ',
+        'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'
+    ];
+
+    if (!char || char.length === 0) return '';
+
+    const code = char.charCodeAt(0);
+
+    // 한글 범위 (가~힣) → 초성 변환
+    if (code >= 0xAC00 && code <= 0xD7A3) {
+        const index = Math.floor((code - 0xAC00) / (21 * 28));
+        return CHOSUNG_LIST[index];
+    }
+
+    // 영어 소문자 → 대문자로 변환
+    if (char.match(/[a-zA-Z]/)) {
+        return char.toLowerCase();
+    }
+
+    // 기타 문자 (숫자, 특수문자) 그대로 반환
+    return char;
+};
+//용어집 이동
+const goWordList = (category, indexKeyword) => {
+    const firstChar = getFirstCharacter(indexKeyword[0]); // 첫 글자 변환
+    router.push({
+        path: '/wordDict',
+        query: {
+            indexKeyword: firstChar,
+            category: category
+        }
+    });
+};
+// 제목이 14글자 넘어가면 ... 처리하는 함수
+const truncateTitle = title => {
+return title.length > 25 ? title.slice(0, 25) + '...' : title;
+};
 
 </script>
 
 <style scoped>
-
+.user-avatar {
+    border: 3px solid;
+    padding: 0.1px;
+}
 </style>
diff --git a/src/views/voteboard/voteBoardList.vue b/src/views/voteboard/voteBoardList.vue
index 4079dad..b47b0d0 100644
--- a/src/views/voteboard/voteBoardList.vue
+++ b/src/views/voteboard/voteBoardList.vue
@@ -57,7 +57,7 @@ import $api from '@api';
 import Quill from 'quill';
 import WriteBtn from '@c/button/WriteBtn.vue';
 import voteList from '@c/voteboard/voteCardList.vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const toastStore = useToastStore();
 const category = ref('0');
@@ -71,8 +71,12 @@ const voteset = ref(0);
 const ischeked = ref(false);
 const selectedVote = ref({}); // 선택된 투표 데이터
 const router = useRouter();
+const route = useRoute();
 
-onMounted(async () => {
+onMounted(() => {
+    const maincvoteset = route.query.voteset || '0';
+    voteset.value =maincvoteset;
+    category.value = maincvoteset;
     getvoteList();
 });
 //글작성
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 29fa896..d7f3845 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -54,18 +54,21 @@
 </template>
 
 <script setup>
-    import { ref, computed, onMounted, getCurrentInstance, toRaw } from 'vue';
-    import axios from '@api';
-    import SearchBar from '@c/search/SearchBar.vue';
-    import WriteButton from '@c/button/WriteBtn.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';
-    import commonApi from '@/common/commonApi';
-    import { useToastStore } from '@s/toastStore';
-    import { useWriteVisibleStore } from '@s/writeVisible';
-    import LoadingSpinner from "@v/LoadingPage.vue";
+import { ref, computed, onMounted, getCurrentInstance, toRaw } from 'vue';
+import axios from '@api';
+import SearchBar from '@c/search/SearchBar.vue';
+import WriteButton from '@c/button/WriteBtn.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';
+import commonApi from '@/common/commonApi';
+import { useToastStore } from '@s/toastStore';
+import { useWriteVisibleStore } from '@s/writeVisible';
+import LoadingSpinner from "@v/LoadingPage.vue";
+import { useRoute } from 'vue-router';
+
+    const route = useRoute();
 
     // 작성창 구분
     const writeStore = useWriteVisibleStore();
@@ -111,6 +114,11 @@
     onMounted(() => {
         getIndex();
         writeStore.closeAll();
+        const mainindexKeyword = route.query.indexKeyword || '';
+        const maincategory = route.query.category || '';
+        selectedAlphabet.value = mainindexKeyword;
+        selectedCategory.value = maincategory;
+        getwordList('', selectedAlphabet.value, selectedCategory.value );
     });
 
     const refreshWordList = (category) => {