화면 반응형으로 수정
This commit is contained in:
parent
8636bd1ab9
commit
21fb66bafe
@ -1,129 +1,266 @@
|
||||
<template>
|
||||
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
|
||||
<div class="vac-modal-content p-5">
|
||||
<div class="vac-modal-content">
|
||||
<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>
|
||||
<p class="modal-text">선물할 연차 개수를 선택하세요.</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="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');
|
||||
console.error("🚨 연차 추가 실패:", error);
|
||||
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>
|
||||
/* ✅ 반응형 모달 크기 조정 */
|
||||
.vac-modal-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 9999;
|
||||
overflow: hidden; /* 풀 화면에서 스크롤 방지 */
|
||||
}
|
||||
|
||||
.vac-modal-content {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ✅ 제목 스타일 */
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ✅ 본문 텍스트 스타일 */
|
||||
.modal-text {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ✅ 숫자 선택 영역 */
|
||||
.count-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* ✅ 숫자 값 크기 증가 */
|
||||
.count-value {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ✅ 숫자 버튼 */
|
||||
.count-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 22px;
|
||||
border: none;
|
||||
background: #2C3E50;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.count-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ✅ 선물 아이콘 버튼 */
|
||||
.custom-button-container {
|
||||
display: flex;
|
||||
justify-content: 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;
|
||||
}
|
||||
|
||||
/* ✅ 작은 화면에서 버튼 크기 조정 */
|
||||
@media (max-width: 1024px) {
|
||||
.count-btn {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<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">
|
||||
<ul class="list-unstyled profile-list">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
@ -10,7 +10,7 @@
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle"
|
||||
class="rounded-circle profile-img"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@ -32,10 +32,7 @@
|
||||
import $api from "@api";
|
||||
|
||||
defineEmits(["profileClick"]);
|
||||
|
||||
defineProps({
|
||||
remainingVacationData: Object,
|
||||
});
|
||||
defineProps({ remainingVacationData: Object });
|
||||
|
||||
const userStore = useUserInfoStore();
|
||||
const userListStore = useUserStore();
|
||||
@ -45,92 +42,112 @@
|
||||
const defaultProfile = "/img/icons/icon.png";
|
||||
const employeeId = ref(null);
|
||||
const userColors = ref({});
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
|
||||
const updateWindowWidth = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener("resize", updateWindowWidth);
|
||||
|
||||
await userStore.userInfo();
|
||||
if (userStore.user) {
|
||||
employeeId.value = userStore.user.id;
|
||||
} else {
|
||||
console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
|
||||
}
|
||||
employeeId.value = userStore.user?.id ?? null;
|
||||
|
||||
await userListStore.fetchUserList();
|
||||
userList.value = userListStore.userList;
|
||||
|
||||
// 사용자별 색상 저장
|
||||
userList.value.forEach(user => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach(tooltip => {
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const sortedUserList = computed(() => {
|
||||
if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
|
||||
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;
|
||||
});
|
||||
|
||||
// 프로필 이미지 URL 반환
|
||||
const getUserProfileImage = (profilePath) => {
|
||||
return profilePath && profilePath.trim()
|
||||
? `${baseUrl}upload/img/profile/${profilePath}`
|
||||
: defaultProfile;
|
||||
};
|
||||
const getUserProfileImage = (profilePath) =>
|
||||
profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
|
||||
|
||||
const setDefaultImage = (event) => {
|
||||
event.target.src = defaultProfile;
|
||||
};
|
||||
const setDefaultImage = (event) => (event.target.src = defaultProfile);
|
||||
const showImage = (event) => (event.target.style.visibility = "visible");
|
||||
|
||||
const showImage = (event) => {
|
||||
event.target.style.visibility = "visible";
|
||||
};
|
||||
|
||||
// 프로필 크기 동적 조정: 사이드바 영역에 맞게 조금 더 축소
|
||||
// ✅ 화면 크기에 따라 프로필 크기 동적 조정
|
||||
const profileSize = computed(() => {
|
||||
const totalUsers = userList.value.length;
|
||||
if (totalUsers <= 10) return "68px"; // ~10명
|
||||
if (totalUsers <= 15) return "50px"; // ~20명
|
||||
return "30px"; // 20명 이상
|
||||
|
||||
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 getDynamicStyle = (user) => {
|
||||
return {
|
||||
width: profileSize.value,
|
||||
height: profileSize.value,
|
||||
borderWidth: "4px",
|
||||
borderColor: user.usercolor || "#ccc",
|
||||
borderStyle: "solid",
|
||||
};
|
||||
};
|
||||
const getDynamicStyle = (user) => ({
|
||||
width: profileSize.value,
|
||||
height: profileSize.value,
|
||||
borderWidth: "4px",
|
||||
borderColor: user.usercolor || "#ccc",
|
||||
borderStyle: "solid",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 남은 연차 개수 스타일 */
|
||||
/* ✅ 프로필 리스트 반응형 정렬 */
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ✅ 프로필 이미지 반응형 스타일 */
|
||||
.profile-img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* ✅ 남은 연차 개수 스타일 */
|
||||
.remaining-vacation {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* ul에 flex-wrap을 적용하여 넘치는 프로필이 다음 줄로 내려가도록 함 */
|
||||
ul {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
/* ✅ 작은 화면에서 프로필 크기 조정 */
|
||||
@media (max-width: 1024px) {
|
||||
.remaining-vacation {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* li 간 간격 조정 */
|
||||
li {
|
||||
margin: 5px;
|
||||
@media (max-width: 768px) {
|
||||
.profile-list {
|
||||
gap: 4px; /* 작은 화면에서는 간격 축소 */
|
||||
}
|
||||
.remaining-vacation {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,7 +68,6 @@ import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import "@/assets/css/app-calendar.css";
|
||||
// Flatpickr, MonthSelect
|
||||
import flatpickr from "flatpickr";
|
||||
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
|
||||
@ -574,4 +573,6 @@ onMounted(async () => {
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user