From c30ccea258e7da18b5c2e73a8e25637d0b7c8523 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 10 Mar 2025 15:38:12 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                   | 63 ++++++++++++++++++-------
 src/components/vacation/ProfileList.vue | 23 ++++-----
 2 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index 8127a4c..6eb5920 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -106,13 +106,14 @@ cursor: not-allowed !important;
     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;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1),
+              0px 4px 0px rgba(0, 0, 0, 0);
+  max-width: 500px;
+  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: 10px;
+  gap: 15px;
   padding: 0;
-  margin-left: 12%;
+  list-style: none;
+  justify-content: flex-start;
+  cursor: pointer;
 }
-.profile-img {
-  transition: all 0.2s ease-in-out;
+.profile-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  width: calc(33.33% - 10px);
 }
 
 /* 오전/오후반차,저장버튼 */
 /* 버튼 기본 스타일 */
 .vac-btn {
-  width: 50px;
-  height: 50px;
+  width: 60px;
+  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;
-  height: 50px;
+  width: 60px;
+  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 {
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 69262d7..b5d5007 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/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 (totalUsers <= 10) return "60px";
-    if (totalUsers <= 15) return "53px";
+if (windowWidth.value >= 1850) {
+    if (totalUsers <= 10) return "80px";
+    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";
 }
 });