diff --git a/package-lock.json b/package-lock.json index 7a47e84..b6cefde 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@vueup/vue-quill": "^1.2.0", "axios": "^1.7.9", "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3", "dayjs": "^1.11.13", "dompurify": "^3.2.3", "flatpickr": "^4.6.13", @@ -1890,6 +1891,22 @@ "@popperjs/core": "^2.11.8" } }, + "node_modules/bootstrap-icons": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz", + "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 823ef27..866adaa 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@vueup/vue-quill": "^1.2.0", "axios": "^1.7.9", "bootstrap": "^5.3.3", + "bootstrap-icons": "^1.11.3", "dayjs": "^1.11.13", "dompurify": "^3.2.3", "flatpickr": "^4.6.13", diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue index d5091f5..2125e95 100644 --- a/src/components/board/BoardProfile.vue +++ b/src/components/board/BoardProfile.vue @@ -7,16 +7,13 @@
{{ profileName }}
- 2024.12.10 10:46 + {{ date }}
@@ -45,6 +42,7 @@ diff --git a/src/components/category/CategoryBtn.vue b/src/components/category/CategoryBtn.vue index 912348c..c98ea10 100644 --- a/src/components/category/CategoryBtn.vue +++ b/src/components/category/CategoryBtn.vue @@ -9,17 +9,17 @@ type="button" class="btn" :class="{ - 'btn-outline-primary': category !== selectedCategory, - 'btn-primary': category === selectedCategory - }" - @click="selectCategory(category)" + 'btn-outline-primary': category.CMNCODVAL !== selectedCategory, + 'btn-primary': category.CMNCODVAL === selectedCategory + }" + @click="selectCategory(category.CMNCODVAL)" >{{ category.CMNCODNAM }} @@ -42,8 +43,4 @@ const selectCategory = (category) => { .cate-list { margin-left: -0.25rem; } - -@media screen and (max-width:450px) { - -} \ No newline at end of file diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue index fe0eecc..1ddac0f 100644 --- a/src/components/list/BoardCard.vue +++ b/src/components/list/BoardCard.vue @@ -1,124 +1,142 @@ + - +// computed 속성 +const contentColClass = computed(() => { + return props.img ? 'col-sm-10 col-12' : 'col-sm-12'; +}); - + +.card:hover { + transform: scale(1.02); +} + +/* 텍스트 줄임 표시 */ +.str_wrap { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +/* 이미지 스타일 */ +.img-fluid { + border-radius: 8px 0 0 8px; +} + +/* 태그 배지 스타일 */ +.badge { + font-size: 0.8rem; + padding: 5px 10px; +} + diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue index 430a73d..5b3c29a 100644 --- a/src/components/list/BoardCardList.vue +++ b/src/components/list/BoardCardList.vue @@ -1,10 +1,9 @@ diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue index e28e459..9a899ba 100644 --- a/src/components/wordDict/DictAlphabetFilter.vue +++ b/src/components/wordDict/DictAlphabetFilter.vue @@ -49,7 +49,7 @@ const selectAlphabet = (alphabet) => { @media (max-width: 768px) { .alphabet-list { - overflow: scroll; + overflow-x: scroll; flex-wrap: nowrap !important; } } diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue index 1aa65c0..09ecffd 100644 --- a/src/components/wordDict/DictCard.vue +++ b/src/components/wordDict/DictCard.vue @@ -2,7 +2,7 @@
  • - {{ item.category }} + {{ item.category }} {{ item.WRDDICTTL }}
    diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue index 441ffbe..9d040f1 100644 --- a/src/components/wordDict/DictWrite.vue +++ b/src/components/wordDict/DictWrite.vue @@ -1,11 +1,14 @@ \ No newline at end of file diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue index 89eb2e8..28aacfc 100644 --- a/src/views/board/BoardList.vue +++ b/src/views/board/BoardList.vue @@ -2,57 +2,98 @@
    -
    +
    -
    +
    -
    - -
    - -
    + +
    +
    - - -
    -
    - + +
    + +
    + +
    +
    - - -
    -
    - -
    +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + +
    번호제목작성자작성일조회수
    {{ post.id }} + {{ post.title }} + + + N + {{ post.author }}{{ post.date }}{{ post.views }}
    @@ -62,19 +103,28 @@ + + diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 18df4be..8f81baa 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -9,8 +9,8 @@ :boardId="currentBoardId" :profileName="profileName" :views="views" - :likes="likes" - :dislikes="dislikes" + :comments="comments" + :date="formattedBoardDate" class="pb-6 border-bottom" />
    @@ -49,8 +49,8 @@ :bigBtn="true" :boardId="currentBoardId" :commentId="null" - :likeCount="currentLikeCount" - :dislikeCount="currentDislikeCount" + :likeCount="likes" + :dislikeCount="dislikes" @updateReaction="handleUpdateReaction" />
    @@ -63,7 +63,7 @@ --> - + -
    - -
    - -
    -
    -
    -
    -
    - -
    -
    - -
    - - -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    - + - diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue index d6e3392..7efb616 100644 --- a/src/views/wordDict/wordDict.vue +++ b/src/views/wordDict/wordDict.vue @@ -25,12 +25,12 @@
    - +
    - +
    @@ -50,16 +50,9 @@ :item="item" /> - -
    용어집의 용어가 없습니다.
    +
    용어집의 용어가 없습니다.
    @@ -84,12 +77,17 @@ // 용어집 const wordList = ref([]); + //용어집 총개수 const total = ref(0); + // 카테고리 const cateList = ref([]); + const selectedCategory = ref(''); + //선택된 알파벳 const selectedAlphabet = ref(''); + // 검색 const searchText = ref(''); @@ -98,77 +96,61 @@ // 데이터 로드 onMounted(() => { - getwordList(); //용어목록조회 - getwordCategory(); //카테고리목록조회 + getwordList(); + getwordCategory(); }); + //용어 목록 - const getwordList = (searchKeyword='',indexKeyword='') => { + const getwordList = (searchKeyword='', indexKeyword='', category='') => { axios.get('worddict/getWordList',{ //목록조회시 파라미터 전달 - params: { searchKeyword: searchKeyword - ,indexKeyword:indexKeyword + params: { + searchKeyword : searchKeyword, + indexKeyword :indexKeyword, + category : category } }) .then(res => { - wordList.value = res.data.data.data; // 용어 목록 저장 - total.value = res.data.data.total; // 총 개수 저장 + // 용어 목록 저장 + wordList.value = res.data.data.data; + // 총 개수 저장 + total.value = res.data.data.total; loading.value = false; }) .catch(err => { console.error('데이터 로드 오류:', err); error.value = '데이터를 가져오는 중 문제가 발생했습니다.'; - loading.value = false; // 로딩 종료 + loading.value = false; }); }; // 카테고리 목록 const getwordCategory = () => { axios.get('worddict/getWordCategory') .then(res => { - cateList.value = res.data.data; // 카테고리 목록 저장 + cateList.value = res.data.data; }) .catch(err => { console.error('카테고리 로드 오류:', err); error.value = '카테고리 데이터를 가져오는 중 문제가 발생했습니다.'; }); }; - const handleSelectedAlphabetChange = (newAlphabet) => { - selectedAlphabet.value = newAlphabet; - getwordList(searchText.value,selectedAlphabet.value); - }; // 검색 const search = (e) => { searchText.value = e.trim(); - getwordList(searchText.value,selectedAlphabet.value); + getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value); }; + // 알파벳 선택 + const handleSelectedAlphabetChange = (newAlphabet) => { + selectedAlphabet.value = newAlphabet; + getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value); + }; - // 용어집 및 카테고리 목록 통합 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 filteredList = computed(() => - // wordList.value.filter(item => - // item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase()) - // ) - // ); + // 카테고리 선택 + const handleSelectedCategoryChange = (category) => { + selectedCategory.value = category; + getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value) + } // 작성 toggle const toggleWriteForm = () => { @@ -190,4 +172,4 @@ margin-bottom: 0.5rem !important; } } - + \ No newline at end of file