Merge branch 'main' into project-list

public/css/custom.css

@@ -106,13 +106,14 @@ cursor: not-allowed !important;
     padding-bottom: 20px;
 }
 .vac-modal-content {
-    background: #fff;
+  background: #fff;
-    padding: 20px;
+  padding: 20px;
-    border-radius: 8px;
+  border-radius: 8px;
-    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
+  box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1),
-    max-width: 500px;
+              0px 4px 0px rgba(0, 0, 0, 0);
-    width: 100%;
+  max-width: 500px;
-    position: relative;
+  width: 100%;
+  position: relative;
 }
 .vac-modal-body {
   max-height: 140px;
@@ -211,20 +212,25 @@ cursor: not-allowed !important;
 .profile-list {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  gap: 15px;
-  gap: 10px;
   padding: 0;
-  margin-left: 12%;
+  list-style: none;
+  justify-content: flex-start;
+  cursor: pointer;
 }
-.profile-img {
+.profile-item {
-  transition: all 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  width: calc(33.33% - 10px);
 }
 
 /* 오전/오후반차,저장버튼 */
 /* 버튼 기본 스타일 */
 .vac-btn {
-  width: 50px;
+  width: 60px;
-  height: 50px;
+  height: 60px;
   border-radius: 50%;
   font-size: 20px;
   display: flex;
@@ -281,8 +287,8 @@ cursor: not-allowed !important;
 /* 버튼 기본 (비활성화일 때 기본 녹색) */
 .vac-btn-success {
   font-size: 24px;
-  width: 50px;
+  width: 60px;
-  height: 50px;
+  height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -313,7 +319,7 @@ cursor: not-allowed !important;
 }
 
 /* 작은 화면에서 버튼 크기 조정 */
-@media (max-width: 1600px) {
+@media (max-width: 1700px) {
   .count-btn {
       width: 28px;
       height: 28px;
@@ -349,6 +355,28 @@ cursor: not-allowed !important;
       text-align: center;
       margin-bottom: 5px;
   }
+  .vac-btn {
+    width: 50px;
+    height: 50px;
+    font-size: 18px;
+  }
+  .vac-btn-success {
+    font-size: 20px;
+    width: 50px;
+    height: 50px;
+  }
+}
+@media (max-width: 1500px) {
+  .close-btn {
+    top: 5px;
+    right: 5px;
+    font-size: 13px;
+  }
+  .vacation-item {
+    font-size: 11px;
+    text-align: center;
+    margin-bottom: 5px;
+}
   .vac-btn {
     width: 40px;
     height: 40px;
@@ -360,7 +388,6 @@ cursor: not-allowed !important;
     height: 40px;
   }
 }
-
   
 
 .grayscaleImg {

src/components/button/EditBtn.vue

@@ -18,19 +18,19 @@ const props = defineProps({
     },
 });
 
-const buttonClass = ref("bx bx-edit");
+const buttonClass = ref("bx bx-edit-alt");
 
 watch(() => props.isActive, (newVal) => {
-    buttonClass.value = newVal ? "bx bx-x" : "bx bx-edit";
+    buttonClass.value = newVal ? "bx bx-x" : "bx bx-edit-alt";
 });
 
 const toggleText = () => {
     if (props.isToggleEnabled) {
-        buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
+        buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
     }
 };
 const resetButton = () => {
-    buttonClass.value = "bx bx-edit";
+    buttonClass.value = "bx bx-edit-alt";
 };
 
 

src/components/input/FormSelect.vue

@@ -2,7 +2,7 @@
     <div class="mb-2" :class="isRow ? 'row' : ''">
         <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
             {{ title }}
-            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
+            <span v-if="isEssential" class="link-danger">*</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 } : {}" @blur="$emit('blur')">

src/components/vacation/ProfileList.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="card-body d-flex justify-content-center m-n5">
-        <ul class="list-unstyled profile-list">
+        <ul class="profile-list">
             <li
                 v-for="(user, index) in sortedUserList"
                 :key="index"
-                :class="{ disabled: user.disabled }"
+                class="profile-item"
+                :class="{ newRow: (index + 1) % 4 === 0 }"
                 @click="$emit('profileClick', user)"
                 data-bs-placement="top"
                 :aria-label="user.MEMBERSEQ"
@@ -91,20 +92,20 @@ const showImage = (event) => (event.target.style.visibility = "visible");
 const profileSize = computed(() => {
 const totalUsers = userList.value.length;
 
-if (windowWidth.value >= 1650) {
+if (windowWidth.value >= 1850) {
-    if (totalUsers <= 10) return "60px";
+    if (totalUsers <= 10) return "80px";
-    if (totalUsers <= 15) return "53px";
+    if (totalUsers <= 15) return "60px";
     return "45px";
-} else if (windowWidth.value >= 1400) {
+} else if (windowWidth.value >= 1500) {
+    if (totalUsers <= 10) return "60px";
+    if (totalUsers <= 15) return "40px";
+    return "30px";
+} else if (windowWidth.value >= 900) {
     if (totalUsers <= 10) return "48px";
     if (totalUsers <= 15) return "30px";
     return "20px";
-} else if (windowWidth.value >= 1024) {
-    if (totalUsers <= 10) return "40px";
-    if (totalUsers <= 15) return "30px";
-    return "20px";
 } else {
-    return "30px";
+    return "35px";
 }
 });
 

src/components/wordDict/DictWrite.vue

@@ -11,7 +11,7 @@
                     @change="onChange"
                     :value="formValue"
                     :disabled="isDisabled"
-                    :isEssential="false"
+                    :is-essential="false"
                 />
             </div>
             <div class="col-2 btn-margin" v-if="!isDisabled">

src/views/wordDict/wordDict.vue

@@ -2,12 +2,7 @@
     <div class="container-xxl flex-grow-1 container-p-y">
         <div >
             <!-- 타이틀, 검색 -->
-            <div class="row">
+            <SearchBar @update:data="search"/>
-                <div class="col-12 col-md-6">
-                    <h5 class="mb-0 title"></h5>
-                </div>
-                    <SearchBar @update:data="search"/>
-            </div>
             <!-- 단어 갯수, 작성하기 -->
             <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
             <!-- ㄱ ㄴ ㄷ ㄹ -->
@@ -35,7 +30,7 @@
                     :key="item.WRDDICSEQ"
                     :item="item"
                     v-model:cateList="cateList"
-                    @refreshWordList="getwordList"
+                    @refreshWordList="refreshWordList"
                     @updateChecked="updateCheckedItems"
                 />
             </ul>
@@ -108,11 +103,14 @@
 
     // 데이터 로드
     onMounted(() => {
-        //getwordList();
         getIndex();
         writeStore.closeAll();
     });
 
+    const refreshWordList = () => {
+    getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
+    };
+
     //용어 목록
     const getwordList = (searchKeyword='', indexKeyword='', category='') => {
         axios.get('worddict/getWordList',{