From e4455e94e562edfc1213de23e2f10cd4ff752d3e Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 11 Feb 2025 16:18:05 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=82=AC=EC=9B=90?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vacation/ProfileList.vue   | 103 +++++++++++++++-------
 src/views/vacation/VacationManagement.vue |  14 ++-
 2 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 32e7ce0..b7947a9 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -12,7 +12,7 @@
             @click="toggleDisable(index)"
             data-bs-toggle="tooltip"
             data-popup="tooltip-custom"
-            data-bs-placement="top"
+            data-bs-placement="bottom"
             :aria-label="user.MEMBERSEQ"
             :data-bs-original-title="getTooltipTitle(user)"
           >
@@ -41,11 +41,10 @@
   const emit = defineEmits();
   const userStore = useUserStore();
   const userList = ref([]);
-  const userListContainer = ref(null); // 프로필 목록 컨테이너 참조
+  const userListContainer = ref(null);
   const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
-  const defaultProfile = "/img/icons/icon.png"; // 기본 이미지 경로
+  const defaultProfile = "/img/icons/icon.png";
 
-  // ✅ 사용자 목록 호출
   onMounted(async () => {
     await userStore.fetchUserList();
     userList.value = userStore.userList;
@@ -57,77 +56,78 @@
     });
   });
 
-  // ✅ 프로필 이미지 경로 반환
   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 scrollAmount = 9 * 100;
+
   const scrollLeft = () => {
-    userListContainer.value.scrollBy({ left: -userListContainer.value.clientWidth, behavior: "smooth" });
+    userListContainer.value.scrollBy({ left: -scrollAmount, behavior: "smooth" });
   };
 
   const scrollRight = () => {
-    userListContainer.value.scrollBy({ left: userListContainer.value.clientWidth, behavior: "smooth" });
+    userListContainer.value.scrollBy({ left: scrollAmount, behavior: "smooth" });
   };
   </script>
 
   <style scoped>
-  /* ✅ 전체 프로필 목록 감싸는 영역 */
+  /* ✅ 프로필 리스트 컨테이너 */
   .users-list-wrapper {
+    margin: auto;
     position: relative;
     width: 100%;
-    max-width: 1250px;
-    margin: auto;
+    max-width: 990px;
+    margin: 0.2 auto; /* 중앙 정렬 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  /* ✅ 스크롤 가능하도록 컨테이너 설정 */
+  /* ✅ 프로필 리스트 */
   .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에서 스크롤바 숨김 */
+    align-items: center;
+    padding: 0px;
+    scrollbar-width: none;
+    padding-bottom: 50px;
+    padding-top: 30px;
+    left: 10;
   }
 
   /* ✅ 스크롤바 숨기기 */
   .users-list-container::-webkit-scrollbar {
-    display: none; /* Chrome, Safari에서 스크롤바 숨김 */
+    display: none;
   }
 
   /* ✅ 프로필 목록 */
   .users-list {
     display: flex;
-    flex-wrap: wrap;
-    gap: 20px; /* 프로필 간격 */
+    gap: 91px; /* 기본 간격 */
     padding: 10px;
   }
 
   /* ✅ 프로필 이미지 스타일 */
   .user-avatar {
     border: 3px solid;
-    width: 100px;
-    height: 100px;
+    width: 110px;
+    height: 110px;
     object-fit: cover;
     background-color: white;
     transition: transform 0.2s ease-in-out;
@@ -138,15 +138,15 @@
     transform: scale(1.1);
   }
 
-  /* ✅ 툴팁 위치 조정 */
+  /* ✅ 툴팁 위치 조정 (하단 & 오른쪽 정렬) */
   .tooltip-custom {
     position: absolute;
-    top: -30px;
-    left: 50%;
+    top: 110%; /* 아래쪽으로 이동 */
+    left: 60%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.75);
     color: white;
-    padding: 5px 8px;
+    padding: 5px 10px;
     font-size: 12px;
     border-radius: 5px;
     white-space: nowrap;
@@ -160,9 +160,6 @@
 
   /* ✅ 좌우 스크롤 버튼 */
   .scroll-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
     background-color: rgba(0, 0, 0, 0.5);
     color: white;
     border: none;
@@ -173,15 +170,53 @@
     transition: background 0.3s ease;
   }
 
+  /* ✅ 좌우 버튼 위치 */
   .scroll-btn.left {
-    left: -40px;
+    left: 0;
+    margin-top: 20px;
   }
 
   .scroll-btn.right {
-    right: -40px;
+    right: 0;
+    margin-top: 20px;
   }
 
   .scroll-btn:hover {
     background-color: rgba(0, 0, 0, 0.8);
   }
+
+  /* ✅ 반응형 처리 */
+  @media (max-width: 1024px) {
+    .users-list {
+      gap: 40px; /* 좁은 화면에서는 간격 축소 */
+    }
+    .user-avatar {
+      width: 80px;
+      height: 80px;
+    }
+    .scroll-btn {
+      padding: 8px 12px;
+      font-size: 18px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .users-list {
+      gap: 15px;
+    }
+    .user-avatar {
+      width: 70px;
+      height: 70px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .users-list {
+      gap: 40px;
+    }
+    .user-avatar {
+      width: 60px;
+      height: 60px;
+    }
+  }
   </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 47cc56c..f267dc0 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -5,23 +5,19 @@
             <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>