From cb67307a6235dc5276623fb9346f4ea8355773ef Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 7 Feb 2025 14:58:14 +0900
Subject: [PATCH] =?UTF-8?q?user=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wordDict/DictCard.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index bf6eb05..80f3385 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -11,7 +11,12 @@
         <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
             <div class="d-flex flex-wrap align-items-center mb-50">
                 <div class="avatar avatar-sm me-2">
-                    <img :src="getProfileImage(item.author.profileImage)" alt="최초 작성자" class="rounded-circle">
+                    <img
+                        class="rounded-circle user-avatar"
+                        :src="getProfileImage(item.author.profileImage)"
+                        alt="최초 작성자"
+                        :style="{ borderColor: item.author.color}"
+                    />
                 </div>
                 <div>
                     <p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
@@ -21,7 +26,12 @@
         <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
             <div class="d-flex flex-wrap align-items-center mb-50">
                 <div class="avatar avatar-sm me-2">
-                    <img :src="getProfileImage(item.lastEditor.profileImage)" alt="최근 작성자" class="rounded-circle">
+                    <img
+                        class="rounded-circle user-avatar"
+                        :src="getProfileImage(item.lastEditor.profileImage)"
+                        alt="최근 작성자"
+                        :style="{ borderColor: item.lastEditor.color}"
+                    />
                 </div>
                 <div>
                     <p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
@@ -42,7 +52,7 @@ const props = defineProps({
         required: true,
     },
 });
-
+console.log('item',props.item)
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 // 날짜
 const formatDate = (dateString) => new Date(dateString).toLocaleString();
@@ -50,3 +60,11 @@ const formatDate = (dateString) => new Date(dateString).toLocaleString();
 const getProfileImage = (imagePath) =>
 imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
 </script>
+
+<style scoped>
+/* 동그란 테두리 설정 */
+.user-avatar {
+border: 3px solid; /* 테두리 */
+padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
+}
+</style>