Merge remote-tracking branch 'origin/main' into board-comment
This commit is contained in:
commit
04ab0325b7
5
.env.dev
Normal file
5
.env.dev
Normal file
@ -0,0 +1,5 @@
|
||||
VITE_DOMAIN = http://localhost:5173/
|
||||
# VITE_LOGIN_URL = http://localhost:10325/ms/
|
||||
# VITE_FILE_URL = http://localhost:10325/ms/
|
||||
# VITE_API_URL = http://localhost:10325/api/
|
||||
VITE_API_URL = http://localhost:10325/test/
|
||||
@ -29,68 +29,82 @@
|
||||
|
||||
|
||||
/* 휴가*/
|
||||
|
||||
.half-day-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.half-day-buttons .btn.active {
|
||||
border: 2px solid black;
|
||||
}
|
||||
.fc-daygrid-day-frame {
|
||||
min-height: 80px !important;
|
||||
max-height: 120px !important;
|
||||
overflow: hidden !important;
|
||||
padding-top: 25px !important;
|
||||
}
|
||||
.fc-daygrid-day-events {
|
||||
max-height: 100px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.fc-daygrid-event {
|
||||
position: absolute !important;
|
||||
height: 20px !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
margin: 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 2px !important;
|
||||
border: none !important;
|
||||
}
|
||||
.fc-daygrid-event-harness {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 22px;
|
||||
}
|
||||
.fc-daygrid-event.half-day-am {
|
||||
width: 45% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.fc-daygrid-event.half-day-pm {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
.fc-daygrid-event.full-day {
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.fc-day-sun .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
|
||||
color: #ff4500 !important;
|
||||
}
|
||||
.fc-day-sat .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
|
||||
color: #6076e0 !important;
|
||||
}
|
||||
.fc-daygrid-day-number {
|
||||
position: absolute !important;
|
||||
top: 0px !important;
|
||||
left: 5px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
.half-day-buttons .btn.active {
|
||||
border: 2px solid black;
|
||||
}
|
||||
.fc-daygrid-day-frame {
|
||||
min-height: 80px !important;
|
||||
max-height: 120px !important;
|
||||
overflow: hidden !important;
|
||||
padding-top: 25px !important;
|
||||
}
|
||||
.fc-daygrid-day-events {
|
||||
max-height: 100px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.fc-daygrid-event {
|
||||
position: absolute !important;
|
||||
height: 20px !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
margin: 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 2px !important;
|
||||
border: none !important;
|
||||
}
|
||||
.fc-daygrid-event-harness {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 22px;
|
||||
}
|
||||
.fc-daygrid-event.half-day-am {
|
||||
width: 45% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.fc-daygrid-event.half-day-pm {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
.fc-daygrid-event.full-day {
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.fc-day-sun .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
|
||||
color: #ff4500 !important;
|
||||
}
|
||||
.fc-day-sat .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
|
||||
color: #6076e0 !important;
|
||||
}
|
||||
.fc-daygrid-day-number {
|
||||
position: absolute !important;
|
||||
top: 0px !important;
|
||||
left: 5px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
border: 3px solid;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
object-fit: cover;
|
||||
background-color: white;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grayscaleImg {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
import axios from "axios";
|
||||
import axios from 'axios';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
|
||||
const $api = axios.create({
|
||||
baseURL: 'http://localhost:10325/api/',
|
||||
timeout: 300000,
|
||||
withCredentials : true
|
||||
})
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* Default Content-Type : json
|
||||
@ -14,7 +14,6 @@ const $api = axios.create({
|
||||
*/
|
||||
$api.interceptors.request.use(
|
||||
function (config) {
|
||||
|
||||
let contentType = 'application/json';
|
||||
|
||||
if (config.isFormData) contentType = 'multipart/form-data';
|
||||
@ -23,21 +22,21 @@ $api.interceptors.request.use(
|
||||
config.headers['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
return config;
|
||||
}, function (error) {
|
||||
},
|
||||
function (error) {
|
||||
// 요청 오류가 있는 작업 수행
|
||||
return Promise.reject(error);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 응답 인터셉터 추가하기
|
||||
$api.interceptors.response.use(
|
||||
|
||||
function (response) {
|
||||
// 2xx 범위의 응답 처리
|
||||
return response;
|
||||
},
|
||||
function (error) {
|
||||
const toastStore = useToastStore()
|
||||
const toastStore = useToastStore();
|
||||
const currentPage = error.config.headers['X-Page-Route'];
|
||||
// 오류 응답 처리
|
||||
if (error.response) {
|
||||
@ -70,7 +69,7 @@ $api.interceptors.response.use(
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export default $api;
|
||||
|
||||
@ -62,17 +62,19 @@ watch(() => props.dislikeCount, (newVal) => {
|
||||
});
|
||||
|
||||
const handleLike = () => {
|
||||
console.log('좋아요',likeCount.value)
|
||||
// emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
|
||||
// likeClicked.value = true;
|
||||
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: true, isDislike: false });
|
||||
const isLike = !likeClicked.value;
|
||||
const isDislike = false;
|
||||
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
|
||||
likeClicked.value = isLike;
|
||||
dislikeClicked.value = false;
|
||||
};
|
||||
|
||||
const handleDislike = () => {
|
||||
console.log('싫어요')
|
||||
// emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
|
||||
// dislikeClicked.value = true;
|
||||
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: false, isDislike: true });
|
||||
const isDislike = !dislikeClicked.value;
|
||||
const isLike = false;
|
||||
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
|
||||
dislikeClicked.value = isDislike;
|
||||
likeClicked.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
<template>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="col-xl-12">
|
||||
<UserFormInput
|
||||
title="아이디"
|
||||
name="id"
|
||||
:is-alert="idAlert"
|
||||
:useInputGroup="true"
|
||||
@update:data="handleIdChange"
|
||||
:value="id"
|
||||
/>
|
||||
<UserFormInput title="아이디" name="id" :is-alert="idAlert" :useInputGroup="true" @update:data="handleIdChange" :value="id" />
|
||||
|
||||
<UserFormInput
|
||||
title="비밀번호"
|
||||
@ -63,17 +56,24 @@
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
$api.post('user/login', {
|
||||
loginId: id.value,
|
||||
password: password.value,
|
||||
remember: remember.value,
|
||||
}, { headers: { 'X-Page-Route': route.path } })
|
||||
.then(res => {
|
||||
$api.post(
|
||||
'user/login',
|
||||
{
|
||||
loginId: id.value,
|
||||
password: password.value,
|
||||
remember: remember.value,
|
||||
},
|
||||
{ headers: { 'X-Page-Route': route.path } },
|
||||
).then(res => {
|
||||
if (res.status === 200) {
|
||||
// TODO: 개발용 로그인 쿠키세팅이므로 차후 삭제
|
||||
const sessionCookie = res.data.data;
|
||||
document.cookie = `JSESSIONID=${sessionCookie};path=/;expires=-1;`;
|
||||
document.cookie = `JSESSIONID=${sessionCookie};path=/`;
|
||||
|
||||
userStore.userInfo();
|
||||
router.push('/');
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
<template>
|
||||
<div class="users-list-wrapper">
|
||||
<button class="scroll-btn left" @click="scrollLeft">❮</button>
|
||||
|
||||
<div class="users-list-container" ref="userListContainer">
|
||||
<ul class="list-unstyled users-list d-flex align-items-center justify-content-start">
|
||||
<li
|
||||
v-for="(user, index) in userList"
|
||||
<div class="card-body d-flex justify-content-center">
|
||||
<ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
class="avatar pull-up position-relative"
|
||||
:class="{ disabled: user.disabled }"
|
||||
@click="toggleDisable(index)"
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
:data-bs-original-title="getTooltipTitle(user)"
|
||||
>
|
||||
<div class="tooltip-custom">{{ getTooltipTitle(user) }}</div>
|
||||
>
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="{ borderColor: user.usercolor }"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
/>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="scroll-btn right" @click="scrollRight">❯</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
import { useUserStore } from "@s/userList";
|
||||
import { onMounted, ref, computed, nextTick } from "vue";
|
||||
import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
|
||||
import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
|
||||
import $api from "@api";
|
||||
|
||||
const emit = defineEmits();
|
||||
const userStore = useUserStore();
|
||||
const userList = ref([]);
|
||||
const userListContainer = ref(null); // 프로필 목록 컨테이너 참조
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||
const defaultProfile = "/img/icons/icon.png"; // 기본 이미지 경로
|
||||
const userListStore = useUserListStore();
|
||||
|
||||
const userList = ref([]);
|
||||
const userListContainer = ref(null);
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||
const defaultProfile = "/img/icons/icon.png";
|
||||
|
||||
const employeeId = ref(null); // 현재 로그인한 사용자 ID
|
||||
|
||||
// ✅ 사용자 목록 호출
|
||||
onMounted(async () => {
|
||||
await userStore.fetchUserList();
|
||||
userList.value = userStore.userList;
|
||||
await userStore.userInfo(); // 로그인한 사용자 정보 가져오기
|
||||
await userListStore.fetchUserList(); // 사원 리스트 가져오기
|
||||
|
||||
userList.value = userListStore.userList;
|
||||
|
||||
// 로그인한 사용자의 ID 가져오기
|
||||
if (userStore.user) {
|
||||
employeeId.value = userStore.user.id;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach((tooltip) => {
|
||||
@ -57,131 +57,51 @@
|
||||
});
|
||||
});
|
||||
|
||||
// ✅ 프로필 이미지 경로 반환
|
||||
// 내 프로필을 가장 앞에 배치한 리스트 정렬
|
||||
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 getUserProfileImage = (profilePath) => {
|
||||
return profilePath && profilePath.trim()
|
||||
? `${baseUrl}upload/img/profile/${profilePath}`
|
||||
: defaultProfile;
|
||||
};
|
||||
|
||||
// ✅ 이미지 로딩 오류 처리
|
||||
const setDefaultImage = (event) => {
|
||||
event.target.src = defaultProfile;
|
||||
};
|
||||
|
||||
// ✅ 이미지 로드 후 깜빡임 방지
|
||||
const showImage = (event) => {
|
||||
event.target.style.visibility = "visible";
|
||||
};
|
||||
|
||||
// ✅ 툴팁 타이틀 설정
|
||||
const getTooltipTitle = (user) => {
|
||||
return user.MEMBERSEQ === userList.value.MEMBERSEQ ? "나" : user.MEMBERNAM;
|
||||
};
|
||||
// 프로필 크기 동적 조정
|
||||
const profileSize = computed(() => {
|
||||
const totalUsers = userList.value.length;
|
||||
|
||||
// ✅ 좌우 스크롤 이동 기능 추가 (한 줄씩 이동)
|
||||
const scrollLeft = () => {
|
||||
userListContainer.value.scrollBy({ left: -userListContainer.value.clientWidth, behavior: "smooth" });
|
||||
};
|
||||
if (totalUsers <= 7) return "120px"; // 7명 이하
|
||||
if (totalUsers <= 10) return "110px"; // ~10명
|
||||
if (totalUsers <= 20) return "80px"; // ~20명
|
||||
return "60px"; // 20명 이상
|
||||
});
|
||||
|
||||
const scrollRight = () => {
|
||||
userListContainer.value.scrollBy({ left: userListContainer.value.clientWidth, behavior: "smooth" });
|
||||
// 개별 유저 스타일 적용
|
||||
const getDynamicStyle = (user) => {
|
||||
return {
|
||||
width: profileSize.value,
|
||||
height: profileSize.value,
|
||||
borderWidth: "3px",
|
||||
borderColor: user.usercolor || "#ccc",
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✅ 전체 프로필 목록 감싸는 영역 */
|
||||
.users-list-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1250px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* ✅ 스크롤 가능하도록 컨테이너 설정 */
|
||||
.users-list-container {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 200px; /* 한 줄 이상 넘어가지 않도록 조절 */
|
||||
padding: 50px;
|
||||
scrollbar-width: none; /* Firefox에서 스크롤바 숨김 */
|
||||
}
|
||||
|
||||
/* ✅ 스크롤바 숨기기 */
|
||||
.users-list-container::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari에서 스크롤바 숨김 */
|
||||
}
|
||||
|
||||
/* ✅ 프로필 목록 */
|
||||
.users-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px; /* 프로필 간격 */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* ✅ 프로필 이미지 스타일 */
|
||||
.user-avatar {
|
||||
border: 3px solid;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
background-color: white;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* ✅ 프로필 선택 효과 */
|
||||
.avatar:hover .user-avatar {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ✅ 툴팁 위치 조정 */
|
||||
.tooltip-custom {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ✅ 툴팁 표시 */
|
||||
.avatar:hover .tooltip-custom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ✅ 좌우 스크롤 버튼 */
|
||||
.scroll-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px 15px;
|
||||
font-size: 20px;
|
||||
z-index: 100;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.scroll-btn.left {
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.scroll-btn.right {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.scroll-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,23 @@
|
||||
<template>
|
||||
<div class="vacation-management">
|
||||
<div class="container flex-grow-1">
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card app-calendar-wrapper">
|
||||
<div class="row g-0">
|
||||
<div class="col app-calendar-content">
|
||||
<div class="card shadow-none border-0">
|
||||
<ProfileList />
|
||||
<div class="card-body">
|
||||
<full-calendar
|
||||
ref="fullCalendarRef"
|
||||
:options="calendarOptions"
|
||||
class="flatpickr-calendar-only"
|
||||
/>
|
||||
<HalfDayButtons
|
||||
@toggleHalfDay="toggleHalfDay"
|
||||
@addVacationRequests="addVacationRequests"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProfileList />
|
||||
|
||||
<HalfDayButtons
|
||||
@toggleHalfDay="toggleHalfDay"
|
||||
@addVacationRequests="addVacationRequests"
|
||||
/>
|
||||
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,7 +68,6 @@ const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이
|
||||
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
||||
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
||||
const halfDayType = ref(null);
|
||||
const employeeId = ref(1);
|
||||
|
||||
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
||||
const holidayDates = ref(new Set());
|
||||
@ -216,7 +211,6 @@ if (selectedDates.value.size === 0) {
|
||||
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
|
||||
date,
|
||||
type,
|
||||
employeeId: employeeId.value,
|
||||
}));
|
||||
try {
|
||||
const response = await axios.post("vacation", vacationRequests);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user