From dabeac68c15e6aaecdf9e2c2d0df8fd884fb9738 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 13 Mar 2025 18:57:11 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B5=EB=AA=85=EC=9D=BC=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=20=EC=9D=B5=EB=AA=85=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js                  | 18 ++++++++++++++++--
 src/components/board/BoardProfile.vue | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/common/common.js b/src/common/common.js
index 5bf3125..cf4dfc2 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -124,12 +124,26 @@ const common = {
      * @param { String } profileImg
      * @returns
      */
-    getProfileImage(profileImg) {
-        let profileImgUrl = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
+    getProfileImage(profileImg, isAnonymous = false) {
+        console.log('profileImg: ', profileImg);
+        const defaultProfileImg = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
+        const anonymousImg = '/img/avatars/default-Profile.jpg'; // 익명 이미지
+        let profileImgUrl = isAnonymous ? anonymousImg : defaultProfileImg;
+        console.log('profileImgUrl: ', profileImgUrl);
         const UserProfile = `${import.meta.env.VITE_SERVER}upload/img/profile/${profileImg}`;
 
         return !profileImg || profileImg === '' ? profileImgUrl : UserProfile;
     },
+
+    setDefaultImage(event, deafultImg = '/img/icons/icon.png') {
+        console.log('deafultImg: ', deafultImg);
+        console.log('event: ', event);
+        return (event.target.src = deafultImg);
+    },
+    showImage(event) {
+        console.log('event: ', event);
+        return (event.target.style.visibility = 'visible');
+    },
 };
 
 export default {
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index c9c5306..0bdee71 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -2,7 +2,13 @@
     <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
             <div class="avatar me-2">
-                <img :src="getProfileImage(profileImg)" alt="Avatar" class="rounded-circle" />
+                <img
+                    :src="getProfileImage(profileImg)"
+                    alt="user"
+                    class="rounded-circle"
+                    @error="setDefaultImage($event)"
+                    @load="showImage($event)"
+                />
             </div>
 
             <div class="me-2">
@@ -120,6 +126,14 @@
 
     // 프로필 이미지 경로 설정
     const getProfileImage = profileImg => {
-        return $common.getProfileImage(profileImg);
+        return $common.getProfileImage(profileImg, true);
+    };
+
+    const setDefaultImage = e => {
+        return $common.setDefaultImage(e);
+    };
+
+    const showImage = e => {
+        return $common.showImage(e);
     };
 </script>