휴가 왕관 아이콘

src/components/button/HalfDayButtons.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="row gx-2 mb-4">
+    <div class="row gx-2 mb-10 mt-1">
         <div class="col-3">
             <div class="ratio ratio-1x1">
                 <!-- 오전 반차 버튼 -->

src/components/vacation/ProfileList.vue

@@ -1,6 +1,5 @@
 <template>
-    <div class="">
-    <ul class="row gx-2 mb-0 list-inline">
+    <ul class="row gx-2 mb-0 list-inline ">
         <li
             v-for="(user, index) in sortedUserList"
             :key="index"
@@ -10,22 +9,27 @@
             data-bs-placement="top"
             :aria-label="user.MEMBERSEQ"
         >
-                <div class="ratio ratio-1x1 mb-0 profile-list">
-                    <img
-                        class="rounded-circle profile-img"
-                        :src="getUserProfileImage(user.MEMBERPRF)"
-                        alt="user"
-                        :style="getDynamicStyle(user)"
-                        @error="setDefaultImage"
-                        @load="showImage"
-                    />
-                </div>
-                <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
-                    {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
-                </span>
+            <div class="ratio ratio-1x1 mb-0 profile-list position-relative">
+                <img
+                    v-if="user.MEMBERSEQ === employeeId"
+                    src="/img/icons/Crown.png"
+                    alt="Crown"
+                    class="top-0 start-50 translate-middle crown-icon"
+                />
+                <img
+                    class="rounded-circle profile-img"
+                    :src="getUserProfileImage(user.MEMBERPRF)"
+                    alt="user"
+                    :style="getDynamicStyle(user)"
+                    @error="setDefaultImage"
+                    @load="showImage"
+                />
+            </div>
+            <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
+                {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
+            </span>
         </li>
     </ul>
-    </div>
 </template>
 
 <script setup>
@@ -95,4 +99,9 @@ borderStyle: "solid",
 </script>
 
 <style scoped>
+.crown-icon {
+    width: 80%;
+    height: 60%;
+    z-index: 10;
+}
 </style>