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

2025-03-06 15:29:39 +09:00 · 2025-03-06 15:29:39 +09:00 · c3b1331128
commit c3b1331128
parent 708309f6a0 17fb20ae1e
8 changed files with 119 additions and 107 deletions
--- a/public/css/custom.css
+++ b/public/css/custom.css
@ -78,14 +78,14 @@ opacity: 0.6; /* 흐려 보이게 */
  border: none !important;
  border-radius: 4px;
 }
-/* 오전 반차 (왼쪽 절반) */
+/* 오전 반차 활성화 영역 (왼쪽 절반) */
 .selected-event.half-day-am {
  width: 50% !important;
  left: 0 !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
 }
-/* 오후 반차 (오른쪽 절반) */
+/* 오후 반차 활성화 영역 (오른쪽 절반) */
 .selected-event.half-day-pm {
  width: 50% !important;
  margin-left: auto !important;
@ -105,6 +105,30 @@ opacity: 0.6; /* 흐려 보이게 */
  font-size: 18px;
  cursor: pointer;
 }
+.close-btn:hover {
+  color: #525252;
+}
+/* 모달 배경 투명하게 */
+.vac-modal-dialog {
+  background: none !important;
+  box-shadow: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  }
+  
+  /* 모달 본문 스타일 */
+  .vac-modal-content {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
+  padding: 20px;
+  max-width: 500px;
+  width: 100%;
+  position: relative;
+  }
 /* 리스트 아이템 */
 .vacation-item {
  display: flex;
--- a/public/img/mbti/estj.png
+++ b/public/img/mbti/estj.png
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@ -5,7 +5,7 @@
            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
        </label>
        <div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
-            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}">
+            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
                    {{ isCommon ? item.label : item }}
                </option>
@ -91,7 +91,7 @@ const props = defineProps({
    },
 });

-const emit = defineEmits(['update:data']);
+const emit = defineEmits(['update:data', 'blur']);
 const selectData = ref(props.value);

 // props.value의 변경을 감지하는 watch 추가
@ -106,6 +106,10 @@ watch(() => props.data, (newData) => {
        if (props.value === '0') {
            selectData.value = newData[0].value;
            emit('update:data', selectData.value);
+
+            if (props.isColor) {
+                emit('blur');
+            }
        }
    }
 }, { immediate: true });
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@ -1,26 +1,29 @@
 <template>
-    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content p-5">
-        <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
-        <button class="close-btn" @click="closeModal">✖</button>
+    <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
+        <div class="vac-modal-content p-5">
+            <div class="modal-header">
+                <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
+                <button class="close-btn" @click="closeModal">✖</button>
+            </div>

-        <div class="modal-body">
-          <p>선물할 연차 개수를 선택하세요.</p>
+            <div class="modal-body">
+                <p>선물할 연차 개수를 선택하세요.</p>

-          <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
-            <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
-            <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
-            <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
-          </div>
-          <div class="custom-button-container">
-          <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
-            <i class="bx bx-gift"></i>
-          </button>
-          </div>
+                <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
+                <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
+                <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
+                <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
+                </div>
+
+                <div class="custom-button-container">
+                <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
+                    <i class="bx bx-gift"></i>
+                </button>
+                </div>
+            </div>
        </div>
-      </div>
    </div>
-  </template>
+</template>

  <script setup>
  import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
@ -121,25 +124,6 @@
  </script>


-  <style scoped>
-/* 모달 배경 투명하게 */
-.modal-dialog {
-  background: none !important;  /* 배경 제거 */
-  box-shadow: none !important;  /* 음영 제거 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
+<style scoped>

-/* 모달 내용 스타일 */
-.modal-content {
-  background: #fff;  /* 기존 흰색 배경 유지 */
-  border-radius: 8px;
-  box-shadow: none !important;  /* 내부 음영 제거 */
-  padding: 20px;
-  max-width: 500px;
-  width: 100%;
-}
-  </style>
+</style>
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@ -1,6 +1,6 @@
 <template>
-    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content p-5 modal-scroll">
+    <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
+      <div class="vac-modal-content p-5 modal-scroll">
        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
        <button class="close-btn" @click="closeModal">✖</button>

@ -138,25 +138,4 @@ const closeModal = () => {
 </script>

  <style scoped>
-
-/* 모달 배경 투명하게 */
-.modal-dialog {
-  background: none !important;  /* 배경 제거 */
-  box-shadow: none !important;  /* 음영 제거 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-/* 모달 내용 스타일 */
-.modal-content {
-  background: #fff;  /* 기존 흰색 배경 유지 */
-  border-radius: 8px;
-  box-shadow: none !important;  /* 내부 음영 제거 */
-  padding: 20px;
-  max-width: 500px;
-  width: 100%;
-}
  </style>
--- a/src/components/user/RegisterForm.vue
+++ b/src/components/user/RegisterForm.vue
@ -95,9 +95,11 @@
                    :is-color="true"
                    :data="colorList"
                    @update:data="color = $event"
+                    @blur="checkColorDuplicate"
                    class="w-50"
                />
            </div>
+            <span v-if="colorError" class="w-50 ps-1 ms-auto invalid-feedback d-block">{{ colorError }}</span>

            <div class="d-flex">
                <UserFormInput
@ -187,6 +189,7 @@
    const phone = ref('');
    const phoneError = ref('');
    const color = ref(''); // 선택된 color
+    const colorError = ref('');
    const mbti = ref('');  // 선택된 MBTI
    const pwhint = ref('');  // 선택된 pwhint

@ -202,6 +205,7 @@
    const addressAlert = ref(false);
    const phoneAlert = ref(false);
    const phoneErrorAlert = ref(false);
+    const colorErrorAlert = ref(false);

    const toastStore = useToastStore();

@ -247,7 +251,6 @@
    // 아이디 중복체크
    const checkIdDuplicate = async () => {
        const response = await $api.get(`/user/checkId?memberIds=${id.value}`);
-
        if (!response.data.data) {
            idErrorAlert.value = true;
            idError.value = '이미 사용 중인 아이디입니다.';
@ -295,9 +298,26 @@
        }
    };

+
+    // 색상 중복체크
+    const checkColorDuplicate = async () => {
+        const response = await $api.get(`/user/checkColor?memberCol=${color.value}`);
+
+        if (response.data.data) {
+            colorErrorAlert.value = true;
+            colorError.value = '이미 사용 중인 색상입니다.';
+        } else {
+            colorErrorAlert.value = false;
+            colorError.value = '';
+        }
+    };
+
+
    // 회원가입
    const handleSubmit = async () => {

+        await checkColorDuplicate();
+
        idAlert.value = id.value.trim() === '';
        passwordAlert.value = password.value.trim() === '';
        passwordcheckAlert.value = passwordcheck.value.trim() === '';
@ -317,7 +337,8 @@
        }

        if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
-            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) {
+            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value ||
+            addressAlert.value || phoneAlert.value || phoneErrorAlert.value || colorErrorAlert.value) {
            return;
        }

--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@ -8,8 +8,8 @@

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

                <i class="bx bx-bell bx-md bx-log-out cursor-pointer p-1" @click="handleLogout"></i>

--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@ -148,7 +148,7 @@ watch(
  const calendarDatepicker = ref(null);
  let fpInstance = null;

-/** ✅ 변경사항 여부 확인 */
+/** 변경사항 여부 확인 */
 const hasChanges = computed(() => {
  return (
    selectedDates.value.size > 0 ||
@ -157,7 +157,7 @@ const hasChanges = computed(() => {
 });


-/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
+/** selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
 watch(
  () => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
  (newKeys) => {
@ -204,7 +204,7 @@ function handleDateClick(info) {
    selectedDates.value.set(clickedDateStr, type);
    halfDayType.value = null;
    updateCalendarEvents();
-    // ✅ 날짜 선택 후 버튼 초기화
+    // 날짜 선택 후 버튼 초기화
    if (halfDayButtonsRef.value) {
        halfDayButtonsRef.value.resetHalfDay();
    }
@ -417,42 +417,42 @@ function handleDateClick(info) {
    halfDayType.value = halfDayType.value === type ? null : type;
  }

-  async function fetchVacationData(year, month) {
-    try {
-      const response = await axios.get(`vacation/list/${year}/${month}`);
-      if (response.status === 200) {
-        const vacationList = response.data;
-        if (lastRemainingYear.value !== year) {
-          myVacations.value = vacationList.filter(
-            (vac) => vac.MEMBERSEQ === userStore.user.id
-          );
-          lastRemainingYear.value = year;
-        }
-        const events = vacationList
-          .filter((vac) => !vac.LOCVACRMM)
-          .map((vac) => {
-            let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
-            let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
-            return {
-              title: getVacationType(vac.LOCVACTYP),
-              start: dateStr,
-              backgroundColor,
-              classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-              saved: true,
-              memberSeq: vac.MEMBERSEQ,
-            };
-          })
-          .filter((event) => event.start);
-        return events;
-      } else {
-        console.warn("📌 휴가 데이터를 불러오지 못함");
-        return [];
-      }
-    } catch (error) {
-      console.error("Error fetching vacation data:", error);
+// 연차 리스트 조회회
+async function fetchVacationData(year, month) {
+  try {
+    const response = await axios.get(`vacation/list/${year}/${month}`);
+    if (response.status === 200) {
+      const vacationList = response.data;
+
+      // 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
+      const filteredVacations = vacationList.filter(vac =>
+        userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ] !== "#FFFFFF"
+      );
+
+      const events = filteredVacations.map(vac => {
+        let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
+        let backgroundColor = userColors.value[vac.MEMBERSEQ];
+
+        return {
+          title: getVacationType(vac.LOCVACTYP),
+          start: dateStr,
+          backgroundColor,
+          classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+          saved: true,
+          memberSeq: vac.MEMBERSEQ,
+        };
+      }).filter(event => event.start);
+
+      return events;
+    } else {
+      console.warn("📌 휴가 데이터를 불러오지 못함");
      return [];
    }
+  } catch (error) {
+    console.error("Error fetching vacation data:", error);
+    return [];
  }
+}

  async function saveVacationChanges() {
    if (!hasChanges.value) return;
@ -522,7 +522,7 @@ function handleDateClick(info) {
    await nextTick();
    fullCalendarRef.value.getApi().refetchEvents();
  }
-  /** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */
+  /** 오늘 이후의 날짜만 클릭 가능하도록 설정 */
 function markClickableDates() {
  nextTick(() => {
    const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD