localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into login

Browse Source
This commit is contained in:
yoon 2025-03-06 13:16:47 +09:00
commit 17fb20ae1e
10 changed files with 296 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/css/custom.css
View File

@ -78,14 +78,14 @@ opacity: 0.6; /* 흐려 보이게 */
border: none !important;
border-radius: 4px;
}
/* 오전 반차 (왼쪽 절반) */
/* 오전 반차 활성화 영역 (왼쪽 절반) */
.selected-event.half-day-am {
width: 50% !important;
left: 0 !important;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* 오후 반차 (오른쪽 절반) */
/* 오후 반차 활성화 영역 (오른쪽 절반) */
.selected-event.half-day-pm {
width: 50% !important;
margin-left: auto !important;
@ -105,6 +105,30 @@ opacity: 0.6; /* 흐려 보이게 */
font-size: 18px;
cursor: pointer;
}
.close-btn:hover {
color: #525252;
}
/* 모달 배경 투명하게 */
.vac-modal-dialog {
background: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 모달 본문 스타일 */
.vac-modal-content {
background: #fff;
border-radius: 8px;
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
padding: 20px;
max-width: 500px;
width: 100%;
position: relative;
}
/* 리스트 아이템 */
.vacation-item {
display: flex;

125
src/components/board/BoardCommentArea.vue
View File

@ -51,65 +51,78 @@
</template>
<script setup>
import { ref, defineEmits, defineProps, computed, watch, inject } from 'vue';
import SaveBtn from '../button/SaveBtn.vue';
import { ref, defineEmits, defineProps, watch, inject } from 'vue';
import SaveBtn from '../button/SaveBtn.vue';
const props = defineProps({
unknown: {
type: Boolean,
default: true,
},
parentId: {
type: Number,
default: 0,
},
passwordAlert: {
type: String,
default: '',
},
commentAlert: {
type: String,
default: '',
},
});
const $common = inject('common');
const comment = ref('');
const password = ref('');
const isCheck = ref(props.unknown);
const textAlert = ref('');
const passwordAlert2 = ref('');
const props = defineProps({
unknown: {
type: Boolean,
default: true,
},
parentId: {
type: Number,
default: 0,
},
passwordAlert: {
type: String,
default: '',
},
commentAlert: {
type: String,
default: '',
},
});
const emit = defineEmits(['submitComment']);
const LOCBRDTYP = isCheck.value ? '300102' : null;
function handleCommentSubmit() {
if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요';
return false;
} else {
textAlert.value = '';
}
if (isCheck.value && !$common.isNotEmpty(password.value)) {
passwordAlert2.value = '비밀번호를 입력하세요';
return false;
} else {
passwordAlert2.value = '';
}
const $common = inject('common');
const comment = ref('');
const password = ref('');
const isCheck = ref(false);
const textAlert = ref('');
const passwordAlert2 = ref('');
emit('submitComment', {
comment: comment.value,
password: isCheck.value ? password.value : '',
isCheck: isCheck.value,
LOCBRDTYP, // 익명일 경우 '300102' 설정
});
const emit = defineEmits(['submitComment']);
const handleCommentSubmit = () => {
if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요';
return false;
} else {
textAlert.value = '';
}
watch(
() => props.passwordAlert,
() => {
if (!props.passwordAlert) {
comment.value = '';
password.value = '';
}
},
);
if (isCheck.value && !$common.isNotEmpty(password.value)) {
passwordAlert2.value = '비밀번호를 입력하세요';
return false;
} else {
passwordAlert2.value = '';
}
// 댓글 제출
emit('submitComment', {
comment: comment.value,
password: isCheck.value ? password.value : '',
isCheck: isCheck.value,
LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
});
// 제출 후 입력 필드 리셋
resetCommentForm();
};
// 입력 필드 리셋 함수 추가
const resetCommentForm = () => {
comment.value = '';
password.value = '';
isCheck.value = false;
};
watch(
() => props.passwordAlert,
() => {
if (!props.passwordAlert) {
resetCommentForm();
}
}
);
</script>

69
src/components/board/BoardProfile.vue
View File

@ -2,9 +2,9 @@
<div class="d-flex align-items-center flex-wrap">
<div class="d-flex align-items-center">
<div v-if="!unknown" class="avatar me-2">
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
<img :src="getProfileImage(profilePath)" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">{{ profileName }}</h6>
<div class="profile-detail">
@ -23,8 +23,7 @@
<!-- 버튼 영역 -->
<div class="ms-auto text-end">
<!-- 수정, 삭제 버튼 -->
<!-- <template v-if="isAuthor || showDetail"> -->
<template v-if="unknown || isCommentAuthor || isAuthor">
<template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
<EditButton @click.stop="editClick" />
<DeleteButton @click.stop="deleteClick" />
</template>
@ -35,18 +34,23 @@
:boardId="boardId"
:comment="comment"
@updateReaction="handleUpdateReaction"
>
</BoardRecommendBtn>
/>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { computed, defineProps, defineEmits } from 'vue';
import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
// 기본 프로필 이미지 경로
const defaultProfile = "/img/icons/icon.png";
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = "http://localhost:10325/"; // API 서버 URL
// Props 정의
const props = defineProps({
comment: {
@ -65,6 +69,10 @@ const props = defineProps({
type: String,
default: '',
},
profilePath: {
type: String,
default: '',
},
unknown: {
type: Boolean,
default: true,
@ -73,13 +81,12 @@ const props = defineProps({
type: Boolean,
default: true,
},
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
isAuthor: {
type: Boolean,
default: false,
},
isCommentAuthor: Boolean, // 댓글 작성자인지 여부
isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
isCommentAuthor: Boolean,
isCommentProfile: Boolean,
date: {
type: String,
required: '',
@ -100,6 +107,11 @@ const props = defineProps({
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
const isDeletedComment = computed(() => {
return props.comment?.content === '삭제된 댓글입니다' &&
props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
});
// 수정
const editClick = () => {
emit('editClick', { ...props.comment, unknown: props.unknown });
@ -110,42 +122,19 @@ const deleteClick = () => {
emit('deleteClick', { ...props.comment, unknown: props.unknown });
};
// 좋아요/싫어요 업데이트
const handleUpdateReaction = (reactionData) => {
emit("updateReaction", {
boardId: props.boardId,
commentId: props.comment?.commentId,
commentId: props.comment?.commentId,
...reactionData,
});
};
// 프로필 이미지 경로 설정
const getProfileImage = (profilePath) => {
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
};
return profilePath && profilePath.trim()
? `${baseUrl}upload/img/profile/${profilePath}`
: defaultProfile;
};
</script>
<style scoped>
.profile-detail span ~ span {
margin-left: 5px;
}
.ms-auto button + button {
margin-left: 5px;
}
.btn.author {
height: 30px;
}
@media screen and (max-width: 450px) {
.btn-area {
margin-top: 10px;
width: 100%;
}
.btn.author {
height: 30px;
}
}
</style>

62
src/components/modal/VacationGrantModal.vue
View File

@ -1,26 +1,29 @@
<template>
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
<div class="modal-content p-5">
<h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
<button class="close-btn" @click="closeModal">✖</button>
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
<div class="vac-modal-content p-5">
<div class="modal-header">
<h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
<button class="close-btn" @click="closeModal">✖</button>
</div>
<div class="modal-body">
<p>선물할 연차 개수를 선택하세요.</p>
<div class="modal-body">
<p>선물할 연차 개수를 선택하세요.</p>
<div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
<button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
<span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
<button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
</div>
<div class="custom-button-container">
<button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
<i class="bx bx-gift"></i>
</button>
</div>
<div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
<button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
<span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
<button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
</div>
<div class="custom-button-container">
<button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
<i class="bx bx-gift"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
@ -121,25 +124,6 @@
</script>
<style scoped>
/* 모달 배경 투명하게 */
.modal-dialog {
background: none !important; /* 배경 제거 */
box-shadow: none !important; /* 음영 제거 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
<style scoped>
/* 모달 내용 스타일 */
.modal-content {
background: #fff; /* 기존 흰색 배경 유지 */
border-radius: 8px;
box-shadow: none !important; /* 내부 음영 제거 */
padding: 20px;
max-width: 500px;
width: 100%;
}
</style>
</style>

25
src/components/modal/VacationModal.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
<div class="modal-content p-5 modal-scroll">
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
<div class="vac-modal-content p-5 modal-scroll">
<h5 class="modal-title">📅 내 연차 사용 내역</h5>
<button class="close-btn" @click="closeModal">✖</button>
@ -138,25 +138,4 @@ const closeModal = () => {
</script>
<style scoped>
/* 모달 배경 투명하게 */
.modal-dialog {
background: none !important; /* 배경 제거 */
box-shadow: none !important; /* 음영 제거 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* 모달 내용 스타일 */
.modal-content {
background: #fff; /* 기존 흰색 배경 유지 */
border-radius: 8px;
box-shadow: none !important; /* 내부 음영 제거 */
padding: 20px;
max-width: 500px;
width: 100%;
}
</style>

4
src/layouts/TheTop.vue
View File

@ -8,8 +8,8 @@
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<button class="btn p-1" @click="switchToLightMode"><i class="bx bxs-sun link-warning"></i></button>
<button class="btn p-1" @click="switchToDarkMode"><i class="bx bxs-moon"></i></button>
<!-- <button class="btn p-1" @click="switchToLightMode"><i class="bx bxs-sun link-warning"></i></button> -->
<!-- <button class="btn p-1" @click="switchToDarkMode"><i class="bx bxs-moon"></i></button> -->
<i class="bx bx-bell bx-md bx-log-out cursor-pointer p-1" @click="handleLogout"></i>

8
src/views/board/BoardList.vue
View File

@ -61,7 +61,7 @@
📌 {{ notice.title }}
<span v-if="notice.commentCount" class="comment-count">[ {{ notice.commentCount }} ]</span>
<i v-if="notice.img" class="bi bi-image me-1"></i>
<i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
<i v-if="Array.isArray(notice.hasAttachment) && notice.hasAttachment.length > 0" class="bi bi-paperclip"></i>
<span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
</td>
<td class="text-center">{{ notice.author }}</td>
@ -79,7 +79,7 @@
{{ post.title }}
<span v-if="post.commentCount" class="comment-count">[ {{ post.commentCount }} ]</span>
<i v-if="post.img" class="bi bi-image me-1"></i>
<i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
<i v-if="Array.isArray(post.hasAttachment) && post.hasAttachment.length > 0" class="bi bi-paperclip"></i>
<span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
</td>
<td class="text-center">{{ post.author }}</td>
@ -206,7 +206,7 @@ const fetchGeneralPosts = async (page = 1) => {
rawDate: post.date,
date: formatDate(post.date), // 날짜 변환 적용
views: post.cnt || 0,
hasAttachment: post.hasAttachment || false,
hasAttachment: post.hasAttachment,
img: post.firstImageUrl || null,
commentCount : post.commentCount
}));
@ -247,7 +247,7 @@ const fetchNoticePosts = async () => {
date: formatDate(post.date),
rawDate: post.date,
views: post.cnt || 0,
hasAttachment: post.hasAttachment || false,
hasAttachment: post.hasAttachment,
img: post.firstImageUrl || null,
commentCount : post.commentCount
}));

93
src/views/board/BoardView.vue
View File

@ -17,47 +17,35 @@
:isAuthor="isAuthor"
@editClick="editClick"
@deleteClick="deleteClick"
/>
<!-- 비밀번호 입력창 (익명일 경우) -->
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
<div class="input-group">
<input
type="password"
class="form-control"
v-model="password"
placeholder="비밀번호 입력"
@input="password = password.replace(/\s/g, '')"
/>
<button class="btn btn-primary" @click="submitPassword">확인</button>
</div>
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
</div>
/>
</div>
</div>
<!-- 게시글 내용 -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
<!-- 제목 섹션 -->
<div class="me-1">
<h5 class="mb-4">{{ boardTitle }}</h5>
</div>
<!-- 첨부파일 섹션 -->
<div v-if="attachment" class="btn-group">
<!-- 첨부파일 다운로드 버튼 -->
<div v-if="attachments.length" class="btn-group">
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-download me-2"></i>
첨부파일
<!-- (<span class="attachment-num">{{ dropdownItems.length }}</span>) -->
첨부파일 ({{ attachments.length }}개)
</button>
<!-- <ul class="dropdown-menu">
<li v-for="(item, index) in dropdownItems" :key="index">
<a class="dropdown-item" href="javascript:void(0);">
{{ item.label }}
<ul class="dropdown-menu">
<li v-for="(attachment, index) in attachments" :key="index">
<a
class="dropdown-item"
href="#"
@click.prevent="downloadFile(attachment)"
>
{{ attachment.originalName }}.{{ attachment.extension }}
</a>
</li>
</ul> -->
</ul>
</div>
</div>
@ -75,15 +63,8 @@
:likeClicked="likeClicked"
:dislikeClicked="dislikeClicked"
@updateReaction="handleUpdateReaction"
/>
/>
</div>
<!-- 첨부파일 목록 -->
<!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
<li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
<a :href="attachment.url" target="_blank" class="text-decoration-none">{{ attachment.name }}</a>
</li>
</ul> -->
<!-- 댓글 입력 영역 -->
<BoardCommentArea
@ -174,6 +155,31 @@ const commentsWithAuthStatus = computed(() => {
return updatedComments;
});
const attachments = ref([]);
// 첨부파일 다운로드 URL 생성
const downloadFile = async (attachment) => {
try {
const response = await axios.get(`board/download`, {
params: { path: attachment.path },
responseType: 'blob'
});
// Blob에서 파일 다운로드 링크 생성
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', attachment.originalName + '.' + attachment.extension);
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
} catch (error) {
console.error('파일 다운로드 오류:', error);
alert('파일 다운로드 중 오류가 발생했습니다.');
}
};
const password = ref('');
const passwordAlert = ref("");
@ -214,12 +220,9 @@ const fetchBoardDetails = async () => {
const data = response.data.data;
// API 응답 데이터 반영
// const boardDetail = data.boardDetail || {};
profileName.value = data.author || '익명';
authorId.value = data.authorId; //게시글 작성자 id
authorId.value = data.authorId;
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
date.value = data.date || '';
@ -228,6 +231,7 @@ const fetchBoardDetails = async () => {
dislikes.value = data.dislikeCount || 0;
attachment.value = data.hasAttachment || null;
commentNum.value = data.commentCount || 0;
attachments.value = data.attachments || [];
} catch (error) {
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
@ -288,7 +292,6 @@ const fetchComments = async (page = 1) => {
page
}
});
const commentsList = response.data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
boardId: comment.LOCBRDSEQ,
@ -303,6 +306,8 @@ const fetchComments = async (page = 1) => {
createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
children: [], // 대댓글을 담을 배열
updateAtRaw: comment.LOCCMTUDT,
}));
commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
@ -461,10 +466,10 @@ const findCommentById = (commentId, commentsList) => {
// 댓글 수정(대댓글 포함)
const editComment = (comment) => {
password.value = '';
passwordCommentAlert.value = '';
password.value = '';
passwordCommentAlert.value = '';
currentPasswordCommentId.value = null;
const targetComment = findCommentById(comment.commentId, comments.value);
if (!targetComment) {
@ -493,7 +498,7 @@ const editComment = (comment) => {
} else {
// 다른 모든 댓글의 수정창 닫기
closeAllEditTextareas();
// 비밀번호 입력
targetComment.isEditTextarea = false;
toggleCommentPassword(comment, "edit");
@ -537,7 +542,7 @@ const toggleCommentPassword = (comment, button) => {
passwordCommentAlert.value = '';
} else {
currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
password.value = '';
password.value = '';
passwordCommentAlert.value = '';
}

74
src/views/board/BoardWrite.vue
View File

@ -60,14 +60,26 @@
/>
</div>
<!-- 첨부파일 업로드 -->
<FormFile
title="첨부파일"
name="files"
:is-alert="attachFilesAlert"
@update:data="attachFiles = $event"
@update:data="handleFileUpload"
@update:isValid="isFileValid = $event"
/>
<!-- 실시간 반영된 파일 개수 표시 -->
<p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
<p v-if="fileError" class="text-danger">{{ fileError }}</p>
<ul class="list-group mt-2" v-if="attachFiles.length">
<li v-for="(file, index) in attachFiles" :key="index" class="list-group-item d-flex justify-content-between align-items-center">
{{ file.name }}
<button class="close-btn" @click="removeFile(index)">✖</button>
</li>
</ul>
<!-- 내용 입력 (에디터) -->
<div class="mb-4">
<label class="col-md-2 col-form-label">
@ -92,7 +104,7 @@
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, watch } from 'vue';
import { ref, onMounted, getCurrentInstance, watch, computed } from 'vue';
import QEditor from '@c/editor/QEditor.vue';
import FormInput from '@c/input/FormInput.vue';
import FormFile from '@c/input/FormFile.vue';
@ -107,8 +119,7 @@ const categoryList = ref([]);
const title = ref('');
const password = ref('');
const categoryValue = ref(null);
const content = ref({ ops: [] }); // Delta 데이터 유지
const attachFiles = ref(null);
const content = ref({ ops: [] });
const isFileValid = ref(true);
const titleAlert = ref(false);
@ -117,8 +128,10 @@ const contentAlert = ref(false);
const categoryAlert = ref(false);
const attachFilesAlert = ref(false);
const { appContext } = getCurrentInstance();
const $common = appContext.config.globalProperties.$common;
const attachFiles = ref([]);
const maxFiles = 5;
const maxSize = 10 * 1024 * 1024;
const fileError = ref('');
const fetchCategories = async () => {
try {
@ -137,12 +150,37 @@ onMounted(() => {
fetchCategories();
});
/** ✅ 제목 유효성 검사 */
const fileCount = computed(() => attachFiles.value.length);
const handleFileUpload = (files) => {
const validFiles = files.filter(file => file.size <= maxSize);
if (files.some(file => file.size > maxSize)) {
fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
return;
}
if (attachFiles.value.length + validFiles.length > maxFiles) {
fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
return;
}
fileError.value = '';
attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
};
const removeFile = (index) => {
attachFiles.value.splice(index, 1);
if (attachFiles.value.length <= maxFiles) {
fileError.value = '';
}
};
watch(attachFiles, () => {
isFileValid.value = attachFiles.value.length <= maxFiles;
});
const validateTitle = () => {
titleAlert.value = title.value.trim().length === 0;
};
/** ✅ 비밀번호 유효성 검사 (공백 제거) */
const validatePassword = () => {
if (categoryValue.value === 300102) {
password.value = password.value.replace(/\s/g, ''); // 공백 제거
@ -152,7 +190,6 @@ const validatePassword = () => {
}
};
/** ✅ 내용 유효성 검사 */
const validateContent = () => {
if (!content.value?.ops?.length) {
contentAlert.value = true;
@ -168,7 +205,7 @@ const validateContent = () => {
contentAlert.value = !(hasText || hasImage);
};
/** ✅ 글쓰기 */
/** 글쓰기 */
const write = async () => {
validateTitle();
validatePassword();
@ -189,10 +226,10 @@ const write = async () => {
const { data: boardResponse } = await axios.post('board', boardData);
const boardId = boardResponse.data;
// ✅ 첨부파일 업로드 (비동기 병렬 처리)
// 첨부파일 업로드 (비동기 병렬 처리)
if (attachFiles.value && attachFiles.value.length > 0) {
await Promise.all(attachFiles.value.map(async (file) => {
console.log(file);
const formData = new FormData();
const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');
@ -200,12 +237,11 @@ const write = async () => {
formData.append('CMNFLEORG', fileNameWithoutExt);
formData.append('CMNFLEEXT', file.name.split('.').pop());
formData.append('CMNFLESIZ', file.size);
formData.append('CMNFLEPAT', 'boardfile');
formData.append('file', file);
formData.append('file', file); // 📌 실제 파일 추가
await axios.post(`board/${boardId}/attachments`, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
await axios.post(`board/${boardId}/attachments`, formData,
{ isFormData : true }
);
}));
}
@ -217,12 +253,12 @@ const write = async () => {
}
};
/** ✅ 목록으로 이동 */
/** 목록으로 이동 */
const goList = () => {
router.push('/board');
};
/** ✅ `content` 변경 감지하여 자동 유효성 검사 실행 */
/** `content` 변경 감지하여 자동 유효성 검사 실행 */
watch(content, () => {
validateContent();
});

74
src/views/vacation/VacationManagement.vue
View File

@ -148,7 +148,7 @@ watch(
const calendarDatepicker = ref(null);
let fpInstance = null;
/** ✅ 변경사항 여부 확인 */
/** 변경사항 여부 확인 */
const hasChanges = computed(() => {
return (
selectedDates.value.size > 0 ||
@ -157,7 +157,7 @@ const hasChanges = computed(() => {
});
/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
/** selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
watch(
() => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
(newKeys) => {
@ -204,7 +204,7 @@ function handleDateClick(info) {
selectedDates.value.set(clickedDateStr, type);
halfDayType.value = null;
updateCalendarEvents();
// ✅ 날짜 선택 후 버튼 초기화
// 날짜 선택 후 버튼 초기화
if (halfDayButtonsRef.value) {
halfDayButtonsRef.value.resetHalfDay();
}
@ -417,42 +417,42 @@ function handleDateClick(info) {
halfDayType.value = halfDayType.value === type ? null : type;
}
async function fetchVacationData(year, month) {
try {
const response = await axios.get(`vacation/list/${year}/${month}`);
if (response.status === 200) {
const vacationList = response.data;
if (lastRemainingYear.value !== year) {
myVacations.value = vacationList.filter(
(vac) => vac.MEMBERSEQ === userStore.user.id
);
lastRemainingYear.value = year;
}
const events = vacationList
.filter((vac) => !vac.LOCVACRMM)
.map((vac) => {
let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
return {
title: getVacationType(vac.LOCVACTYP),
start: dateStr,
backgroundColor,
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
saved: true,
memberSeq: vac.MEMBERSEQ,
};
})
.filter((event) => event.start);
return events;
} else {
console.warn("📌 휴가 데이터를 불러오지 못함");
return [];
}
} catch (error) {
console.error("Error fetching vacation data:", error);
// 연차 리스트 조회회
async function fetchVacationData(year, month) {
try {
const response = await axios.get(`vacation/list/${year}/${month}`);
if (response.status === 200) {
const vacationList = response.data;
// 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
const filteredVacations = vacationList.filter(vac =>
userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ] !== "#FFFFFF"
);
const events = filteredVacations.map(vac => {
let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
let backgroundColor = userColors.value[vac.MEMBERSEQ];
return {
title: getVacationType(vac.LOCVACTYP),
start: dateStr,
backgroundColor,
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
saved: true,
memberSeq: vac.MEMBERSEQ,
};
}).filter(event => event.start);
return events;
} else {
console.warn("📌 휴가 데이터를 불러오지 못함");
return [];
}
} catch (error) {
console.error("Error fetching vacation data:", error);
return [];
}
}
async function saveVacationChanges() {
if (!hasChanges.value) return;
@ -522,7 +522,7 @@ function handleDateClick(info) {
await nextTick();
fullCalendarRef.value.getApi().refetchEvents();
}
/** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */
/** 오늘 이후의 날짜만 클릭 가능하도록 설정 */
function markClickableDates() {
nextTick(() => {
const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD