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

Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

Browse Source
This commit is contained in:
khj0414 2025-03-07 12:16:04 +09:00
commit 02b3c8dd41
9 changed files with 1094 additions and 990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
public/css/custom.css
View File

@ -3,7 +3,6 @@
/* 휴가 */
/* 이벤트 선 없게 */
.fc-event {
border: none;
@ -94,8 +93,72 @@ opacity: 0.6; /* 흐려 보이게 */
}
/* 본인 모달 */
/* 닫기 버튼 */
/* 휴가 모달 */
.vac-modal-dialog {
background: none !important;
box-shadow: none !important;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 100%;
padding-bottom: 20px;
}
.vac-modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
max-width: 500px;
width: 100%;
position: relative;
}
.vac-modal-body {
max-height: 140px;
overflow-y: auto;
}
.vac-modal-text {
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
.count-container {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 10px;
}
.count-value {
font-size: 23px;
font-weight: bold;
min-width: 50px;
text-align: center;
}
.custom-button {
background: none;
border: none;
width: 55px;
height: 55px;
font-size: 26px;
color: white;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
}
.vac-modal-title {
margin-bottom: 10px;
}
.vacation-item {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
padding: 5px 10px;
border-radius: 5px;
background: #f9f9f9;
}
.close-btn {
position: absolute;
top: 10px;
@ -108,42 +171,6 @@ opacity: 0.6; /* 흐려 보이게 */
.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;
align-items: center;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
padding: 5px 10px;
border-radius: 5px;
background: #f9f9f9;
}
/* 선물하기 모달 */
/* 연차 개수 버튼 */
.count-btn {
font-size: 18px;
padding: 2px 10px;
@ -160,29 +187,179 @@ opacity: 0.6; /* 흐려 보이게 */
background: #cccccc;
cursor: not-allowed;
}
/* 버튼 컨테이너 (우측 정렬) */
.custom-button-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* 버튼 기본 스타일 */
.custom-button {
background: none; /* 배경색 없음 */
border: none; /* 테두리 없음 */
padding: 10px; /* 크기 조정 */
cursor: pointer; /* 클릭 가능하도록 변경 */
background: none;
border: none;
padding: 10px;
cursor: pointer;
}
/* 아이콘 색상 변경 (기본) */
.custom-button i {
color: #282538; /* 기본 아이콘 색상 */
font-size: 25px; /* 아이콘 크기 */
color: #282538;
font-size: 25px;
}
/* 버튼 호버 효과 */
.custom-button:hover i {
color: #ff0800; /* 호버 시 아이콘 색상 변경 */
color: #ff0800;
}
/* 휴가 사원프로필 */
.profile-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 0;
}
.profile-img {
transition: all 0.2s ease-in-out;
}
/* 오전/오후반차,저장버튼 */
/* 버튼 기본 스타일 */
.vac-btn {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
display: inline-block;
font-weight: 400;
line-height: 1.53;
color: #697a8d;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
}
/* 마우스를 올렸을 때 */
.vac-btn:hover {
filter: brightness(90%);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
/* 버튼이 눌렸을 때 */
.vac-btn:active {
transform: scale(0.9);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
/* 선택된 (눌린) 버튼 */
.vac-btn.active {
border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
.vac-btn-warning{
color: #fff;
background-color: #ffab00;
border-color: #ffab00;
box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 171, 0, 0.4);
}
/* AM 버튼 (선택된 상태) */
.vac-btn-warning.active {
background-color: #ffca2c !important;
color: black;
}
.vac-btn-info {
color: #fff;
background-color: #03c3ec;
border-color: #03c3ec;
box-shadow: 0 0.125rem 0.25rem 0 rgba(3, 195, 236, 0.4);
}
/* PM 버튼 (선택된 상태) */
.vac-btn-info.active {
background-color: #0b5ed7 !important;
color: white;
}
/* 버튼 기본 (비활성화일 때 기본 녹색) */
.btn-success {
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
background-color: #871919 !important;
color: white;
cursor: pointer;
border: 1px solid transparent;
}
/* 버튼 활성화 */
.btn-success.active {
background-color: #ff0000 !important;
color: white !important;
border: 3px solid #eb9f9f !important;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
/* 버튼 비활성화 */
.btn-success.disabled {
background-color: #bbb8b8 !important;
color: white !important;
cursor: not-allowed !important;
box-shadow: none;
transform: none;
opacity: 0.5;
}
/* 작은 화면에서 버튼 크기 조정 */
@media (max-width: 1600px) {
.count-btn {
width: 28px;
height: 28px;
font-size: 15px;
}
.count-container {
display: flex;
align-items: center;
justify-content: center;
gap: 0px;
margin-bottom: 8px;
}
.count-value {
font-size: 20px;
}
.custom-button {
width: 45px;
height: 45px;
font-size: 22px;
}
.vac-grant-modal-title {
font-size: 16px;
}
.vac-modal-text {
font-size: 11px;
}
.vac-modal-title {
font-size: 14px;
margin-bottom: 10px;
}
.vacation-item {
font-size: 12px;
text-align: center;
margin-bottom: 5px;
}
.vac-btn {
width: 40px;
height: 40px;
font-size: 18px;
}
.btn-success {
font-size: 20px;
width: 40px;
height: 40px;
}
}
.grayscaleImg {
filter: grayscale(100%);
@ -222,6 +399,9 @@ opacity: 0.6; /* 흐려 보이게 */
right: 1rem;
z-index: 2;
background-color: #fff !important;
border-radius: 0.5rem;
opacity: 1;
padding: 0.635rem;
box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
transition: all 0.23s ease 0.1s;
transform: translate(23px, -25px);
@ -233,7 +413,4 @@ opacity: 0.6; /* 흐려 보이게 */
transform: translate(20px, -20px);
}
.end-project {
background-color: #ddd !important;
}
/* project list end */

140
src/components/button/HalfDayButtons.vue
View File

@ -1,30 +1,28 @@
<template>
<div class="menu gap-4 justify-content-center mt-5">
<!-- 오전 반차 버튼 -->
<button
class="btn btn-warning"
:class="{ active: halfDayType === 'AM' }"
@click="toggleHalfDay('AM')"
>
<!-- 오전 반차 버튼 -->
<button
class="vac-btn vac-btn-warning"
:class="{ active: halfDayType === 'AM' }"
@click="toggleHalfDay('AM')"
>
<i class="bi bi-sun"></i>
</button>
<!-- 오후 반차 버튼 -->
<button
class="btn btn-info"
:class="{ active: halfDayType === 'PM' }"
@click="toggleHalfDay('PM')"
>
<i class="bi bi-moon"></i>
</button>
<!-- 저장 버튼 -->
<div class="save-button-container">
<button class="btn btn-success" @click="addVacationRequests"
:class="{ active: !isDisabled, disabled: isDisabled }">
✔
</button>
</div>
<!-- 오후 반차 버튼 -->
<button
class="vac-btn vac-btn-info"
:class="{ active: halfDayType === 'PM' }"
@click="toggleHalfDay('PM')"
>
<i class="bi bi-moon"></i>
</button>
<!-- 저장 버튼 -->
<div class="save-button-container">
<button class="btn-success" @click="addVacationRequests"
:class="{ active: !isDisabled, disabled: isDisabled }">
✔
</button>
</div>
</div>
</template>
@ -32,113 +30,37 @@
import { defineEmits, ref, defineProps, watch } from "vue";
const props = defineProps({
isDisabled: Boolean,
selectedDate: String // 날짜 선택 값을 props로 받음
isDisabled: Boolean,
selectedDate: String // 날짜 선택 값을 props로 받음
});
const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
const halfDayType = ref(null);
const toggleHalfDay = (type) => {
halfDayType.value = halfDayType.value === type ? null : type;
emit("toggleHalfDay", halfDayType.value);
halfDayType.value = halfDayType.value === type ? null : type;
emit("toggleHalfDay", halfDayType.value);
};
// `selectedDate`가 변경되면 반차 선택 초기화
watch(() => props.selectedDate, (newDate) => {
if (newDate) {
resetHalfDay();
}
if (newDate) {
resetHalfDay();
}
});
// 날짜 선택 후 반차 버튼 상태 초기화
const resetHalfDay = () => {
halfDayType.value = null;
emit("resetHalfDay");
halfDayType.value = null;
emit("resetHalfDay");
};
const addVacationRequests = () => {
emit("addVacationRequests");
emit("addVacationRequests");
};
defineExpose({ resetHalfDay });
</script>
<style scoped>
/* 버튼 기본 스타일 */
.btn {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
/* 마우스를 올렸을 때 */
.btn:hover {
filter: brightness(90%);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
/* 버튼이 눌렸을 때 */
.btn:active {
transform: scale(0.9);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
/* 선택된 (눌린) 버튼 */
.btn.active {
border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
/* AM 버튼 (선택된 상태) */
.btn-warning.active {
background-color: #ffca2c !important;
color: black;
}
/* PM 버튼 (선택된 상태) */
.btn-info.active {
background-color: #0b5ed7 !important;
color: white;
}
/* ✔ 버튼 기본 (비활성화일 때 기본 녹색) */
.btn-success {
font-size: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
background-color: #871919 !important;
color: white;
}
/* ✔ 버튼 활성화 */
.btn-success.active {
background-color: #ff0000 !important;
color: white !important;
border: 3px solid #eb9f9f !important;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
/* ✔ 버튼 비활성화 */
.btn-success.disabled {
background-color: #bbb8b8 !important;
color: white !important;
cursor: not-allowed !important;
box-shadow: none;
transform: none;
opacity: 0.5;
}
</style>

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

@ -1,129 +1,117 @@
<template>
<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>
<div class="vac-modal-content">
<div class="vac-modal-header">
<h5 class="vac-grant-modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
<button class="close-btn" @click="closeModal">✖</button>
</div>
<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 class="vac-modal-body">
<p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
<div class="count-container">
<button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
<span class="count-value">{{ 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>
<button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
<i class="bx bx-gift"></i>
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
import axios from "@api";
import { useToastStore } from '@s/toastStore';
<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
import axios from "@api";
import { useToastStore } from '@s/toastStore';
const toastStore = useToastStore();
const props = defineProps({
const toastStore = useToastStore();
const props = defineProps({
isOpen: Boolean,
targetUser: Object,
});
});
const emit = defineEmits(["close", "updateVacation"]);
const grantCount = ref(0);
const maxQuota = 2;
const sentCount = ref(0);
const availableQuota = ref(2);
const emit = defineEmits(["close", "updateVacation"]);
const grantCount = ref(0);
const maxQuota = 2;
const sentCount = ref(0);
const availableQuota = ref(2);
const fetchSentVacationCount = async () => {
// 사원 별 남은 보내기 개수
const fetchSentVacationCount = async () => {
try {
const payload = { receiverId: props.targetUser.MEMBERSEQ };
const response = await axios.get("vacation/sent", { params: payload });
sentCount.value = response.data.data[0].count || 0;
availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
grantCount.value = availableQuota.value; // ✅ 남은 개수로 기본값 설정
const payload = { receiverId: props.targetUser.MEMBERSEQ };
const response = await axios.get("vacation/sent", { params: payload });
sentCount.value = response.data.data[0]?.count || 0;
availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
grantCount.value = availableQuota.value;
} catch (error) {
console.error("🚨 연차 전송 기록 조회 실패:", error);
availableQuota.value = maxQuota;
grantCount.value = maxQuota; // 기본값 설정
console.error("🚨 연차 전송 기록 조회 실패:", error);
availableQuota.value = maxQuota;
grantCount.value = maxQuota;
}
};
};
const increaseCount = () => {
// 개수 증가
const increaseCount = () => {
if (grantCount.value < availableQuota.value) {
grantCount.value++;
grantCount.value++;
}
};
const decreaseCount = () => {
};
// 개수 감소
const decreaseCount = () => {
if (grantCount.value > 0) {
grantCount.value--;
grantCount.value--;
}
};
};
const saveVacationGrant = async () => {
// 연차 선물하기
const saveVacationGrant = async () => {
try {
const payload = [
{
date: new Date().toISOString().split("T")[0],
type: "700103",
receiverId: props.targetUser.MEMBERSEQ,
count: grantCount.value,
},
];
const response = await axios.post("vacation", payload);
if (response.data && response.data.status === "OK") {
toastStore.onToast('연차가 선물되었습니다.', 's');
await fetchSentVacationCount();
emit("updateVacation");
closeModal();
} else {
toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
}
const payload = [{
date: new Date().toISOString().split("T")[0],
type: "700103",
receiverId: props.targetUser.MEMBERSEQ,
count: grantCount.value,
}];
const response = await axios.post("vacation", payload);
if (response.data?.status === "OK") {
toastStore.onToast('연차가 선물되었습니다.', 's');
await fetchSentVacationCount();
emit("updateVacation");
closeModal();
} else {
toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
}
} catch (error) {
console.error("🚨 연차 추가 실패:", error);
toastStore.onToast(' 연차 선물 실패!!.', 'e');
toastStore.onToast(' 연차 선물 실패!!.', 'e');
}
};
};
const closeModal = () => {
// 모달 닫기기
const closeModal = () => {
emit("close");
};
};
watch(
() => props.isOpen,
async (newVal) => {
if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
watch(() => props.isOpen, async (newVal) => {
if (newVal && props.targetUser?.MEMBERSEQ) {
await fetchSentVacationCount();
}
}
);
watch(
() => props.targetUser,
async (newUser) => {
if (newUser && newUser.MEMBERSEQ) {
});
watch(() => props.targetUser, async (newUser) => {
if (newUser?.MEMBERSEQ) {
await fetchSentVacationCount();
}
},
{ deep: true }
);
onMounted(async () => {
if (props.isOpen && props.targetUser && props.targetUser.MEMBERSEQ) {
await fetchSentVacationCount();
}
});
</script>
}, { deep: true });
onMounted(async () => {
if (props.isOpen && props.targetUser?.MEMBERSEQ) {
await fetchSentVacationCount();
}
});
</script>
<style scoped>
</style>

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

@ -1,141 +1,122 @@
<template>
<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>
<!-- 연차 목록 -->
<div class="modal-body" v-if="mergedVacations.length > 0">
<ol class="list-group-numbered px-0 mt-4">
<li
v-for="(vac, index) in mergedVacations"
:key="vac._expandIndex"
class="vacation-item"
>
<!-- Used 항목만 인덱스 표시 -->
<span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
{{ usedVacationIndexMap[vac._expandIndex] }})
</span>
<span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
{{ vac.category === 'used' ? '-' : '+' }}
</span>
<span
:style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
>
{{ formatDate(vac.date) }}
</span>
</li>
</ol>
<div class="vac-modal-content p-5 modal-scroll">
<h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
<button class="close-btn" @click="closeModal">✖</button>
<!-- 연차 목록 -->
<div class="vac-modal-body" v-if="mergedVacations.length > 0">
<ol class="list-group-numbered px-0 mt-4">
<li
v-for="(vac, index) in mergedVacations"
:key="vac._expandIndex"
class="vacation-item"
>
<span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
{{ usedVacationIndexMap[vac._expandIndex] }})
</span>
<span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
{{ vac.category === 'used' ? '-' : '+' }}
</span>
<span
:style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
>
{{ formatDate(vac.date) }}
</span>
</li>
</ol>
</div>
<!-- 연차 데이터 없음 -->
<p v-else class="text-sm-center mt-10 text-gray">
🚫 사용한 연차가 없습니다.
</p>
</div>
<!-- 연차 데이터 없음 -->
<p v-else class="text-sm-center mt-10 text-gray">
🚫 사용한 연차가 없습니다.
</p>
</div>
</div>
</template>
</template>
<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { formatDate } from '@/common/formattedDate.js';
const props = defineProps({
isOpen: Boolean,
myVacations: {
type: Array,
default: () => [],
},
receivedVacations: {
type: Array,
default: () => [],
},
userColors: {
type: Object,
default: () => ({}),
},
isOpen: Boolean,
myVacations: {
type: Array,
default: () => [],
},
receivedVacations: {
type: Array,
default: () => [],
},
userColors: {
type: Object,
default: () => ({}),
},
});
const emit = defineEmits(["close"]);
/**
* 1) Used 휴가를 used_quota만큼 펼치기
* - category: "used"
* - code: 휴가 코드(예: LOCVACTYP)
* - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
*/
let globalCounter = 0; // 확장 시 사용할 전역 카운터
// 사용한 휴가(선물,연차사용)
let globalCounter = 0;
const usedVacations = computed(() => {
const result = [];
props.myVacations.forEach((v) => {
const count = v.used_quota || 1;
for (let i = 0; i < count; i++) {
result.push({
...v,
category: "used",
code: v.LOCVACTYP, // 휴가 코드 (700103 등)
_expandIndex: globalCounter++,
});
}
});
return result;
const result = [];
props.myVacations.forEach((v) => {
const count = v.used_quota || 1;
for (let i = 0; i < count; i++) {
result.push({
...v,
category: "used",
code: v.LOCVACTYP,
_expandIndex: globalCounter++,
});
}
});
return result;
});
/**
* 2) Received 휴가: category: "received"
*/
// 받은 휴가
const receivedVacations = computed(() =>
props.receivedVacations.map((v) => ({
...v,
category: "received",
}))
props.receivedVacations.map((v) => ({
...v,
category: "received",
}))
);
/**
* 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
* - type === "700103"이면 +1
* - 그 외이면 +0.5
*/
// 필터링
const sortedUsedVacationsAsc = computed(() => {
return [...usedVacations.value].sort((a, b) => {
return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
});
return [...usedVacations.value].sort((a, b) => {
return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
});
});
// 누적 인덱스 계산 type === "700103"이면 +1 그 외이면 +0.5
const usedVacationIndexMap = computed(() => {
let cumulative = 0;
const map = {};
sortedUsedVacationsAsc.value.forEach((item) => {
const increment = item.type === "700103" ? 1 : 0.5;
cumulative += increment;
map[item._expandIndex] = cumulative;
});
return map;
let cumulative = 0;
const map = {};
sortedUsedVacationsAsc.value.forEach((item) => {
const increment = item.type === "700103" ? 1 : 0.5;
cumulative += increment;
map[item._expandIndex] = cumulative;
});
return map;
});
/**
* 4) 최종 표시할 merged 리스트 (Used + Received)
* - 날짜 내림차순 정렬 (최신 → 과거)
*/
// 최종 표시할 merged 리스트 (Used + Received) 날짜 내림차순 정렬 (최신 → 과거)
const mergedVacations = computed(() => {
const all = [...usedVacations.value, ...receivedVacations.value];
// 날짜 내림차순 + 확장 인덱스 내림차순
all.sort((a, b) => {
const dateDiff = new Date(b.date) - new Date(a.date);
if (dateDiff !== 0) return dateDiff;
return b._expandIndex - a._expandIndex;
});
return all;
const all = [...usedVacations.value, ...receivedVacations.value];
// 날짜 내림차순 + 확장 인덱스 내림차순
all.sort((a, b) => {
const dateDiff = new Date(b.date) - new Date(a.date);
if (dateDiff !== 0) return dateDiff;
return b._expandIndex - a._expandIndex;
});
return all;
});
/** 모달 닫기 */
// 모달 닫기
const closeModal = () => {
emit("close");
};
</script>
<style scoped>
</style>
<style scoped>
</style>

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

@ -1,136 +1,115 @@
<template>
<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"
:key="index"
:class="{ disabled: user.disabled }"
@click="$emit('profileClick', user)"
data-bs-placement="top"
:aria-label="user.MEMBERSEQ"
>
<img
class="rounded-circle"
:src="getUserProfileImage(user.MEMBERPRF)"
alt="user"
:style="getDynamicStyle(user)"
@error="setDefaultImage"
@load="showImage"
/>
<span class="remaining-vacation">
{{ remainingVacationData[user.MEMBERSEQ] || 0 }}
</span>
</li>
</ul>
<ul class="list-unstyled profile-list">
<li
v-for="(user, index) in sortedUserList"
:key="index"
:class="{ disabled: user.disabled }"
@click="$emit('profileClick', user)"
data-bs-placement="top"
:aria-label="user.MEMBERSEQ"
>
<img
class="rounded-circle profile-img"
:src="getUserProfileImage(user.MEMBERPRF)"
alt="user"
:style="getDynamicStyle(user)"
@error="setDefaultImage"
@load="showImage"
/>
<span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
{{ remainingVacationData[user.MEMBERSEQ] || 0 }}
</span>
</li>
</ul>
</div>
</template>
</template>
<script setup>
import { onMounted, ref, computed, nextTick } from "vue";
import { useUserInfoStore } from "@s/useUserInfoStore";
import { useUserStore } from "@s/userList";
import $api from "@api";
<script setup>
import { onMounted, ref, computed, nextTick } from "vue";
import { useUserInfoStore } from "@s/useUserInfoStore";
import { useUserStore } from "@s/userList";
import $api from "@api";
defineEmits(["profileClick"]);
defineEmits(["profileClick"]);
defineProps({ remainingVacationData: Object });
defineProps({
remainingVacationData: Object,
});
const userStore = useUserInfoStore();
const userListStore = useUserStore();
const userStore = useUserInfoStore();
const userListStore = useUserStore();
const userList = ref([]);
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
const defaultProfile = "/img/icons/icon.png";
const employeeId = ref(null);
const userColors = ref({});
const windowWidth = ref(window.innerWidth);
const userList = ref([]);
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
const defaultProfile = "/img/icons/icon.png";
const employeeId = ref(null);
const userColors = ref({});
const updateWindowWidth = () => {
windowWidth.value = window.innerWidth;
};
onMounted(async () => {
await userStore.userInfo();
if (userStore.user) {
employeeId.value = userStore.user.id;
} else {
console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
}
onMounted(async () => {
window.addEventListener("resize", updateWindowWidth);
await userListStore.fetchUserList();
userList.value = userListStore.userList;
await userStore.userInfo();
employeeId.value = userStore.user?.id ?? null;
// 사용자별 색상 저장
userList.value.forEach(user => {
userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
await userListStore.fetchUserList();
userList.value = userListStore.userList;
userList.value.forEach(user => {
userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
});
nextTick(() => {
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
new bootstrap.Tooltip(tooltip);
});
});
});
nextTick(() => {
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(tooltip => {
new bootstrap.Tooltip(tooltip);
});
});
});
const sortedUserList = computed(() => {
if (!employeeId.value) return userList.value;
const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
return myProfile ? [myProfile, ...otherUsers] : userList.value;
});
const sortedUserList = computed(() => {
if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
const getUserProfileImage = (profilePath) =>
profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
return myProfile ? [myProfile, ...otherUsers] : userList.value;
});
const setDefaultImage = (event) => (event.target.src = defaultProfile);
const showImage = (event) => (event.target.style.visibility = "visible");
// 프로필 이미지 URL 반환
const getUserProfileImage = (profilePath) => {
return profilePath && profilePath.trim()
? `${baseUrl}upload/img/profile/${profilePath}`
: defaultProfile;
};
// 화면 크기에 따라 프로필 크기 동적 조정
const profileSize = computed(() => {
const totalUsers = userList.value.length;
const setDefaultImage = (event) => {
event.target.src = defaultProfile;
};
if (windowWidth.value >= 1650) {
if (totalUsers <= 10) return "68px";
if (totalUsers <= 15) return "55px";
return "45px";
} else if (windowWidth.value >= 1300) {
if (totalUsers <= 10) return "45px";
if (totalUsers <= 15) return "40px";
return "30px";
} else if (windowWidth.value >= 1024) {
if (totalUsers <= 10) return "40px";
if (totalUsers <= 15) return "30px";
return "20px";
} else {
return "20px";
}
});
const showImage = (event) => {
event.target.style.visibility = "visible";
};
const getDynamicStyle = (user) => ({
width: profileSize.value,
height: profileSize.value,
borderWidth: "4px",
borderColor: user.usercolor || "#ccc",
borderStyle: "solid",
});
</script>
// 프로필 크기 동적 조정: 사이드바 영역에 맞게 조금 더 축소
const profileSize = computed(() => {
const totalUsers = userList.value.length;
if (totalUsers <= 10) return "68px"; // ~10명
if (totalUsers <= 15) return "50px"; // ~20명
return "30px"; // 20명 이상
});
// 개별 유저 스타일 적용
const getDynamicStyle = (user) => {
return {
width: profileSize.value,
height: profileSize.value,
borderWidth: "4px",
borderColor: user.usercolor || "#ccc",
borderStyle: "solid",
};
};
</script>
<style scoped>
/* 남은 연차 개수 스타일 */
.remaining-vacation {
display: block;
text-align: center;
font-size: 14px;
color: #333;
margin-top: 5px;
}
/* ul에 flex-wrap을 적용하여 넘치는 프로필이 다음 줄로 내려가도록 함 */
ul {
flex-wrap: wrap;
justify-content: center;
}
/* li 간 간격 조정 */
li {
margin: 5px;
}
</style>
<style scoped>
</style>

27
src/layouts/NormalLayout.vue
View File

@ -7,6 +7,7 @@
<div class="layout-page">
<!-- Top -->
<TheTop />
<!-- Content -->
<div class="content-wrapper">
<slot name="content"> body </slot>
@ -14,6 +15,7 @@
<div class="content-backdrop fade"></div>
</div>
</div>
<TheChat />
</div>
<!-- Overlay -->
@ -27,6 +29,7 @@
import TheTop from './TheTop.vue';
import TheFooter from './TheFooter.vue';
import TheMenu from './TheMenu.vue';
import TheChat from './TheChat.vue';
import { nextTick } from 'vue';
import { wait } from '@/common/utils';
@ -45,4 +48,26 @@
loadScript('/js/main.js');
});
</script>
<style></style>
<style>
/* 중앙 콘텐츠 자동 조정 */
.layout-page {
flex-grow: 1;
min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
}
/* top bar 고정1 */
.layout-navbar-fixed .layout-navbar {
position: relative;
top: 0;
right: auto;
left: 0 !important;
width: 96% !important;
padding-top: 0 !important;
}
/* top bar 고정2 */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
padding-top: 0 !important;
}
</style>

43
src/layouts/TheChat.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<!-- Chat Sidebar -->
<aside id="chat-sidebar" class="chat-sidebar">
</aside>
</template>
<script setup>
import { ref } from "vue";
// 채팅 메시지 리스트
const messages = ref([
{ user: "사용자1", text: "안녕하세요!" },
{ user: "사용자2", text: "안녕하세요. 반갑습니다." }
]);
const newMessage = ref("");
// 메시지 전송
const sendMessage = () => {
if (newMessage.value.trim() !== "") {
messages.value.push({ user: "나", text: newMessage.value });
newMessage.value = "";
}
};
</script>
<style scoped>
/* 채팅 사이드바 고정 */
.chat-sidebar {
width: 20%;
height: 100vh;
position: fixed;
right: 0;
top: 0;
background: #fff;
border-left: 1px solid #ddd;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
z-index: 1000;
}
</style>

3
src/layouts/TheTop.vue
View File

@ -265,4 +265,5 @@
router.push('/login');
};
</script>
<style></style>
<style scoped>
</style>

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

File diff suppressed because it is too large Load Diff