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

Merge branch 'main' into commuters

Browse Source
This commit is contained in:
yoon 2025-02-25 14:21:05 +09:00
commit 56fc9615de
17 changed files with 608 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
public/js/main.js
View File

@ -2,116 +2,121 @@
* Main
*/
'use strict'
(function () {
// Initialize menu
//-----------------
let menu, animate;
<<<<<<< HEAD
var menu, animate;
(function () {
// Initialize menu
//-----------------
=======
let layoutMenuEl = document.querySelectorAll('#layout-menu');
layoutMenuEl.forEach(function (element) {
menu = new Menu(element, {
orientation: 'vertical',
closeChildren: false,
});
// Change parameter to true if you want scroll animation
window.Helpers.scrollToActive((animate = false));
window.Helpers.mainMenu = menu;
});
>>>>>>> board-comment
let layoutMenuEl = document.querySelectorAll('#layout-menu')
layoutMenuEl.forEach(function (element) {
menu = new Menu(element, {
orientation: 'vertical',
closeChildren: false,
})
// Change parameter to true if you want scroll animation
window.Helpers.scrollToActive((animate = false))
window.Helpers.mainMenu = menu
})
// Initialize menu togglers and bind click on each
let menuToggler = document.querySelectorAll('.layout-menu-toggle');
menuToggler.forEach(item => {
item.addEventListener('click', event => {
event.preventDefault();
window.Helpers.toggleCollapsed();
});
});
// Initialize menu togglers and bind click on each
let menuToggler = document.querySelectorAll('.layout-menu-toggle')
menuToggler.forEach((item) => {
item.addEventListener('click', (event) => {
event.preventDefault()
window.Helpers.toggleCollapsed()
})
})
// Display menu toggle (layout-menu-toggle) on hover with delay
let delay = function (elem, callback) {
let timeout = null;
elem.onmouseenter = function () {
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
if (!Helpers.isSmallScreen()) {
timeout = setTimeout(callback, 300);
} else {
timeout = setTimeout(callback, 0);
}
};
// Display menu toggle (layout-menu-toggle) on hover with delay
let delay = function (elem, callback) {
let timeout = null
elem.onmouseenter = function () {
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
if (!Helpers.isSmallScreen()) {
timeout = setTimeout(callback, 300)
} else {
timeout = setTimeout(callback, 0)
}
elem.onmouseleave = function () {
// Clear any timers set to timeout
document.querySelector('.layout-menu-toggle').classList.remove('d-block');
clearTimeout(timeout);
};
};
if (document.getElementById('layout-menu')) {
delay(document.getElementById('layout-menu'), function () {
// not for small screen
if (!Helpers.isSmallScreen()) {
document.querySelector('.layout-menu-toggle').classList.add('d-block');
}
});
}
elem.onmouseleave = function () {
// Clear any timers set to timeout
document.querySelector('.layout-menu-toggle').classList.remove('d-block')
clearTimeout(timeout)
// Display in main menu when menu scrolls
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
if (menuInnerContainer.length > 0 && menuInnerShadow) {
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
if (this.querySelector('.ps__thumb-y').offsetTop) {
menuInnerShadow.style.display = 'block';
} else {
menuInnerShadow.style.display = 'none';
}
});
}
}
if (document.getElementById('layout-menu')) {
delay(document.getElementById('layout-menu'), function () {
// not for small screen
if (!Helpers.isSmallScreen()) {
document.querySelector('.layout-menu-toggle').classList.add('d-block')
}
})
}
// Display in main menu when menu scrolls
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0]
if (menuInnerContainer.length > 0 && menuInnerShadow) {
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
if (this.querySelector('.ps__thumb-y').offsetTop) {
menuInnerShadow.style.display = 'block'
} else {
menuInnerShadow.style.display = 'none'
}
})
}
// Init helpers & misc
// --------------------
// Init helpers & misc
// --------------------
// Init BS Tooltip
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Init BS Tooltip
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
// Accordion active class
const accordionActiveFunction = function (e) {
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
e.target.closest('.accordion-item').classList.add('active');
} else {
e.target.closest('.accordion-item').classList.remove('active');
}
};
// Accordion active class
const accordionActiveFunction = function (e) {
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
e.target.closest('.accordion-item').classList.add('active')
} else {
e.target.closest('.accordion-item').classList.remove('active')
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
});
// Auto update layout based on screen size
window.Helpers.setAutoUpdate(true);
// Toggle Password Visibility
window.Helpers.initPasswordToggle();
// Speech To Text
window.Helpers.initSpeechToText();
// Manage menu expanded/collapsed with templateCustomizer & local storage
//------------------------------------------------------------------
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
if (window.Helpers.isSmallScreen()) {
return;
}
}
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'))
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction)
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction)
})
// If current layout is vertical and current window screen is > small
// Auto update layout based on screen size
window.Helpers.setAutoUpdate(true)
// Toggle Password Visibility
window.Helpers.initPasswordToggle()
// Speech To Text
window.Helpers.initSpeechToText()
// Manage menu expanded/collapsed with templateCustomizer & local storage
//------------------------------------------------------------------
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
if (window.Helpers.isSmallScreen()) {
return
}
// If current layout is vertical and current window screen is > small
// Auto update menu collapsed/expanded based on the themeConfig
window.Helpers.setCollapsed(true, false)
})()
// Auto update menu collapsed/expanded based on the themeConfig
window.Helpers.setCollapsed(true, false);
})();

90
src/common/common.js
View File

@ -15,35 +15,69 @@ import Quill from 'quill';
$common.변수
*/
const common = {
// JSON 문자열로 Delta 타입을 변환
contentToHtml(content) {
try {
if (content.startsWith('{') || content.startsWith('[')) {
// Delta 형식으로 변환
const delta = JSON.parse(content);
const quill = new Quill(document.createElement('div'));
quill.setContents(delta);
return quill.root.innerHTML; // HTML 반환
}
return content; // 이미 HTML일 경우 그대로 반환
} catch (error) {
console.error('콘텐츠 변환 오류:', error);
return content; // 오류 발생 시 원본 반환
}
},
// Delta 타입을 JSON 문자열로 변환
deltaAsJson(content) {
if (content && content.ops) {
return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환
}
console.error('잘못된 Delta 객체:', content);
return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환
}
// JSON 문자열로 Delta 타입을 변환
contentToHtml(content) {
try {
if (content.startsWith('{') || content.startsWith('[')) {
// Delta 형식으로 변환
const delta = JSON.parse(content);
const quill = new Quill(document.createElement('div'));
quill.setContents(delta);
return quill.root.innerHTML; // HTML 반환
}
return content; // 이미 HTML일 경우 그대로 반환
} catch (error) {
console.error('콘텐츠 변환 오류:', error);
return content; // 오류 발생 시 원본 반환
}
},
// Delta 타입을 JSON 문자열로 변환
deltaAsJson(content) {
if (content && content.ops) {
return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환
}
console.error('잘못된 Delta 객체:', content);
return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환
},
}
/**
* Date 타입 문자열 포멧팅
*
* @param {string} dateStr
* @return
* 1. Date type 인 경우 예시 '25-02-24 12:02'
* 2. Date type 이 아닌 경우 입력값 리턴
*
*/
dateFormatter(dateStr) {
const date = new Date(dateStr);
const dateCheck = date.getTime();
if (isNaN(dateCheck)) {
return dateStr;
} else {
const { year, month, day, hours, minutes } = this.formatDateTime(date);
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
},
formatDateTime(date) {
const zeroFormat = num => (num < 10 ? `0${num}` : num);
return {
year: date.getFullYear(),
month: zeroFormat(date.getMonth() + 1),
day: zeroFormat(date.getDate()),
hours: zeroFormat(date.getHours()),
minutes: zeroFormat(date.getMinutes()),
seconds: zeroFormat(date.getSeconds()),
};
},
};
export default {
install(app) {
app.config.globalProperties.$common = common;
}
install(app) {
app.config.globalProperties.$common = common;
app.provide('common', common);
},
};

13
src/common/formattedDate.js Normal file
View File

@ -0,0 +1,13 @@
/** 날짜 포맷1 (YYYY-MM-DD HH:MM) */
export const formattedDate = (dateString) => {
if (!dateString) return "날짜 없음";
const dateObj = new Date(dateString);
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')}`;
};
/** 날짜 포맷2 (YYYY-MM-DD) */
export const formatDate = (dateString) => {
if (!dateString) return "날짜 없음";
const dateObj = new Date(dateString);
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;
};

30
src/components/board/BoardComment.vue
View File

@ -2,18 +2,20 @@
<div>
<BoardProfile
:unknown="unknown"
:isCommentAuthor="isCommentAuthor"
:boardId="comment.boardId"
:profileName="comment.author"
:date="comment.createdAt"
:comment="comment"
:showDetail="false"
:author="true"
:isLike="!isLike"
:isCommentPassword="comment.isCommentPassword"
:isCommentProfile="true"
@editClick="$emit('editClick', comment)"
@deleteClick="$emit('deleteClick', comment)"
@updateReaction="handleUpdateReaction"
/>
/>
<!-- :author="true" -->
<!-- 댓글 비밀번호 입력창 (익명일 경우) -->
<div v-if="isCommentPassword && unknown" class="mt-3 w-25 ms-auto">
<div class="input-group">
@ -27,7 +29,9 @@
</div>
<span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
</div>
<p>authorId:{{ comment.authorId }}</p>
<p>코멘트 비교: {{comment.isCommentAuthor}}</p>
<div class="mt-6">
<template v-if="comment.isEditTextarea">
@ -44,7 +48,7 @@
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
<BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
<!-- 대댓글 -->
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
<li
@ -52,12 +56,12 @@
:key="child.commentId"
class="mt-8 pt-6 ps-10 border-top"
>
<BoardComment
<BoardComment
:comment="child"
:unknown="unknown"
:isPlusButton="false"
:isPlusButton="false"
:isLike="true"
@submitComment="submitComment"
@submitComment="submitComment"
@updateReaction="handleUpdateReaction"
/>
</li>
@ -77,9 +81,13 @@ const props = defineProps({
required: true,
},
unknown: {
type: Boolean,
default: true,
},
type: Boolean,
default: true,
},
isCommentAuthor: {
type: Boolean,
default: false,
},
isPlusButton: {
type: Boolean,
default: true,
@ -133,7 +141,7 @@ const handleUpdateReaction = (reactionData) => {
// 비밀번호 확인
const logPasswordAndEmit = () => {
emit('submitPassword', props.comment, password.value);
password.value = "";
password.value = "";
};
watch(() => props.comment.isEditTextarea, (newVal) => {

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

@ -43,7 +43,7 @@
class="form-control flex-grow-1"
v-model="password"
/>
<!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
<span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
</div>
</div>
@ -70,6 +70,10 @@ const props = defineProps({
parentId: {
type: Number,
default: 0
},
passwordAlert: {
type: String,
default: false
}
});

7
src/components/board/BoardCommentList.vue
View File

@ -8,6 +8,7 @@
<BoardComment
:unknown="unknown"
:comment="comment"
:isCommentAuthor="comment.isCommentAuthor"
:isCommentPassword="comment.isCommentPassword"
:isEditTextarea="comment.isEditTextarea"
:passwordCommentAlert="passwordCommentAlert"
@ -38,6 +39,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
isCommentAuthor: {
type: Boolean,
default: false,
},
isCommentPassword: {
type: Boolean,
default: false,
@ -52,7 +57,7 @@ const props = defineProps({
}
});
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword']);
const submitComment = (replyData) => {
emit('submitComment', replyData);

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

@ -22,7 +22,8 @@
<!-- 버튼 영역 -->
<div class="ms-auto text-end">
<!-- 수정, 삭제 버튼 -->
<template v-if="author || showDetail">
<!-- <template v-if="isAuthor || showDetail"> -->
<template v-if="isCommentProfile ? isCommentAuthor : isAuthor">
<EditButton @click.stop="editClick" />
<DeleteButton @click.stop="deleteClick" />
</template>
@ -49,7 +50,7 @@ import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
const props = defineProps({
comment: {
type: Object,
required: true,
required: false,
},
boardId: {
type: Number,
@ -61,7 +62,11 @@ const props = defineProps({
},
profileName: {
type: String,
<<<<<<< HEAD
default: '익명',
=======
default: '',
>>>>>>> board-comment
},
unknown: {
type: Boolean,
@ -72,10 +77,12 @@ const props = defineProps({
default: true,
},
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
author: {
isAuthor: {
type: Boolean,
default: false,
},
isCommentAuthor: Boolean, // 댓글 작성자인지 여부
isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
date: {
type: String,
required: true,
@ -98,6 +105,7 @@ const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
// 수정
const editClick = () => {
console.log('클릭 확인')
emit('editClick', props.unknown);
};

11
src/components/input/FormInput.vue
View File

@ -14,10 +14,15 @@
:placeholder="title"
:disabled="disabled"
:min="min"
@focusout="$emit('focusout', modelValue)"
/>
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
{{ title }}을 확인해주세요.
</div>
<!-- 카테고리 중복 -->
<div class="invalid-feedback" :class="isCateAlert ? 'display-block' : ''">
카테고리 중복입니다.
</div>
</div>
</div>
</template>
@ -57,6 +62,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
isCateAlert : {
type :Boolean,
default: false,
},
isLabel : {
type: Boolean,
default: true,
@ -73,7 +82,7 @@ const props = defineProps({
});
// Emits 정의
const emits = defineEmits(['update:modelValue']);
const emits = defineEmits(['update:modelValue', 'focusout']);
// 로컬 상태로 사용하기 위한 `inputValue`
const inputValue = ref(props.modelValue);

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

@ -41,6 +41,7 @@
<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { formatDate } from '@/common/formattedDate.js';
const props = defineProps({
isOpen: Boolean,
@ -130,14 +131,6 @@ const mergedVacations = computed(() => {
return all;
});
/** 날짜 포맷 (YYYY-MM-DD) */
const formatDate = (dateString) => {
if (!dateString) return "";
// 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
// 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
return dateString.substring(0, 10);
};
/** 모달 닫기 */
const closeModal = () => {

2
src/components/vacation/ProfileList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="card-body d-flex justify-content-center">
<div class="card-body d-flex justify-content-center m-n5">
<ul class="list-unstyled d-flex flex-wrap align-items-center gap-2 mb-0 mt-2">
<li
v-for="(user, index) in sortedUserList"

84
src/components/wordDict/DictCard.vue
View File

@ -4,12 +4,12 @@
v-if="isWriteVisible"
@close="isWriteVisible = false"
:dataList="cateList"
@addCategory="addCategory"
@addWord="editWord"
:NumValue="item.WRDDICSEQ"
:formValue="item.WRDDICCAT"
:titleValue="item.WRDDICTTL"
:contentValue="item.WRDDICCON"
:isDisabled="userStore.user.role !== 'ROLE_ADMIN'"
/>
<div v-else>
@ -38,7 +38,7 @@
:style="{ borderColor: item.author.color}"/>
</div>
<div>
<p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
<p class="mb-0 small fw-medium">{{ formattedDate(item.author.createdAt) }}</p>
</div>
</div>
</div>
@ -55,13 +55,13 @@
:style="{ borderColor: item.lastEditor.color}"/>
</div>
<div>
<p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
<p class="mb-0 small fw-medium">{{ formattedDate(item.lastEditor.updatedAt) }}</p>
</div>
</div>
</div>
</div>
<div class="edit-btn">
<div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
<EditBtn @click="toggleWriteVisible" />
</div>
</li>
@ -74,6 +74,7 @@ import { ref, toRefs, getCurrentInstance, } from 'vue';
import EditBtn from '@/components/button/EditBtn.vue';
import $api from '@api';
import DictWrite from './DictWrite.vue';
import { formattedDate } from "@/common/formattedDate";
import { useUserInfoStore } from '@s/useUserInfoStore';
@ -98,9 +99,9 @@ const props = defineProps({
});
// 카테고리
const localCateList = ref([...props.cateList]);
// const localCateList = ref([...props.cateList]);
// 선택 카테고리
const selectedCategory = ref('');
// const selectedCategory = ref('');
// cateList emit
const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
@ -115,41 +116,41 @@ const toggleWriteVisible = () => {
};
//카테고리 등록 수정
const addCategory = (data) => {
try {
const lastCategory = localCateList.value.length > 0
? localCateList.value[localCateList.value.length - 1]
: null;
const newValue = lastCategory ? lastCategory.value + 1 : 600101;
// const addCategory = (data) => {
// try {
// const lastCategory = localCateList.value.length > 0
// ? localCateList.value[localCateList.value.length - 1]
// : null;
// const newValue = lastCategory ? lastCategory.value + 1 : 600101;
// console.log('lastCategory', lastCategory);
// console.log('newValue', newValue);
// // // console.log('lastCategory', lastCategory);
// // // console.log('newValue', newValue);
axios.post('worddict/insertCategory', {
CMNCODNAM: data
}).then(res => {
if(res.data.data === 1){
toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
const newCategory = { label: data, value: newValue };
localCateList.value = [newCategory, ...localCateList.value];
selectedCategory.value = newCategory.value;
// axios.post('worddict/insertCategory', {
// CMNCODNAM: data
// }).then(res => {
// if(res.data.data === 1){
// toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
// const newCategory = { label: data, value: newValue };
// localCateList.value = [newCategory, ...localCateList.value];
// selectedCategory.value = newCategory.value;
// console.log('newCategory', newCategory);
// console.log('localCateList.value', localCateList.value);
// console.log('selectedCategory.value', selectedCategory.value);
// // // console.log('newCategory', newCategory);
// // // console.log('localCateList.value', localCateList.value);
// // // console.log('selectedCategory.value', selectedCategory.value);
// 부모에게 전달
emit('update:cateList', localCateList.value);
} else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
toastStore.onToast(res.data.message, 'e');
}
}).catch(err => {
console.error('카테고리 추가 중 오류:', err);
});
} catch (err) {
console.error('카테고리 추가 함수 오류:', err);
}
}
// // // 부모에게 전달
// emit('update:cateList', localCateList.value);
// } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
// toastStore.onToast(res.data.message, 'e');
// }
// }).catch(err => {
// console.error('카테고리 추가 중 오류:', err);
// });
// } catch (err) {
// console.error('카테고리 추가 함수 오류:', err);
// }
// }
// 용어집 수정
@ -191,11 +192,14 @@ const editWord = (data) => {
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
// 날짜 포맷
const formatDate = (dateString) => new Date(dateString).toLocaleString();
// const formatDate = (dateString) => new Date(dateString).toLocaleString();
// 프로필 이미지
const getProfileImage = (imagePath) =>
imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
const defaultProfile = "/img/icons/icon.png";
const getProfileImage = (profilePath) => {
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
};
// 체크 상태 변경 시 부모로 전달

105
src/components/wordDict/DictWrite.vue
View File

@ -13,20 +13,27 @@
:disabled="isDisabled"
/>
</div>
<div class="col-2 btn-margin">
<PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
<div class="col-2 btn-margin" v-if="!isDisabled">
<PlusBtn @click="toggleInput"/>
</div>
</div>
<div class="row" v-if="showInput">
<div class="col-10">
<FormInput title="카테고리 입력" name="카테고리" @update:modelValue="addCategory = $event" :is-alert="addCategoryAlert"/>
<FormInput
ref="categoryInputRef"
title="카테고리 입력"
name="카테고리"
@update:modelValue="addCategory = $event"
:is-cate-alert="addCategoryAlert"
@focusout="handleCategoryFocusout(addCategory)"
/>
</div>
<div class="col-2 btn-margin">
<!-- <div class="col-2 btn-margin">
<button class="btn btn-primary btn-icon" @click="saveInput">
<i class="bx bx-check"></i>
</button>
</div>
</div> -->
</div>
</div>
<div class="dict-w">
@ -58,13 +65,13 @@ import QEditor from '@/components/editor/QEditor.vue';
import FormInput from '@/components/input/FormInput.vue';
import FormSelect from '@/components/input/FormSelect.vue';
import PlusBtn from '../button/PlusBtn.vue';
import { useUserInfoStore } from '@s/useUserInfoStore';
// import { useUserInfoStore } from '@s/useUserInfoStore';
// 유저 구분
const userStore = useUserInfoStore();
// const userStore = useUserInfoStore();
// 유저 상태에 따른 disabled
const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
// const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
const emit = defineEmits(['close','addCategory','addWord']);
@ -83,15 +90,18 @@ const addCategoryAlert = ref(false);
const selectCategory = ref('');
// 제목 상태
const computedTitle = computed(() =>
const computedTitle = computed(() =>
wordTitle.value === '' ? props.titleValue : wordTitle.value
);
// 카테고리 상태
const selectedCategory = computed(() =>
const selectedCategory = computed(() =>
selectCategory.value === '' ? props.formValue : selectCategory.value
);
// 카테고리 입력 중복 ref
const categoryInputRef = ref(null);
const props = defineProps({
dataList: {
type: Array,
@ -106,7 +116,11 @@ const props = defineProps({
titleValue : {
type:String,
},contentValue : {
type:String
type:String,
},
isDisabled: {
type: Boolean,
default: false
}
});
@ -120,17 +134,17 @@ const toggleInput = () => {
// 카테고리 저장
const saveInput = () => {
if(addCategory.value == ''){
addCategoryAlert.value = true;
return;
}else {
addCategoryAlert.value = false;
}
// console.log('입력값 저장됨!',addCategory.value);
emit('addCategory', addCategory.value);
// showInput.value = false;
};
// const saveInput = () => {
// if(addCategory.value == ''){
// addCategoryAlert.value = true;
// return;
// }else {
// addCategoryAlert.value = false;
// }
// console.log('입력값 저장됨!',addCategory.value);
// emit('addCategory', addCategory.value);
// showInput.value = false;
// };
const onChange = (newValue) => {
selectCategory.value = newValue.target.value;
@ -138,18 +152,12 @@ const onChange = (newValue) => {
//용어 등록
const saveWord = () => {
// if(addCategory.value == ''){
// addCategoryAlert.value = true;
// return;
// }else {
// addCategoryAlert.value = false;
// }
//validation
console.log('computedTitle.value', computedTitle.value);
// 용어 체크
if(computedTitle.value == '' || computedTitle.length == 0){
if(computedTitle.value == undefined){
wordTitleAlert.value = true;
return;
}
@ -166,8 +174,35 @@ const saveWord = () => {
category: selectedCategory.value,
content: content.value,
};
emit('addWord', wordData ,addCategory.value );
emit('addWord', wordData, addCategory.value);
}
// 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = (value) => {
const existingCategory = props.dataList.find(item => item.label === value);
// console.log('existingCategory', existingCategory);
if (existingCategory) {
// console.log('이미 존재하는 카테고리입니다:', value);
addCategoryAlert.value = true;
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else {
addCategoryAlert.value = false;
}
};
</script>
<style scoped>
@ -180,4 +215,4 @@ const saveWord = () => {
margin-top: 2.5rem
}
}
</style>
</style>

36
src/layouts/NormalLayout.vue
View File

@ -24,14 +24,15 @@
</div>
</template>
<script setup>
import TheTop from './TheTop.vue';
import TheFooter from './TheFooter.vue';
import TheMenu from './TheMenu.vue';
import { nextTick } from 'vue';
import { wait } from '@/common/utils';
import TheTop from './TheTop.vue';
import TheFooter from './TheFooter.vue';
import TheMenu from './TheMenu.vue';
import { nextTick } from 'vue';
import { wait } from '@/common/utils';
window.isDarkStyle = window.Helpers.isDarkStyle();
window.isDarkStyle = window.Helpers.isDarkStyle();
<<<<<<< HEAD
const loadScript = src => {
const script = document.createElement('script');
script.src = src;
@ -44,6 +45,25 @@ nextTick(async () => {
loadScript('/vendor/js/menu.js');
// loadScript('/js/main.js');
});
=======
const loadScript = src => {
const script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.async = true;
document.body.appendChild(script);
// script.onload = () => {
// console.log(`${src} loaded successfully.`);
// };
script.onerror = () => {
console.error(`Failed to load script: ${src}`);
};
};
nextTick(async () => {
await wait(200);
loadScript('/vendor/js/menu.js');
loadScript('/js/main.js');
});
>>>>>>> board-comment
</script>
<style>
</style>
<style></style>

2
src/layouts/TheTop.vue
View File

@ -152,7 +152,7 @@
<!-- User -->
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
<img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
<img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-px-40 rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>

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

@ -10,14 +10,14 @@
:boardId="currentBoardId"
:profileName="profileName"
:unknown="unknown"
:author="isAuthor"
:views="views"
:commentNum="commentNum"
:date="formattedBoardDate"
:isLike="false"
:isAuthor="isAuthor"
@editClick="editClick"
@deleteClick="deleteClick"
/>
/>
<!-- 비밀번호 입력창 (익명일 경우) -->
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
@ -74,8 +74,14 @@
:likeClicked="likeClicked"
:dislikeClicked="dislikeClicked"
@updateReaction="handleUpdateReaction"
/>
/>
</div>
<p>현재 로그인한 사용자 ID: {{ currentUserId }}</p>
<p>게시글 작성자: {{ authorId }}</p>
<p>isAuthor 값: {{ isAuthor }}</p>
<!-- <p>use이미지:{{userStore.user.img}}</p> -->
<!-- <img :src="`http://localhost:10325/upload/img/profile/${userStore.user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/> -->
<!-- 첨부파일 목록 -->
<!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
@ -88,6 +94,7 @@
<BoardCommentArea
:profileName="profileName"
:unknown="unknown"
:passwordAlert="passwordAlert"
@submitComment="handleCommentSubmit"
/>
<!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
@ -97,7 +104,7 @@
<div class="card-footer">
<BoardCommentList
:unknown="unknown"
:comments="comments"
:comments="commentsWithAuthStatus"
:isCommentPassword="isCommentPassword"
:isEditTextarea="isEditTextarea"
:passwordCommentAlert="passwordCommentAlert"
@ -130,6 +137,7 @@ import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
import Pagination from '@c/pagination/Pagination.vue';
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import axios from '@api';
// 게시물 데이터 상태
@ -148,12 +156,28 @@ const comments = ref([]);
const route = useRoute();
const router = useRouter();
const userStore = useUserInfoStore();
const currentBoardId = ref(Number(route.params.id));
<<<<<<< HEAD
const unknown = computed(() => profileName.value === '익명');
const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
const authorId = ref(null); // 작성자 id
=======
// const unknown = computed(() => profileName.value === '익명');
const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
const authorId = ref(''); // 작성자 id
>>>>>>> board-comment
const isAuthor = computed(() => currentUserId.value === authorId.value);
// const isCommentAuthor =
const commentsWithAuthStatus = computed(() => {
const updatedComments = comments.value.map(comment => ({
...comment,
isCommentAuthor: comment.authorId === currentUserId.value
}));
// console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
return updatedComments;
});
const password = ref('');
@ -187,9 +211,12 @@ const fetchBoardDetails = async () => {
const response = await axios.get(`board/${currentBoardId.value}`);
const data = response.data.data;
console.log(data)
// API 응답 데이터 반영
// const boardDetail = data.boardDetail || {};
<<<<<<< HEAD
profileName.value = data.author || '익명';
// 익명확인하고 싶을때
@ -198,6 +225,15 @@ const fetchBoardDetails = async () => {
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
authorId.value = data.author;
=======
profileName.value = data.author;
// 익명확인하고 싶을때
// profileName.value = '익명';
authorId.value = data.authorId; //게시글 작성자 id
>>>>>>> board-comment
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
date.value = data.date || '';
@ -262,7 +298,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
}
};
// 댓글 목록 조회 (대댓글 포함)
// 댓글 목록 조회
const fetchComments = async (page = 1) => {
try {
// 댓글
@ -273,11 +309,20 @@ const fetchComments = async (page = 1) => {
}
});
<<<<<<< HEAD
=======
console.log(response.data.data)
>>>>>>> board-comment
const commentsList = response.data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
boardId: comment.LOCBRDSEQ,
parentId: comment.LOCCMTPNT, // 부모 ID
author: comment.author || '익명',
<<<<<<< HEAD
=======
authorId: comment.authorId,
>>>>>>> board-comment
content: comment.LOCCMTRPY,
likeCount: comment.likeCount || 0,
dislikeCount: comment.dislikeCount || 0,
@ -286,8 +331,6 @@ const fetchComments = async (page = 1) => {
createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
children: [], // 대댓글을 담을 배열
// isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태
// isEditTextarea: false // 개별 댓글 수정 상태
}));
for (const comment of commentsList) {
@ -297,7 +340,7 @@ const fetchComments = async (page = 1) => {
params: { LOCCMTPNT: comment.commentId }
});
// console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
if (replyResponse.data.data) {
comment.children = replyResponse.data.data.map(reply => ({
@ -343,21 +386,22 @@ const fetchComments = async (page = 1) => {
console.log('댓글 목록 불러오기 오류:', error);
}
};
const isSubmitting = ref(false);
// const isSubmitting = ref(false);
// 댓글 작성
const handleCommentSubmit = async ({ comment, password }) => {
// if (unknown.value && !password) {
// passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시
// return;
// }
console.log('댓글')
//비밀번호 입력 안했을시
// if (!password) {
// passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시
// passwordAlert.value = "비밀번호를 입력해야 합니다.";
// return;
// }
// console.log('비밀번호 눌렀음')
// 중복 실행 방지
if (isSubmitting.value) return;
isSubmitting.value = true;
// if (isSubmitting.value) return;
// isSubmitting.value = true;
try {
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
@ -368,7 +412,7 @@ const handleCommentSubmit = async ({ comment, password }) => {
});
if (response.status === 200) {
// console.log('댓글 작성 성공:', response.data.message);
console.log('댓글 작성 성공:', response.data.message);
await fetchComments();
} else {
console.log('댓글 작성 실패:', response.data.message);
@ -439,19 +483,28 @@ const deleteClick = (unknown) => {
}
};
// 댓글 수정 버튼 클릭(대댓글 포함)
// 댓글 수정 버튼 클릭
const editComment = (comment) => {
if (comment.isEditTextarea) {
// 이미 수정창이 열려 있으면 닫기
comment.isEditTextarea = false;
const targetComment = comments.value.find(c => c.commentId === comment.commentId);
if (!targetComment) {
return;
}
// 수정 text창 열림, 닫힘 유무
if (targetComment.isEditTextarea) {
targetComment.isEditTextarea = false;
} else {
targetComment.isEditTextarea = true;
}
// 익명일때
if (unknown.value) {
toggleCommentPassword(comment, "edit");
} else {
comment.isEditTextarea = true;
}
<<<<<<< HEAD
// comments.value.forEach(c => {
// c.isEditTextarea = false;
@ -463,10 +516,13 @@ const editComment = (comment) => {
// } else {
// comment.isEditTextarea = true;
// }
=======
>>>>>>> board-comment
}
// 댓글 삭제 버튼 클릭(대댓글 포함)
const deleteComment = (comment) => {
// 댓글 삭제 버튼 클릭
const deleteComment = async (comment) => {
// 익명 사용자인 경우
if (unknown.value) {
if (comment.isEditTextarea) {
// 현재 수정 중이라면 수정 모드를 끄고, 삭제 비밀번호 입력창을 띄움
@ -477,8 +533,8 @@ const deleteComment = (comment) => {
toggleCommentPassword(comment, "delete");
}
} else {
// 로그인 사용자 바로 삭제
comments.value = comments.value.filter(c => c.commentId !== comment.commentId);
// 로그인 사용자인 경우 (바로 삭제)
deleteReplyComment(comment)
}
};
@ -531,7 +587,7 @@ const submitPassword = async () => {
}
lastClickedButton.value = null;
} else {
passwordAlert.value = "비밀번호가 일치하지 않습니다.????";
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
}
} catch (error) {
// console.log("📌 전체 오류:", error);
@ -552,6 +608,7 @@ const submitPassword = async () => {
// 댓글 삭제 (비밀번호 확인 후)
const submitCommentPassword = async (comment, password) => {
if (!password) {
passwordCommentAlert.value = "비밀번호를 입력해주세요.";
return;
@ -564,12 +621,19 @@ const submitCommentPassword = async (comment, password) => {
});
if (response.data.code === 200 && response.data.data === true) {
passwordCommentAlert.value = "";
comment.isCommentPassword = false;
if (lastCommentClickedButton.value === "edit") {
comment.isEditTextarea = true;
<<<<<<< HEAD
=======
passwordCommentAlert.value = "";
>>>>>>> board-comment
// handleSubmitEdit(comment, comment.content);
} else if (lastCommentClickedButton.value === "delete") {
passwordCommentAlert.value = "";
deleteReplyComment(comment)
}
@ -631,7 +695,7 @@ const deleteReplyComment = async (comment) => {
}
};
// 댓글 수정 확인 (대댓글 포함)
// 댓글 수정 확인
const handleSubmitEdit = async (comment, editedContent) => {
try {
const response = await axios.put(`board/comment/${comment.commentId}`, {
@ -640,8 +704,19 @@ const handleSubmitEdit = async (comment, editedContent) => {
});
// 수정 성공 시 업데이트
<<<<<<< HEAD
comment.content = editedContent;
comment.isEditTextarea = false;
=======
// comment.content = editedContent;
// comment.isEditTextarea = false;
if (response.status === 200) {
// 댓글 목록 새로고침
await fetchComments();
} else {
console.log("❌ 댓글 수정 실패:", response.data);
}
>>>>>>> board-comment
} catch (error) {
console.error("댓글 수정 중 오류 발생:", error);
}
@ -650,7 +725,16 @@ const handleSubmitEdit = async (comment, editedContent) => {
// 댓글 수정 취소 (대댓글 포함)
const handleCancelEdit = (comment) => {
console.log("BoardView.vue - 댓글 수정 취소:", comment);
comment.isEditTextarea = false;
// 원본 comments 배열에서 동일한 comment 찾기
const targetComment = comments.value.find(c => c.commentId === comment.commentId);
if (targetComment) {
console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능");
targetComment.isEditTextarea = false;
} else {
console.error("❌ 원본 데이터 찾을 수 없음, 수정 취소 실패");
}
};
// 페이지 변경

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

@ -5,12 +5,16 @@
<!-- Sidebar: 사이드바 영역 -->
<div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
<div class="sidebar-content">
<!-- 사원 프로필 리스트 -->
<div class="sidebar-actions text-center my-3">
<HalfDayButtons
@toggleHalfDay="toggleHalfDay"
@addVacationRequests="saveVacationChanges"
/>
</div>
<ProfileList
@profileClick="handleProfileClick"
:remainingVacationData="remainingVacationData"
/>
<!-- 모달들은 화면 오버레이로 동작하므로 사이드바 내부에 두어도 무방 -->
<VacationModal
v-if="isModalOpen"
:isOpen="isModalOpen"
@ -28,24 +32,23 @@
@updateVacation="fetchRemainingVacation"
/>
</div>
<div class="sidebar-actions text-center my-3">
<!-- 액션 버튼 -->
<HalfDayButtons
@toggleHalfDay="toggleHalfDay"
@addVacationRequests="saveVacationChanges"
/>
</div>
</div>
<!-- Main Content: 캘린더 영역 -->
<div class="col app-calendar-content">
<div class="card shadow-none border-0">
<div class="card-body pb-0">
<div class="card-body pb-0" style="position: relative;">
<full-calendar
ref="fullCalendarRef"
:options="calendarOptions"
class="flatpickr-calendar-only"
/>
<!-- 숨겨진 데이트피커 인풋 -->
<input
ref="calendarDatepicker"
type="text"
style="display: none; position: absolute;"
/>
</div>
</div>
</div>
@ -60,7 +63,12 @@
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
// Flatpickr 및 MonthSelect 플러그인 임포트
import flatpickr from "flatpickr";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
import "flatpickr/dist/flatpickr.min.css";
import "flatpickr/dist/plugins/monthSelect/style.css";
import "@/assets/css/app-calendar.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
@ -75,11 +83,11 @@
const userListStore = useUserStore();
const userList = ref([]);
const userColors = ref({});
const myVacations = ref([]); // 전체 "사용한 연차" 목록 (로그인한 사원의 휴가만)
const receivedVacations = ref([]); // 전체 "받은 연차" 목록
const myVacations = ref([]); // 로그인한 사원의 휴가
const receivedVacations = ref([]);
const isModalOpen = ref(false);
const remainingVacationData = ref({});
const modalYear = ref(new Date().getFullYear());
const lastRemainingYear = ref(new Date().getFullYear());
const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
const isGrantModalOpen = ref(false);
@ -94,8 +102,9 @@
const holidayDates = ref(new Set());
const fetchedEvents = ref([]);
// 추가: 토글 상태 변수 (필요 시 사용 가능)
const toggledDates = ref(new Set());
// 데이트피커 인풋 ref
const calendarDatepicker = ref(null);
let fpInstance = null;
const calendarOptions = reactive({
plugins: [dayGridPlugin, interactionPlugin],
@ -115,9 +124,42 @@
onMounted(async () => {
await userStore.userInfo();
await fetchRemainingVacation();
// 초기 vacation history도 가져오기
const currentYear = new Date().getFullYear();
await fetchVacationHistory(currentYear);
// Flatpickr 초기화 (달 선택 모드)
fpInstance = flatpickr(calendarDatepicker.value, {
dateFormat: "Y-m",
plugins: [
new monthSelectPlugin({
shorthand: true,
dateFormat: "Y-m",
altFormat: "F Y"
})
],
onChange: function(selectedDatesArr, dateStr) {
// 선택한 달의 첫날로 달력을 이동
fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
const [year, month] = dateStr.split("-");
lastRemainingYear.value = parseInt(year, 10);
lastRemainingMonth.value = month;
loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
},
onClose: function() {
calendarDatepicker.value.style.display = "none";
}
});
// FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
nextTick(() => {
const titleEl = document.querySelector('.fc-toolbar-title');
if (titleEl) {
titleEl.style.cursor = 'pointer';
titleEl.addEventListener('click', () => {
fpInstance.open();
});
}
});
});
// 연차 내역 API (초기 호출용)
@ -137,7 +179,6 @@
}
}
// lastRemainingYear 값이 변경될 때마다 해당 연도의 연차 내역 재조회
watch(lastRemainingYear, async (newYear, oldYear) => {
await fetchVacationHistory(newYear);
});
@ -156,27 +197,18 @@
}
};
// 프로필 클릭 시 연차 내역 가져오기
const handleProfileClick = async (user) => {
try {
if (isModalOpen.value) {
isModalOpen.value = false;
return;
}
if (isGrantModalOpen.value) {
isGrantModalOpen.value = false;
return;
}
// 열린 모달이 있으면 모두 닫음 후 새 모달 열기
isModalOpen.value = false;
isGrantModalOpen.value = false;
if (user.MEMBERSEQ === userStore.user.id) {
const year = new Date().getFullYear();
await fetchVacationHistory(year);
const displayedYear = lastRemainingYear.value;
await fetchVacationHistory(displayedYear);
isModalOpen.value = true;
lastRemainingYear.value = year;
isGrantModalOpen.value = false;
} else {
selectedUser.value = user;
isGrantModalOpen.value = true;
isModalOpen.value = false;
}
} catch (error) {
console.error("🚨 연차 데이터 불러오기 실패:", error);
@ -220,29 +252,23 @@
return vacationCodeMap.value[typeCode] || "기타";
};
// computed: lastRemainingYear과 일치하는 항목만 필터링
const filteredMyVacations = computed(() => {
const filtered = myVacations.value.filter(vac => {
const dateStr = vac.date || vac.LOCVACUDT;
return myVacations.value.filter(vac => {
const dateStr = vac.date;
const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
return year === String(lastRemainingYear.value);
});
console.log("filteredMyVacations:", filtered);
return filtered;
});
const filteredReceivedVacations = computed(() => {
return receivedVacations.value.filter(vac => {
const dateStr = vac.date || vac.LOCVACUDT;
const dateStr = vac.date;
const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
return dateStr && year === String(lastRemainingYear.value);
});
});
function updateCalendarEvents() {
// selectedDates에서 "delete"가 아닌 경우에 대해 이벤트 생성
const selectedEvents = Array.from(selectedDates.value)
.filter(([date, type]) => type !== "delete")
.map(([date, type]) => ({
@ -254,8 +280,6 @@
classNames: [getVacationTypeClass(type), "selected-event"]
}));
// fetchedEvents에서, 만약 해당 날짜가 "delete" 상태라면
// 로그인한 사용자의(내) 이벤트만 제거하고, 다른 사용자의 이벤트는 그대로 둠.
const filteredFetchedEvents = fetchedEvents.value.filter(event => {
if (event.saved && selectedDates.value.get(event.start) === "delete") {
if (event.memberSeq === userStore.user.id) {
@ -287,15 +311,12 @@
) {
return;
}
// 내 휴가 여부: LOCVACUDT의 앞 10자가 clickedDateStr과 같고, LOCVACRMM가 없거나 빈 문자열인 경우
const isMyVacation = myVacations.value.some(vac => {
const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
return vacDate === clickedDateStr &&
(!vac.LOCVACRMM || String(vac.LOCVACRMM).trim() === "");
return vacDate === clickedDateStr && !vac.receiverId;
});
if (isMyVacation) {
// 내 휴가인 경우: selectedDates에 "delete" 상태를 토글 (내 이벤트만 영향을 줌)
if (selectedDates.value.get(clickedDateStr) === "delete") {
selectedDates.value.delete(clickedDateStr);
} else {
@ -305,9 +326,7 @@
return;
}
// 내 휴가가 없는 날짜: 일반 선택/토글 처리
if (selectedDates.value.has(clickedDateStr)) {
console.log("일반 날짜 토글 off: 기존 선택 해제");
selectedDates.value.delete(clickedDateStr);
updateCalendarEvents();
return;
@ -315,7 +334,6 @@
const type = halfDayType.value
? (halfDayType.value === "AM" ? "700101" : "700102")
: "700103";
console.log("일반 날짜 토글 on: 선택 및 타입", type);
selectedDates.value.set(clickedDateStr, type);
halfDayType.value = null;
updateCalendarEvents();
@ -331,7 +349,6 @@
if (response.status === 200) {
const vacationList = response.data;
if (lastRemainingYear.value !== year) {
// 로그인한 사원의 휴가만 저장
myVacations.value = vacationList.filter(
(vac) => vac.MEMBERSEQ === userStore.user.id
);
@ -348,7 +365,7 @@
backgroundColor,
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
saved: true,
memberSeq: vac.MEMBERSEQ, // 이벤트 소유자 정보
memberSeq: vac.MEMBERSEQ,
};
})
.filter((event) => event.start);
@ -368,18 +385,18 @@
const vacationsToAdd = selectedDatesArray
.filter(([date, type]) => type !== "delete")
.filter(([date, type]) =>
!myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date)) ||
myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
!myVacations.value.some(vac => vac.date && vac.date.startsWith(date)) ||
myVacations.value.some(vac => vac.date && vac.date.startsWith(date) && vac.receiverId)
)
.map(([date, type]) => ({ date, type }));
const vacationsToDelete = myVacations.value
.filter(vac => {
if (!vac.LOCVACUDT) return false;
const date = vac.LOCVACUDT.split("T")[0];
return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
if (!vac.date) return false;
const date = vac.date.split("T")[0];
return selectedDates.value.get(date) === "delete" && !vac.receiverId;
})
.map(vac => {
const id = vac.LOCVACSEQ;
const id = vac.id;
return typeof id === "number" ? Number(id) : id;
});
try {
@ -390,6 +407,9 @@
if (response.data && response.data.status === "OK") {
alert("✅ 휴가 변경 사항이 저장되었습니다.");
await fetchRemainingVacation();
if (isModalOpen.value) {
await fetchVacationHistory(lastRemainingYear.value);
}
const currentDate = fullCalendarRef.value.getApi().getDate();
await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
selectedDates.value.clear();
@ -440,5 +460,10 @@
</script>
<style>
/* 스타일 정의 */
/* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
.fc-toolbar-title {
cursor: pointer;
}
/* 데이트피커 인풋은 Flatpickr에서 동적으로 스타일 적용됨 */
</style>

71
src/views/wordDict/wordDict.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- {{ userStore.user.role == 'ROLE_ADMIN' ? '관리자' : '일반인'}} -->
<div class="card p-5">
<!-- 타이틀, 검색 -->
<div class="row">
@ -30,7 +29,7 @@
<!-- 작성 -->
<div v-if="isWriteVisible" class="mt-5">
<DictWrite @close="isWriteVisible = false" :dataList="cateList" @addCategory="addCategory" @addWord="addWord"/>
<DictWrite @close="isWriteVisible = false" :dataList="cateList" @addWord="addWord"/>
</div>
</div>
@ -174,30 +173,34 @@
};
//카테고리 등록
const addCategory = (data) =>{
const lastCategory = cateList.value[cateList.value.length - 1];
const newValue = lastCategory ? lastCategory.value + 1 : 600101;
const newCategory = { label: data, value: newValue };
cateList.value = [newCategory, ...cateList.value];
selectedCategory.value = newCategory.value;
// axios.post('worddict/insertCategory',{
// CMNCODNAM: data
// }).then(res => {
// if(res.data.data == '1'){
// toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
// const newCategory = { label: data, value: newValue };
// const addCategory = (data) =>{
// const lastCategory = cateList.value[cateList.value.length - 1];
// const newValue = lastCategory ? lastCategory.value + 1 : 600101;
// const newCategory = { label: data, value: newValue };
// cateList.value = [newCategory, ...cateList.value];
// selectedCategory.value = newCategory.value;
// } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
// toastStore.onToast(res.data.message, 'e');
// }
// })
}
//// axios.post('worddict/insertCategory',{
//// CMNCODNAM: data
//// }).then(res => {
//// if(res.data.data == '1'){
//// toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
//// const newCategory = { label: data, value: newValue };
//// cateList.value = [newCategory, ...cateList.value];
//// selectedCategory.value = newCategory.value;
//// } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
//// toastStore.onToast(res.data.message, 'e');
//// }
//// })
// }
// 용어집 등록
const addWord = (wordData, data) => {
let category = null;
// 카테고리 체크
const existingCategory = cateList.value.find(item => item.label === data);
if (existingCategory) {
console.log('카테고리 중복');
//카테고리 있을시 그냥 저장
category = existingCategory.label == '' ? wordData.category : existingCategory.value;
} else {
@ -208,6 +211,7 @@
}
sendWordRequest(category, wordData, data, !existingCategory);
};
const sendWordRequest = (category, wordData, data, isNewCategory) => {
const payload = {
WRDDICCAT: category,
@ -216,17 +220,26 @@
};
if (isNewCategory) {
payload.CMNCODNAM = data; // 새로운 카테고리 추가 시 포함
payload.CMNCODNAM = data;
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
isWriteVisible.value = false;
getwordList();
const newCategory = { label: data, value: category }; // 여기서 data 사용
cateList.value = [newCategory, ...cateList.value];
}
});
} else {
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
isWriteVisible.value = false;
getwordList();
}
});
}
axios.post('worddict/insertWord', payload).then(res => {
if (res.data.status === 'OK') {
toastStore.onToast('용어가 등록 되었습니다.', 's');
isWriteVisible.value = false;
getwordList();
//카테고리 리스트 다시 조회 해야야함
}
});
};
};
// 체크 상태 업데이트