Merge remote-tracking branch 'origin/main' into board-view-content
This commit is contained in:
commit
815019e02a
17
package-lock.json
generated
17
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,124 +1,142 @@
|
||||
<template>
|
||||
<div class="card mb-3 shadow-sm fixed-card" style="width: 18rem; height: 17rem">
|
||||
<!-- 이미지가 있을 경우 card-img-top으로 표시 -->
|
||||
<img
|
||||
v-if="img"
|
||||
:src="img"
|
||||
class="card-img-top"
|
||||
alt="이미지"
|
||||
style="object-fit: cover; height: 100px;"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<!-- 카테고리 태그 (존재할 경우) -->
|
||||
<h6 v-if="category" class="badge rounded-pill bg-primary text-white mb-2">
|
||||
{{ category }}
|
||||
</h6>
|
||||
<!-- 제목과 첨부파일 아이콘 -->
|
||||
<h5 class="card-title">
|
||||
{{ title }}
|
||||
<span class="text-muted" v-if="attachment">
|
||||
<i class="fa-solid fa-paperclip"></i>
|
||||
</span>
|
||||
</h5>
|
||||
<!-- 본문 -->
|
||||
<p class="card-text limit-two-lines">{{ content }}</p>
|
||||
<!-- 날짜 및 조회수, 좋아요, 댓글 -->
|
||||
<p class="card-text">
|
||||
<small class="text-muted">{{ formattedDate }}</small>
|
||||
<div class="d-flex mt-2 mt-sm-0">
|
||||
<span class="text-muted me-3">
|
||||
<i class="fa-regular fa-eye"></i> {{ views || 0 }}
|
||||
</span>
|
||||
<span class="text-muted me-3" v-if="comments !== null">
|
||||
<i class="bx bx-comment"></i> {{ comments }}
|
||||
</span>
|
||||
<span class="text-muted me-3" v-if="likes != null">
|
||||
<i class="bx bx-like"></i> {{ likes }}
|
||||
</span>
|
||||
<span class="text-muted me-3" v-if="dislikes != null">
|
||||
<i class="bx bx-dislike"></i> {{ dislikes }}
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card mb-3 shadow-sm">
|
||||
<div class="row g-0">
|
||||
<!-- 이미지 섹션 -->
|
||||
<div v-if="img" class="col-sm-2">
|
||||
<img
|
||||
:src="img"
|
||||
alt="이미지"
|
||||
class="img-fluid rounded-start"
|
||||
style="object-fit: cover; height: 100%; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
<!-- 게시물 내용 섹션 -->
|
||||
<div :class="contentColClass">
|
||||
<div class="card-body">
|
||||
<!-- 태그 -->
|
||||
<h6 class="badge rounded-pill bg-primary text-white mb-2">
|
||||
{{ category }}
|
||||
</h6>
|
||||
<!-- 제목 -->
|
||||
<h5 class="card-title">
|
||||
{{ title }}
|
||||
<span class="text-muted me-3" v-if="attachment">
|
||||
<i class="fa-solid fa-paperclip"></i>
|
||||
</span>
|
||||
</h5>
|
||||
<!-- 본문 -->
|
||||
<div class="card-text str_wrap my-5">{{ content }}</div>
|
||||
<!-- 날짜 -->
|
||||
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
|
||||
<small class="text-muted">{{ formattedDate }}</small>
|
||||
<!-- 조회수, 좋아요, 댓글 -->
|
||||
<div class="d-flex mt-2 mt-sm-0">
|
||||
<span class="text-muted me-3">
|
||||
<i class="fa-regular fa-eye"></i> {{ views || 0 }}
|
||||
</span>
|
||||
<span class="text-muted me-3" v-if="likes != null">
|
||||
<i class="bx bx-like"></i> {{ likes }}
|
||||
</span>
|
||||
<span class="text-muted" v-if="comments !== null">
|
||||
<i class="bx bx-comment"></i> {{ comments }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { defineProps } from 'vue';
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
img: {
|
||||
type: String,
|
||||
default: null,
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
category: {
|
||||
type: String,
|
||||
required: false,
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
views: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
likes: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
dislikes: {
|
||||
type: Number,
|
||||
default: null,
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
comments: {
|
||||
type: Number,
|
||||
default: null,
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
attachment: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const formattedDate = computed(() => {
|
||||
const dateObj = new Date(props.date);
|
||||
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
|
||||
});
|
||||
</script>
|
||||
// computed 속성
|
||||
const contentColClass = computed(() => {
|
||||
return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
|
||||
});
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
// formattedDate을 computed로 정의
|
||||
const formattedDate = computed(() => {
|
||||
const date = new Date(props.date);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
|
||||
date.getDate()
|
||||
).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
|
||||
date.getMinutes()
|
||||
).padStart(2, "0")}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 카드 스타일 */
|
||||
.card {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* card-img-top의 모서리 둥글게 처리 */
|
||||
.card-img-top {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
/* 내용 텍스트를 두 줄로 제한 */
|
||||
.limit-two-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<template>
|
||||
<div class="container my-4">
|
||||
<div class="row">
|
||||
<div class="mt-4">
|
||||
<div v-if="posts.length === 0" class="text-center">
|
||||
<p class="text-muted mt-4">게시물이 없습니다.</p>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4 d-flex justify-content-center" v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
|
||||
<div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
|
||||
<BoardCard
|
||||
:img="post.img || null"
|
||||
:category="post.category || ''"
|
||||
@ -12,14 +11,11 @@
|
||||
:content="post.content"
|
||||
:date="post.date"
|
||||
:views="post.views || 0"
|
||||
:likes="post.likes"
|
||||
:dislikes="post.dislikes"
|
||||
v-bind="getBoardCardProps(post)"
|
||||
:attachment="post.attachment || false"
|
||||
@click="() => goDetail(post.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 한글 버튼들 -->
|
||||
<ul>
|
||||
<li v-for="char in koreanChars" :key="char" >
|
||||
<button type="button" class="nav-link" @click="filterByKoreanChar(char)">
|
||||
<ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
|
||||
<li v-for="char in koreanChars" :key="char" class="mt-2 mx-1">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
:class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="selectAlphabet(char)"
|
||||
>
|
||||
{{ char }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 영어 버튼들 -->
|
||||
<ul>
|
||||
<li v-for="char in englishChars" :key="char">
|
||||
<button type="button" class="nav-link" @click="filterByEnglishChar(char)">
|
||||
<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">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
:class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
|
||||
@click="selectAlphabet(char)"
|
||||
>
|
||||
{{ char }}
|
||||
</button>
|
||||
</li>
|
||||
@ -21,28 +28,29 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
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 selectedAlphabet = ref(null);
|
||||
//emit정의
|
||||
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');
|
||||
const selectAlphabet = (alphabet) => {
|
||||
selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
|
||||
emit('update:data',selectedAlphabet.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-pills {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.alphabet-list {
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.alphabet-list {
|
||||
overflow: scroll;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -2,57 +2,96 @@
|
||||
<div class="container flex-grow-1 container-p-y">
|
||||
<div class="row mb-4">
|
||||
<!-- 검색창 -->
|
||||
<div class="container col-11 px-10 ">
|
||||
<div class="container col-8 px-3">
|
||||
<search-bar @update:data="search" />
|
||||
</div>
|
||||
<!-- 새 글쓰기 -->
|
||||
<div class="container col-1 px-12 py-2">
|
||||
<div class="container col-2 px-12 py-2">
|
||||
<router-link to="/board/write">
|
||||
<WriteButton />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<!-- 셀렉트 박스 -->
|
||||
<div class="col-12 col-md-auto">
|
||||
<select class="form-select" v-model="selectedOrder" @change="handleSortChange">
|
||||
<option value="date">최신날짜</option>
|
||||
<option value="views">조회수</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- 셀렉트 박스 -->
|
||||
<div class="col-12 col-md-auto">
|
||||
<select class="form-select" v-model="selectedOrder" @change="handleSortChange">
|
||||
<option value="date">최신날짜</option>
|
||||
<option value="views">조회수</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 공지사항 리스트 -->
|
||||
<div v-if="pagination.currentPage === 1" class="mb-8">
|
||||
<div class="row">
|
||||
<BoardCardList :posts="noticeList" @click="goDetail" />
|
||||
<!-- 공지 접기 기능 -->
|
||||
<div class="container col-1 px-0 py-2">
|
||||
<label>
|
||||
<input type="checkbox" v-model="showNotices" /> 공지 숨기기
|
||||
</label>
|
||||
</div>
|
||||
<!-- 리스트 갯수 선택 -->
|
||||
<div class="container col-1 px-0 py-2">
|
||||
<select class="form-select" v-model="selectedSize" @change="handleSizeChange">
|
||||
<option value="10">10개씩</option>
|
||||
<option value="20">20개씩</option>
|
||||
<option value="30">30개씩</option>
|
||||
<option value="50">50개씩</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 일반 리스트 -->
|
||||
<div>
|
||||
<div class="row">
|
||||
<BoardCardList :posts="generalList" @click="goDetail" />
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<!-- 게시판 -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 8%;">번호</th>
|
||||
<th style="width: 50%;">제목</th>
|
||||
<th style="width: 15%;">작성자</th>
|
||||
<th style="width: 12%;">작성일</th>
|
||||
<th style="width: 10%;">조회수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 공지사항 (첫 페이지에서만 표시, showNotices가 false일 때만 보임) -->
|
||||
<template v-if="pagination.currentPage === 1 && !showNotices">
|
||||
<tr v-for="(notice, index) in noticeList"
|
||||
:key="'notice-' + index"
|
||||
class="notice-row clickable-row"
|
||||
@click="goDetail(notice.id)">
|
||||
<td>공지</td>
|
||||
<td>
|
||||
📌 {{ notice.title }}
|
||||
<i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
|
||||
<span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 new-badge">N</span>
|
||||
</td>
|
||||
<td>{{ notice.author }}</td>
|
||||
<td>{{ notice.date }}</td>
|
||||
<td>{{ notice.views }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<!-- 일반 게시물 -->
|
||||
<tr v-for="(post, index) in generalList"
|
||||
:key="'post-' + index"
|
||||
class="general-row clickable-row"
|
||||
@click="goDetail(post.id)">
|
||||
<td>{{ post.id }}</td>
|
||||
<td>
|
||||
{{ post.title }}
|
||||
<i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
|
||||
<span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 new-badge">N</span>
|
||||
</td>
|
||||
<td>{{ post.author }}</td>
|
||||
<td>{{ post.date }}</td>
|
||||
<td>{{ post.views }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 페이지네이션 -->
|
||||
<div class="row g-3">
|
||||
<div class="mt-8">
|
||||
<Pagination
|
||||
:currentPage="pagination.currentPage"
|
||||
:pages="pagination.pages"
|
||||
:prePage="pagination.prePage"
|
||||
:nextPage="pagination.nextPage"
|
||||
:isFirstPage="pagination.isFirstPage"
|
||||
:isLastPage="pagination.isLastPage"
|
||||
:hasPreviousPage="pagination.hasPreviousPage"
|
||||
:hasNextPage="pagination.hasNextPage"
|
||||
:navigatePages="pagination.navigatePages"
|
||||
:navigatepageNums="pagination.navigatepageNums"
|
||||
:navigateFirstPage="pagination.navigateFirstPage"
|
||||
:navigateLastPage="pagination.navigateLastPage"
|
||||
v-bind="pagination"
|
||||
@update:currentPage="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
@ -62,19 +101,28 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import BoardCardList from '@/components/list/BoardCardList.vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
import SearchBar from '@c/search/SearchBar.vue';
|
||||
import router from '@/router';
|
||||
import WriteButton from '@c/button/WriteBtn.vue';
|
||||
import axios from '@api';
|
||||
import dayjs from 'dayjs';
|
||||
import isToday from 'dayjs/plugin/isToday';
|
||||
import isYesterday from 'dayjs/plugin/isYesterday';
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
|
||||
|
||||
dayjs.extend(isToday); // 오늘 날짜 판별 플러그인 추가
|
||||
dayjs.extend(isYesterday);
|
||||
|
||||
// 데이터 초기화
|
||||
const generalList = ref([]);
|
||||
const noticeList = ref([]);
|
||||
const searchText = ref('');
|
||||
const selectedOrder = ref('date');
|
||||
const sortDirection = ref('desc');
|
||||
const selectedSize = ref(10);
|
||||
const showNotices = ref(false);
|
||||
|
||||
const pagination = ref({
|
||||
currentPage: 1,
|
||||
pages: 1,
|
||||
@ -95,83 +143,96 @@ const goDetail = (id) => {
|
||||
router.push({ name: 'BoardDetail', params: { id } });
|
||||
};
|
||||
|
||||
// 검색 처리
|
||||
// 날짜 포맷 변환 함수 (오늘이면 HH:mm, 아니면 YYYY-MM-DD)
|
||||
const formatDate = (dateString) => {
|
||||
const date = dayjs(dateString);
|
||||
return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
|
||||
};
|
||||
|
||||
// 새로 올라온 게시물 여부 판단 (오늘 또는 어제 작성된 경우)
|
||||
const isNewPost = (dateString) => {
|
||||
const date = dayjs(dateString);
|
||||
return date.isToday() || date.isYesterday();
|
||||
};
|
||||
|
||||
// 검색 처리 (검색 시 첫 페이지부터 조회)
|
||||
const search = (e) => {
|
||||
searchText.value = e.trim();
|
||||
fetchGeneralPosts(1);
|
||||
fetchNoticePosts(searchText.value);
|
||||
};
|
||||
|
||||
// 정렬 변경 핸들러
|
||||
// 정렬 변경 핸들러 (첫 페이지부터 정렬)
|
||||
const handleSortChange = () => {
|
||||
fetchGeneralPosts(1);
|
||||
};
|
||||
|
||||
// 게시물 데이터 로드(일반)
|
||||
// 리스트 개수 변경 핸들러
|
||||
const handleSizeChange = () => {
|
||||
fetchGeneralPosts(1);
|
||||
};
|
||||
|
||||
// 일반 게시물 데이터 로드
|
||||
const fetchGeneralPosts = async (page = 1) => {
|
||||
const response = await axios.get("board/general", {
|
||||
params: {
|
||||
page: page,
|
||||
orderBy: selectedOrder.value,
|
||||
sortDirection: sortDirection.value,
|
||||
searchKeyword: searchText.value
|
||||
try {
|
||||
const { data } = await axios.get("board/general", {
|
||||
params: {
|
||||
page,
|
||||
size: selectedSize.value,
|
||||
orderBy: selectedOrder.value,
|
||||
searchKeyword: searchText.value
|
||||
}
|
||||
});
|
||||
|
||||
if (data?.data) {
|
||||
generalList.value = data.data.list.map(post => ({
|
||||
id: post.id,
|
||||
title: post.title,
|
||||
author: post.author || '익명',
|
||||
date: formatDate(post.date), // 날짜 변환 적용
|
||||
views: post.cnt || 0,
|
||||
hasAttachment: post.hasAttachment || false
|
||||
}));
|
||||
|
||||
pagination.value = {
|
||||
...pagination.value,
|
||||
currentPage: data.data.pageNum,
|
||||
pages: data.data.pages,
|
||||
prePage: data.data.prePage,
|
||||
nextPage: data.data.nextPage,
|
||||
isFirstPage: data.data.isFirstPage,
|
||||
isLastPage: data.data.isLastPage,
|
||||
hasPreviousPage: data.data.hasPreviousPage,
|
||||
hasNextPage: data.data.hasNextPage,
|
||||
navigatePages: data.data.navigatePages,
|
||||
navigatepageNums: data.data.navigatepageNums,
|
||||
navigateFirstPage: data.data.navigateFirstPage,
|
||||
navigateLastPage: data.data.navigateLastPage
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data && response.data.data) {
|
||||
const data = response.data.data;
|
||||
// 게시물 리스트 업데이트
|
||||
generalList.value = data.list.map((post, index) => ({
|
||||
...post,
|
||||
id: post.id || index,
|
||||
img: post.firstImageUrl || null,
|
||||
views: post.cnt || 0,
|
||||
likes: post.likeCount != null ? post.dislikeCount : null,
|
||||
dislikes: post.dislikeCount != null ? post.likeCount : null,
|
||||
comments: post.commentCount != null ? post.commentCount : null,
|
||||
attachment: post.hasAttachment || false,
|
||||
content: post.plainContent || '',
|
||||
}));
|
||||
|
||||
// 페이지네이션 정보 업데이트
|
||||
pagination.value = {
|
||||
currentPage: data.pageNum,
|
||||
pages: data.pages,
|
||||
prePage: data.prePage,
|
||||
nextPage: data.nextPage,
|
||||
isFirstPage: data.isFirstPage,
|
||||
isLastPage: data.isLastPage,
|
||||
hasPreviousPage: data.hasPreviousPage,
|
||||
hasNextPage: data.hasNextPage,
|
||||
navigatePages: data.navigatePages,
|
||||
navigatepageNums: data.navigatepageNums,
|
||||
navigateFirstPage: data.navigateFirstPage,
|
||||
navigateLastPage: data.navigateLastPage
|
||||
};
|
||||
} else {
|
||||
console.error("데이터 오류:", response.data);
|
||||
} catch (error) {
|
||||
console.error("데이터 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 게시물 데이터 로드(공지사항)
|
||||
// 공지사항 데이터 로드
|
||||
const fetchNoticePosts = async () => {
|
||||
const response = await axios.get("board/notices", {
|
||||
params: {
|
||||
searchKeyword: searchText.value
|
||||
}
|
||||
});
|
||||
try {
|
||||
const { data } = await axios.get("board/notices", {
|
||||
params: { searchKeyword: searchText.value }
|
||||
});
|
||||
|
||||
if (response.data && response.data.data && Array.isArray(response.data.data)) {
|
||||
noticeList.value = response.data.data.map((post, index) => ({
|
||||
...post,
|
||||
id: post.id || index,
|
||||
img: post.firstImageUrl || null,
|
||||
views: post.cnt || 0,
|
||||
attachment: post.hasAttachment || false,
|
||||
content: post.plainContent || '',
|
||||
}));
|
||||
} else {
|
||||
console.error("데이터 오류:", response.data);
|
||||
if (data?.data) {
|
||||
noticeList.value = data.data.map(post => ({
|
||||
id: post.id,
|
||||
title: post.title,
|
||||
author: post.author || '관리자',
|
||||
date: formatDate(post.date), // 날짜 변환 적용
|
||||
views: post.cnt || 0,
|
||||
hasAttachment: post.hasAttachment || false
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("데이터 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
@ -184,7 +245,40 @@ const handlePageChange = (page) => {
|
||||
|
||||
// 데이터 로드
|
||||
onMounted(() => {
|
||||
fetchGeneralPosts();
|
||||
fetchNoticePosts();
|
||||
fetchGeneralPosts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 공지사항 스타일 */
|
||||
.notice-row {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.notice-row td {
|
||||
color: #DC3545 !important;
|
||||
}
|
||||
|
||||
/* 일반 게시물 스타일 */
|
||||
.general-row {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* 행 전체 클릭 가능 */
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
.clickable-row:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* 새 글 아이콘 크기 조정 */
|
||||
.new-badge {
|
||||
font-size: 0.65rem; /* 원래 크기의 약 절반 */
|
||||
padding: 0.2em 0.4em; /* 배지 크기 조정 */
|
||||
vertical-align: middle; /* 텍스트 정렬 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<label class="col-md-2 col-form-label">카테고리 <span class="text-danger">*</span></label>
|
||||
<div class="d-flex flex-wrap align-items-center mt-3 ms-1">
|
||||
<div
|
||||
v-for="(categoryName, index) in categoryList"
|
||||
v-for="(category, index) in categoryList"
|
||||
:key="index"
|
||||
class="form-check me-3"
|
||||
>
|
||||
@ -30,18 +30,19 @@
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
:id="`category-${index}`"
|
||||
:value="index"
|
||||
v-model="category"
|
||||
:value="category.CMNCODVAL"
|
||||
v-model="categoryValue"
|
||||
/>
|
||||
<label class="form-check-label" :for="`category-${index}`">
|
||||
{{ categoryName }}
|
||||
{{ category.CMNCODNAM }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invalid-feedback" :class="categoryAlert ? 'display-block' : ''">카테고리를 선택해주세요.</div>
|
||||
</div>
|
||||
|
||||
<!-- 비밀번호 필드 -->
|
||||
<div v-if="category === 1" class="mb-4">
|
||||
<div v-if="categoryValue === 300102" class="mb-4">
|
||||
<FormInput
|
||||
title="비밀번호"
|
||||
name="pw"
|
||||
@ -94,25 +95,39 @@
|
||||
import QEditor from '@c/editor/QEditor.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import FormFile from '@c/input/FormFile.vue';
|
||||
import { getCurrentInstance, ref } from 'vue';
|
||||
import { getCurrentInstance, ref, onMounted } from 'vue';
|
||||
import router from '@/router';
|
||||
import axios from '@api';
|
||||
|
||||
const categoryList = ['자유', '익명', '공지사항']; // 카테고리 이름
|
||||
const categoryList = ref([]);
|
||||
const title = ref('');
|
||||
const password = ref('');
|
||||
const category = ref(0); // 기본값 0
|
||||
const categoryValue = ref(null);
|
||||
const content = ref('');
|
||||
const attachFiles = ref(null);
|
||||
const isFileValid = ref(true); // 파일 유효성 상태 추가
|
||||
const isFileValid = ref(true);
|
||||
|
||||
const titleAlert = ref(false);
|
||||
const passwordAlert = ref(false);
|
||||
const contentAlert = ref(false);
|
||||
const categoryAlert = ref(false);
|
||||
const attachFilesAlert = ref(false);
|
||||
|
||||
const { appContext } = getCurrentInstance();
|
||||
const $common = appContext.config.globalProperties.$common; // $common에 접근
|
||||
const $common = appContext.config.globalProperties.$common;
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const response = await axios.get('board/categories');
|
||||
categoryList.value = response.data.data;
|
||||
} catch (error) {
|
||||
console.error('카테고리 불러오기 오류:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchCategories();
|
||||
});
|
||||
|
||||
const goList = () => {
|
||||
router.push('/board');
|
||||
@ -120,10 +135,11 @@ const goList = () => {
|
||||
|
||||
const write = async () => {
|
||||
titleAlert.value = !title.value;
|
||||
passwordAlert.value = category.value === 1 && !password.value;
|
||||
passwordAlert.value = categoryValue.value === 300102 && !password.value;
|
||||
contentAlert.value = !content.value;
|
||||
categoryAlert.value = !categoryValue.value;
|
||||
|
||||
if (titleAlert.value || passwordAlert.value || contentAlert.value || !isFileValid.value) {
|
||||
if (titleAlert.value || passwordAlert.value || contentAlert.value || categoryAlert.value || !isFileValid.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -131,8 +147,8 @@ const write = async () => {
|
||||
const boardData = {
|
||||
LOCBRDTTL: title.value,
|
||||
LOCBRDCON: $common.deltaAsJson(content.value),
|
||||
LOCBRDPWD: category.value === 1 ? password.value : null,
|
||||
LOCBRDTYP: category.value === 1 ? 'S' : 'F',
|
||||
LOCBRDPWD: categoryValue.value === 300102 ? password.value : null,
|
||||
LOCBRDTYP: categoryValue.value
|
||||
};
|
||||
|
||||
const { data: boardResponse } = await axios.post('board', boardData);
|
||||
|
||||
@ -1,75 +1,63 @@
|
||||
<template>
|
||||
<div class="vacation-management">
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<!-- 저장 버튼 -->
|
||||
<div class="save-button-container">
|
||||
<button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
|
||||
</div>
|
||||
<!-- 캘린더 -->
|
||||
<div class="card app-calendar-wrapper">
|
||||
<div class="row g-0">
|
||||
<div class="col app-calendar-content">
|
||||
<div class="card shadow-none border-0">
|
||||
<div class="card-body pb-0">
|
||||
<full-calendar
|
||||
ref="fullCalendarRef"
|
||||
:events="calendarEvents"
|
||||
:options="calendarOptions"
|
||||
defaultView="dayGridMonth"
|
||||
class="flatpickr-calendar-only"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 오전/오후 반차 버튼 -->
|
||||
<div class="half-day-buttons">
|
||||
<button
|
||||
class="btn btn-info"
|
||||
:class="{ active: halfDayType === 'AM' }"
|
||||
@click="toggleHalfDay('AM')"
|
||||
>
|
||||
☀️ 오전반차
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
:class="{ active: halfDayType === 'PM' }"
|
||||
@click="toggleHalfDay('PM')"
|
||||
>
|
||||
🌙 오후반차
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="save-button-container">
|
||||
<button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
|
||||
</div>
|
||||
<div class="card app-calendar-wrapper">
|
||||
<div class="row g-0">
|
||||
<div class="col app-calendar-content">
|
||||
<div class="card shadow-none border-0">
|
||||
<div class="card-body pb-0">
|
||||
<full-calendar
|
||||
ref="fullCalendarRef"
|
||||
:options="calendarOptions"
|
||||
class="flatpickr-calendar-only"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="half-day-buttons">
|
||||
<button class="btn btn-info" :class="{ active: halfDayType === 'AM' }" @click="toggleHalfDay('AM')">
|
||||
오전반차
|
||||
</button>
|
||||
<button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">
|
||||
오후반차
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FullCalendar from '@fullcalendar/vue3';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import 'flatpickr/dist/flatpickr.min.css';
|
||||
import '@/assets/css/app-calendar.css';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import axios from '@api'; // Axios 추가
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import "flatpickr/dist/flatpickr.min.css";
|
||||
import "@/assets/css/app-calendar.css";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import axios from "@api";
|
||||
|
||||
const fullCalendarRef = ref(null);
|
||||
const calendarEvents = ref([]);
|
||||
const calendarEvents = ref([]); // FullCalendar의 이벤트 리스트
|
||||
const selectedDates = ref(new Map());
|
||||
const halfDayType = ref(null);
|
||||
const employeeId = ref(1);
|
||||
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
initialView: "dayGridMonth",
|
||||
headerToolbar: {
|
||||
left: 'today',
|
||||
center: 'title',
|
||||
right: 'prev,next',
|
||||
left: "today",
|
||||
center: "title",
|
||||
right: "prev,next",
|
||||
},
|
||||
locale: 'ko',
|
||||
locale: "ko",
|
||||
selectable: true,
|
||||
dateClick: handleDateClick,
|
||||
events: calendarEvents, // 이벤트 리스트를 직접 반영
|
||||
});
|
||||
|
||||
/**
|
||||
@ -77,25 +65,12 @@ const calendarOptions = reactive({
|
||||
*/
|
||||
function handleDateClick(info) {
|
||||
const date = info.dateStr;
|
||||
const dayElement = info.dayEl;
|
||||
|
||||
if (!selectedDates.value.has(date)) {
|
||||
const type = halfDayType.value ? (halfDayType.value === 'AM' ? 'D' : 'N') : 'F';
|
||||
const type = halfDayType.value ? (halfDayType.value === "AM" ? "D" : "N") : "F";
|
||||
selectedDates.value.set(date, type);
|
||||
|
||||
if (type === 'D') {
|
||||
dayElement.style.backgroundImage = 'linear-gradient(to bottom, #ade3ff 50%, transparent 50%)';
|
||||
} else if (type === 'N') {
|
||||
dayElement.style.backgroundImage = 'linear-gradient(to top, #ade3ff 50%, transparent 50%)';
|
||||
} else {
|
||||
dayElement.style.backgroundColor = '#ade3ff';
|
||||
}
|
||||
} else {
|
||||
selectedDates.value.delete(date);
|
||||
dayElement.style.backgroundColor = '';
|
||||
dayElement.style.backgroundImage = '';
|
||||
}
|
||||
|
||||
halfDayType.value = null;
|
||||
}
|
||||
|
||||
@ -106,72 +81,60 @@ function toggleHalfDay(type) {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
}
|
||||
|
||||
/**
|
||||
* 백엔드에서 휴가 데이터를 가져와 FullCalendar에 반영
|
||||
*/
|
||||
async function fetchVacationData() {
|
||||
try {
|
||||
const response = await axios.get('vacation/list');
|
||||
if (response.data.status === 'OK') {
|
||||
const response = await axios.get("vacation/list");
|
||||
|
||||
if (response.data.status === "OK") {
|
||||
const vacationList = response.data.data;
|
||||
console.log("📌 백엔드 응답 데이터:", vacationList);
|
||||
|
||||
// 사원별로 날짜를 그룹화
|
||||
const employeeVacations = new Map();
|
||||
if (!Array.isArray(vacationList)) {
|
||||
throw new Error("vacationList is not an array.");
|
||||
}
|
||||
|
||||
vacationList.forEach(({ employeeId, date, type }) => {
|
||||
if (!employeeVacations.has(employeeId)) {
|
||||
employeeVacations.set(employeeId, []);
|
||||
// 이벤트 리스트 변환
|
||||
const events = vacationList.map((vac) => {
|
||||
let dateStr = vac.LOCVACUDT.split("T")[0];
|
||||
let className = "fc-daygrid-event";
|
||||
|
||||
let title = "연차";
|
||||
if (vac.LOCVACTYP === "D") {
|
||||
title = "오전반차";
|
||||
className += " half-day-am";
|
||||
} else if (vac.LOCVACTYP === "N") {
|
||||
title = "오후반차";
|
||||
className += " half-day-pm";
|
||||
} else if (vac.LOCVACTYP === "F") {
|
||||
title = "연차";
|
||||
className += " full-day";
|
||||
}
|
||||
employeeVacations.get(employeeId).push({ date, type });
|
||||
});
|
||||
|
||||
// 연속된 날짜 그룹화 및 스타일 적용
|
||||
employeeVacations.forEach((dates, employeeId) => {
|
||||
const sortedDates = dates.map(d => new Date(d.date)).sort((a, b) => a - b);
|
||||
const color = getColorByEmployeeId(employeeId); // 사원별 색상 함수
|
||||
return {
|
||||
title,
|
||||
start: dateStr,
|
||||
backgroundColor: getColorByEmployeeId(vac.MEMBERSEQ),
|
||||
classNames: [className],
|
||||
};
|
||||
}).filter((event) => event !== null);
|
||||
|
||||
let previousDate = null;
|
||||
|
||||
sortedDates.forEach(currentDate => {
|
||||
const dateStr = currentDate.toISOString().split('T')[0];
|
||||
const dayElement = document.querySelector(`[data-date="${dateStr}"]`);
|
||||
|
||||
if (dayElement) {
|
||||
if (
|
||||
previousDate &&
|
||||
currentDate - previousDate === 86400000 // 하루 차이인지 확인
|
||||
) {
|
||||
// 연속된 날짜 스타일 설정
|
||||
dayElement.style.backgroundColor = color;
|
||||
} else {
|
||||
// 새로운 시작점
|
||||
dayElement.style.backgroundColor = color;
|
||||
dayElement.style.borderLeft = `3px solid ${color}`;
|
||||
}
|
||||
previousDate = currentDate;
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log("📌 변환된 이벤트:", events);
|
||||
calendarEvents.value = events; // FullCalendar 이벤트 업데이트
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching vacation data:', error);
|
||||
console.error("Error fetching vacation data:", error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 사원 ID별 색상 반환 함수
|
||||
*/
|
||||
function getColorByEmployeeId(employeeId) {
|
||||
const colors = ['#ade3ff', '#ffade3', '#ade3ad', '#ffadad'];
|
||||
return colors[employeeId % colors.length];
|
||||
}
|
||||
|
||||
// 데이터 불러오기 호출
|
||||
fetchVacationData();
|
||||
|
||||
/**
|
||||
* 휴가 요청 추가
|
||||
*/
|
||||
async function addVacationRequests() {
|
||||
if (selectedDates.value.size === 0) {
|
||||
alert('휴가를 선택해주세요.');
|
||||
alert("휴가를 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -182,50 +145,41 @@ async function addVacationRequests() {
|
||||
}));
|
||||
|
||||
try {
|
||||
const response = await axios.post('vacation', vacationRequests);
|
||||
const response = await axios.post("vacation", vacationRequests);
|
||||
|
||||
if (response.data && response.data.status === 'OK') {
|
||||
alert('휴가가 저장되었습니다.');
|
||||
|
||||
const newEvents = vacationRequests.map(req => ({
|
||||
title: req.type === 'D' ? '오전반차' : req.type === 'N' ? '오후반차' : '종일 휴가',
|
||||
start: req.date,
|
||||
allDay: true,
|
||||
}));
|
||||
|
||||
calendarEvents.value = [...calendarEvents.value, ...newEvents];
|
||||
if (response.data && response.data.status === "OK") {
|
||||
alert("휴가가 저장되었습니다.");
|
||||
fetchVacationData(); // 휴가 저장 후 데이터 다시 불러오기
|
||||
selectedDates.value.clear();
|
||||
resetCalendarStyles();
|
||||
} else {
|
||||
alert('휴가 저장 중 오류가 발생했습니다.');
|
||||
alert("휴가 저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('휴가 저장에 실패했습니다.');
|
||||
alert("휴가 저장에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 초기화
|
||||
* 사원 ID별 색상 반환
|
||||
*/
|
||||
function resetCalendarStyles() {
|
||||
const calendarElements = document.querySelectorAll('.fc-daygrid-day');
|
||||
calendarElements.forEach(element => {
|
||||
element.style.backgroundColor = '';
|
||||
element.style.backgroundImage = '';
|
||||
});
|
||||
function getColorByEmployeeId(employeeId) {
|
||||
const colors = ["#ade3ff", "#ffade3", "#ade3ad", "#ffadad"];
|
||||
return colors[employeeId % colors.length];
|
||||
}
|
||||
|
||||
// 데이터 불러오기 호출
|
||||
onMounted(() => {
|
||||
fetchVacationData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
.vacation-management {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 버튼 스타일 */
|
||||
.half-day-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -236,4 +190,48 @@ onMounted(() => {
|
||||
.half-day-buttons .btn.active {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
/* FullCalendar 이벤트 스타일 */
|
||||
.fc-daygrid-event {
|
||||
position: absolute !important;
|
||||
height: 20px !important; /* 실선 두께 */
|
||||
width: 90% !important;
|
||||
left: 5% !important;
|
||||
margin: 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 2px !important;
|
||||
background-color: inherit !important;
|
||||
border: none !important; /* 기본 FullCalendar 테두리 제거 */
|
||||
}
|
||||
|
||||
/* 여러 이벤트가 같은 날짜에 있을 때 정렬 */
|
||||
.fc-daygrid-event-harness {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
/* 오전반차(왼쪽부터 중앙까지) */
|
||||
.fc-daygrid-event.half-day-am {
|
||||
width: 45% !important;
|
||||
left: 0% !important;
|
||||
background-color: #ffdd57 !important; /* 노란색 */
|
||||
}
|
||||
|
||||
/* 오후반차(오른쪽부터 중앙까지) */
|
||||
.fc-daygrid-event.half-day-pm {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
right: 0% !important;
|
||||
background-color: #57a5ff !important; /* 파란색 */
|
||||
}
|
||||
|
||||
/* 연차 (전체 너비) */
|
||||
.fc-daygrid-event.full-day {
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
background-color: #ff85a2 !important; /* 연한 빨강 */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
<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="col-6">
|
||||
<h5 class="mb-0">용어집</h5>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="mb-0 title">용어집</h5>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-md-6">
|
||||
<SearchBar @update:data="search"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<div class="mt-4">
|
||||
단어 : {{ filteredList.length }}
|
||||
단어 : {{ total }}
|
||||
<WriteButton @click="toggleWriteForm" />
|
||||
</div>
|
||||
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<div>
|
||||
<DictAlphabetFilter/>
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length" class="mt-5">
|
||||
<CategoryBtn :lists="cateList" />
|
||||
@ -32,36 +32,43 @@
|
||||
<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="total > 0" class="px-0 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
/>
|
||||
</ul>
|
||||
<!-- <ul v-if="wordList.length > 0" class="px-0 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
/>
|
||||
</ul> -->
|
||||
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watchEffect, computed } from 'vue';
|
||||
import { ref, watchEffect, computed, onMounted } from 'vue';
|
||||
import axios from '@api';
|
||||
import SearchBar from '@c/search/SearchBar.vue';
|
||||
import WriteButton from '@c/button/WriteBtn.vue';
|
||||
@ -69,7 +76,7 @@
|
||||
import DictCard from '@/components/wordDict/DictCard.vue';
|
||||
import DictWrite from '@/components/wordDict/DictWrite.vue';
|
||||
import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
|
||||
|
||||
|
||||
|
||||
// 공통
|
||||
const loading = ref(false);
|
||||
@ -77,72 +84,110 @@
|
||||
|
||||
// 용어집
|
||||
const wordList = ref([]);
|
||||
//용어집 총개수
|
||||
const total = ref(0);
|
||||
// 카테고리
|
||||
const cateList = ref([]);
|
||||
|
||||
//선택된 알파벳
|
||||
const selectedAlphabet = ref('');
|
||||
// 검색
|
||||
const searchText = ref('');
|
||||
|
||||
// 작성
|
||||
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);
|
||||
// 카테고리
|
||||
const categoryResponse = await axios.get('worddict/getWordCategory');
|
||||
cateList.value = categoryResponse.data.data;
|
||||
console.log('카테고리 데이터:', cateList.value);
|
||||
} catch (err) {
|
||||
error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
// 데이터 로드
|
||||
onMounted(() => {
|
||||
getwordList(); //용어목록조회
|
||||
getwordCategory(); //카테고리목록조회
|
||||
});
|
||||
//용어 목록
|
||||
const getwordList = (searchKeyword='',indexKeyword='') => {
|
||||
axios.get('worddict/getWordList',{
|
||||
//목록조회시 파라미터 전달
|
||||
params: { searchKeyword: searchKeyword
|
||||
,indexKeyword:indexKeyword
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
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; // 로딩 종료
|
||||
});
|
||||
};
|
||||
// 카테고리 목록
|
||||
const getwordCategory = () => {
|
||||
axios.get('worddict/getWordCategory')
|
||||
.then(res => {
|
||||
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) => {
|
||||
const trimmedSearchText = e.trim();
|
||||
if (trimmedSearchText.length === 0) {
|
||||
alert('검색어를 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
searchText.value = trimmedSearchText;
|
||||
searchText.value = e.trim();
|
||||
getwordList(searchText.value,selectedAlphabet.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 filteredList = computed(() =>
|
||||
// wordList.value.filter(item =>
|
||||
// item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
|
||||
// )
|
||||
// );
|
||||
|
||||
// 작성 toggle
|
||||
const toggleWriteForm = () => {
|
||||
isWriteVisible.value = !isWriteVisible.value;
|
||||
};
|
||||
|
||||
// `watchEffect`로 API 호출
|
||||
watchEffect(() => {
|
||||
fetchAllData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card > div {
|
||||
padding: 0 30px
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user