휴가 왕관 아이콘

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,7 +9,13 @@
             data-bs-placement="top"
             :aria-label="user.MEMBERSEQ"
         >
-                <div class="ratio ratio-1x1 mb-0 profile-list">
+            <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)"
@@ -25,7 +30,6 @@
             </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>