머지
This commit is contained in:
parent
2c28645488
commit
8c29873731
@ -5,7 +5,7 @@
|
||||
<div class="d-flex justify-content-start align-items-top">
|
||||
<!-- 프로필섹션 -->
|
||||
<div class="avatar-wrapper">
|
||||
<div class="avatar me-4">
|
||||
<div v-if="!unknown" class="avatar me-4">
|
||||
<img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
</div>
|
||||
@ -13,8 +13,9 @@
|
||||
<div class="w-100">
|
||||
<textarea
|
||||
class="form-control"
|
||||
placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다."
|
||||
placeholder="댓글 달기"
|
||||
rows="3"
|
||||
v-model="comment"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,7 +24,7 @@
|
||||
<div class="d-flex justify-content-between flex-wrap mt-4">
|
||||
<div class="d-flex flex-wrap align-items-center">
|
||||
<!-- 익명 체크박스 (익명게시판일 경우에만)-->
|
||||
<div class="form-check form-check-inline mb-0 me-4">
|
||||
<div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
@ -40,15 +41,16 @@
|
||||
type="password"
|
||||
id="basic-default-password"
|
||||
class="form-control flex-grow-1"
|
||||
placeholder=""
|
||||
v-model="password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 답변 쓰기 버튼 -->
|
||||
<div class="ms-auto mt-3 mt-md-0">
|
||||
<button class="btn btn-primary">
|
||||
<i class="icon-base bx bx-check"></i>
|
||||
<button class="btn btn-primary" @click="handleCommentSubmit">
|
||||
<!-- <i class="icon-base bx bx-check"></i> -->
|
||||
확인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,6 +59,40 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, defineEmits, defineProps, computed, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
unknown: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
parentId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const comment = ref('');
|
||||
const password = ref('');
|
||||
const isCheck = ref(false);
|
||||
|
||||
const emit = defineEmits(['submitComment']);
|
||||
|
||||
watch(() => props.unknown, (newVal) => {
|
||||
if (!newVal) {
|
||||
isCheck.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function handleCommentSubmit() {
|
||||
emit('submitComment', {
|
||||
comment: comment.value,
|
||||
password: password.value,
|
||||
});
|
||||
|
||||
comment.value = '';
|
||||
password.value = '';
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,49 +1,41 @@
|
||||
<template>
|
||||
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
|
||||
<div class="modal-content modal-scroll">
|
||||
<h5 class="modal-title">📅 내 연차 사용 내역</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
<h5 class="modal-title">📅 내 연차 사용 내역</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
|
||||
<!-- 연차 사용 및 받은 연차 리스트 -->
|
||||
<div class="modal-body" v-if="mergedVacations.length > 0">
|
||||
<ol class="vacation-list">
|
||||
<li
|
||||
v-for="(vacation, index) in mergedVacations"
|
||||
:key="index"
|
||||
class="vacation-item"
|
||||
>
|
||||
<span v-if="vacation.type === 'used'" class="vacation-index">
|
||||
{{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }})
|
||||
</span>
|
||||
<span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
|
||||
{{ vacation.type === 'used' ? '-' : '+' }}
|
||||
</span>
|
||||
<span
|
||||
:style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
|
||||
class="vacation-date"
|
||||
>
|
||||
{{ formatDate(vacation.date) }}
|
||||
<span class="vacation-type">
|
||||
({{ vacation.halfDay ? '반차' : '풀 연차' }})
|
||||
<span v-if="vacation.senderId"> (보낸 연차)</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- 연차 사용 및 받은 연차 리스트 -->
|
||||
<div class="modal-body" v-if="mergedVacations.length > 0">
|
||||
<ol class="vacation-list">
|
||||
<li v-for="(vacation, index) in mergedVacations" :key="index" class="vacation-item">
|
||||
<span v-if="vacation.type === 'used'" class="vacation-index">
|
||||
{{ getVacationIndex(index) }})
|
||||
</span>
|
||||
<span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
|
||||
{{ vacation.type === 'used' ? '-' : '+' }}
|
||||
</span>
|
||||
<span
|
||||
:style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
|
||||
class="vacation-date"
|
||||
>
|
||||
{{ formatDate(vacation.date) }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-if="mergedVacations.length === 0" class="no-data">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-if="mergedVacations.length === 0" class="no-data">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, computed } from "vue";
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
isOpen: Boolean,
|
||||
myVacations: {
|
||||
type: Array,
|
||||
@ -57,50 +49,57 @@
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
// ✅ 사용한 연차 개수
|
||||
const totalUsedVacationCount = computed(() => props.myVacations.length);
|
||||
// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
|
||||
const usedVacations = computed(() =>
|
||||
props.myVacations.map(v => ({ ...v, type: "used" }))
|
||||
);
|
||||
|
||||
// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
|
||||
const usedVacations = computed(() =>
|
||||
props.myVacations.map(v => ({ ...v, type: "used" }))
|
||||
const receivedVacations = computed(() =>
|
||||
props.receivedVacations.map(v => ({ ...v, type: "received" }))
|
||||
);
|
||||
|
||||
// ✅ 정확한 정렬 및 리스트 병합
|
||||
const mergedVacations = computed(() => {
|
||||
return [...usedVacations.value, ...receivedVacations.value].sort(
|
||||
(a, b) => new Date(b.date) - new Date(a.date)
|
||||
);
|
||||
});
|
||||
|
||||
const receivedVacations = computed(() =>
|
||||
props.receivedVacations.map(v => ({ ...v, type: "received" }))
|
||||
);
|
||||
// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
|
||||
const getVacationIndex = (index) => {
|
||||
let count = 0;
|
||||
for (let i = 0; i <= index; i++) {
|
||||
const v = mergedVacations.value[i];
|
||||
count += v.used_quota; // 누적하여 더함
|
||||
}
|
||||
return count;
|
||||
};
|
||||
|
||||
// ✅ 정확한 정렬 및 리스트 병합
|
||||
const mergedVacations = computed(() => {
|
||||
return [...usedVacations.value, ...receivedVacations.value].sort(
|
||||
(a, b) => new Date(b.date) - new Date(a.date)
|
||||
);
|
||||
});
|
||||
// ✅ 날짜 형식 변환 (YYYY-MM-DD)
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
|
||||
};
|
||||
|
||||
// ✅ 날짜 형식 변환 (YYYY-MM-DD)
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
|
||||
};
|
||||
const closeModal = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
const closeModal = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 모달 스타일 */
|
||||
.modal-dialog {
|
||||
<style scoped>
|
||||
/* 모달 스타일 */
|
||||
.modal-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 스크롤 가능한 모달 */
|
||||
.modal-content {
|
||||
/* 스크롤 가능한 모달 */
|
||||
.modal-content {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
@ -108,10 +107,10 @@
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 닫기 버튼 */
|
||||
.close-btn {
|
||||
/* 닫기 버튼 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
@ -120,17 +119,17 @@
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* 리스트 기본 스타일 */
|
||||
.vacation-list {
|
||||
/* 리스트 기본 스타일 */
|
||||
.vacation-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 리스트 아이템 */
|
||||
.vacation-item {
|
||||
/* 리스트 아이템 */
|
||||
.vacation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
@ -139,49 +138,49 @@
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 인덱스 (연차 사용 개수) */
|
||||
.vacation-index {
|
||||
/* 인덱스 (연차 사용 개수) */
|
||||
.vacation-index {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* "-" 빨간색 */
|
||||
.minus-symbol {
|
||||
/* "-" 빨간색 */
|
||||
.minus-symbol {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* "+" 파란색 */
|
||||
plus-symbol {
|
||||
/* "+" 파란색 */
|
||||
.plus-symbol {
|
||||
color: blue;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 날짜 스타일 */
|
||||
.vacation-date {
|
||||
/* 날짜 스타일 */
|
||||
.vacation-date {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* 연차 유형 스타일 */
|
||||
.vacation-type {
|
||||
/* 연차 유형 스타일 */
|
||||
.vacation-type {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: gray;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 연차 데이터 없음 */
|
||||
.no-data {
|
||||
/* 연차 데이터 없음 */
|
||||
.no-data {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -221,12 +221,12 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
|
||||
};
|
||||
|
||||
// 댓글 목록 조회
|
||||
const fetchComments = async (pageNum = 1) => {
|
||||
const fetchComments = async (page = 1) => {
|
||||
try {
|
||||
const response = await axios.get(`board/${currentBoardId.value}/comments`, {
|
||||
params: {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
pageNum: pageNum
|
||||
page
|
||||
}
|
||||
});
|
||||
console.log("목록 API 응답 데이터:", response.data);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user