Merge branch 'style'

public/css/custom.css

@@ -108,7 +108,6 @@ cursor: not-allowed !important;
 .vac-modal-content {
   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;
@@ -229,21 +228,7 @@ cursor: not-allowed !important;
 /* 오전/오후반차,저장버튼 */
 /* 버튼 기본 스타일 */
 .vac-btn {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   transition: all 0.2sease-in-out;
-  display: inline-block;
-  font-weight: 400;
-  line-height: 1.53;
-  color: #697a8d;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
   border: 1px solid transparent;
 }
 /* 마우스를 올렸을 때 */
@@ -286,17 +271,9 @@ cursor: not-allowed !important;
 }
 /* 버튼 기본 (비활성화일 때 기본 녹색) */
 .vac-btn-success {
-  font-size: 24px;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   transition: all 0.2s ease-in-out;
   background-color: #871919 !important;
   color: white;
-  cursor: pointer;
   border: 1px solid transparent;
 }
 /* 버튼 활성화 */
@@ -309,7 +286,6 @@ cursor: not-allowed !important;
 }
 /* 버튼 비활성화 */
 .vac-btn-success.disabled {
-  border: 3px solid #e6e4e4; /* 붉은색 테두리 적용 */
   background-color: #bbb8b8 !important;
   color: white !important;
   cursor: not-allowed !important;

src/components/button/HalfDayButtons.vue

@@ -1,29 +1,32 @@
 <template>
-    <div class="menu gap-4 justify-content-center mt-5">
+    <div class="row gx-2 mb-4">
+        <div class="col-4">
+            <div class="ratio ratio-1x1">
             <!-- 오전 반차 버튼 -->
-        <button
-            class="vac-btn vac-btn-warning"
-            :class="{ active: halfDayType === 'AM' }"
-            @click="toggleHalfDay('AM')"
-        >
+            <button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'AM' }"
+                @click="toggleHalfDay('AM')">
                 <i class="bi bi-sun"></i>
             </button>
+            </div>
+        </div>
+        <div class="col-4">
+            <div class="ratio ratio-1x1">
             <!-- 오후 반차 버튼 -->
-        <button
-            class="vac-btn vac-btn-info"
-            :class="{ active: halfDayType === 'PM' }"
-            @click="toggleHalfDay('PM')"
-        >
+            <button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'PM' }"
+                @click="toggleHalfDay('PM')">
                 <i class="bi bi-moon"></i>
             </button>
-        <!-- 저장 버튼 -->
-        <div class="save-button-container">
-            <button class="vac-btn-success" @click="addVacationRequests"
+            </div>
+        </div>
+        <div class="col-4">
+            <div class="ratio ratio-1x1">
+            <button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center" @click="addVacationRequests"
                 :class="{ active: !isDisabled, disabled: isDisabled }">
                 ✔
             </button>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup>

src/components/vacation/ProfileList.vue

@@ -1,15 +1,16 @@
 <template>
-    <div class="card-body d-flex justify-content-center m-n5">
-        <ul class="profile-list">
+    <div class="">
+    <ul class="row gx-2 mb-2 list-inline">
         <li
             v-for="(user, index) in sortedUserList"
             :key="index"
-                class="profile-item"
+            class="col-4 mb-3"
             :class="{ newRow: (index + 1) % 4 === 0 }"
             @click="$emit('profileClick', user)"
             data-bs-placement="top"
             :aria-label="user.MEMBERSEQ"
         >
+                <div class="ratio ratio-1x1 mb-2">
                     <img
                         class="rounded-circle profile-img"
                         :src="getUserProfileImage(user.MEMBERPRF)"
@@ -18,6 +19,7 @@
                         @error="setDefaultImage"
                         @load="showImage"
                     />
+                </div>
                 <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
                     {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
                 </span>
@@ -110,9 +112,7 @@ if (windowWidth.value >= 1850) {
 });
 
 const getDynamicStyle = (user) => ({
-width: profileSize.value,
-height: profileSize.value,
-borderWidth: "4px",
+borderWidth: "2px",
 borderColor: user.usercolor || "#ccc",
 borderStyle: "solid",
 });

src/views/vacation/VacationManagement.vue

@@ -3,9 +3,10 @@
         <div class="card app-calendar-wrapper">
             <div class="row g-0">
                 <!-- Sidebar: 사이드바 영역 -->
-                <div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
-                    <div class="sidebar-content">
-                        <div class="sidebar-actions text-center my-3">
+                <div class="col-3 border-end text-center" id="app-calendar-sidebar">
+                    <div>
+
+                        <div class="card-body">
                             <HalfDayButtons
                             ref="halfDayButtonsRef"
                             @toggleHalfDay="toggleHalfDay"
@@ -13,11 +14,11 @@
                             :isDisabled="!hasChanges"
                             :selectedDate="selectedDate"
                             />
-                        </div>
                             <ProfileList
                             @profileClick="handleProfileClick"
                             :remainingVacationData="remainingVacationData"
                             />
+                        </div>
                         <VacationModal
                         v-if="isModalOpen"
                         :isOpen="isModalOpen"