From 7ba1a7aff3d81a5abee8a8197aa5f71719ac48f1 Mon Sep 17 00:00:00 2001
From: HWAN0218 <wwwrbnm121@gmail.com>
Date: Wed, 11 Feb 2026 05:34:16 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=B6=94=EA=B0=80,=20edit?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B3=B4=EB=8D=94=20=EC=88=98=EC=A0=95,?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B4=EB=94=A9=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../profile-img/ProfileImage.module.css       | 36 ++++++++++++-------
 src/components/profile-img/ProfileImage.tsx   | 30 ++++++++++------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/components/profile-img/ProfileImage.module.css b/src/components/profile-img/ProfileImage.module.css
index d509485..4bf30bc 100644
--- a/src/components/profile-img/ProfileImage.module.css
+++ b/src/components/profile-img/ProfileImage.module.css
@@ -45,7 +45,7 @@
   position: relative;
   overflow: hidden;
 
-  background: inherit;
+  background: transparent;
   border-radius: inherit;
 }
 
@@ -56,7 +56,7 @@
 /* border: breakpoint별 var로 대응 */
 .avatarBorder {
   border-style: solid;
-  border-color: #e2e8f0; 
+  border-color: #e2e8f0;
   border-width: var(--pi-border-base);
   box-sizing: border-box;
 }
@@ -74,13 +74,23 @@
   object-fit: contain;
 }
 
+.profileFallbackBg {
+  background: var(--color-background-tertiary, #e2e8f0);
+}
+
 /* radius */
+.r6 {
+  border-radius: 6px;
+}
 .r8 {
   border-radius: 8px;
 }
 .r12 {
   border-radius: 12px;
 }
+.r16 {
+  border-radius: 16px;
+}
 .r20 {
   border-radius: 20px;
 }
@@ -96,7 +106,7 @@
 
   background: var(--color-background-tertiary);
   border-radius: 50%;
-  border: none; 
+  border: none;
   padding: 0;
   cursor: pointer;
 
@@ -108,6 +118,16 @@
   justify-content: center;
 }
 
+@media (max-width: 767px) {
+  .editButton {
+    border: 1px solid var(--color-background-inverse);
+  }
+
+  .r32 {
+    border-radius: 20px;
+  }
+}
+
 /* 아이콘 표시 제어 */
 .pencilSmall {
   display: inline-flex;
@@ -131,12 +151,6 @@
   }
 }
 
-@media (max-width: 767px) {
-  .r32 {
-    border-radius: 20px;
-  }
-}
-
 /* md 이상 */
 @media (min-width: 768px) {
   .box {
@@ -155,9 +169,7 @@
     right: 0;
     width: 32px;
     height: 32px;
-
-    /* ✅ md 버전에서만 흰색 보더 */
-    border: 1px solid var(--color-background-inverse);
+    border: none;
   }
 
   .pencilSmall {
diff --git a/src/components/profile-img/ProfileImage.tsx b/src/components/profile-img/ProfileImage.tsx
index ce4daaf..7de3dd0 100644
--- a/src/components/profile-img/ProfileImage.tsx
+++ b/src/components/profile-img/ProfileImage.tsx
@@ -41,7 +41,7 @@ import TeamDefault from '@/assets/icons/img/img.svg';
 
 export type ProfileImageSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type ProfileImageVariant = 'profile' | 'team';
-export type ProfileImageRadius = 'r8' | 'r12' | 'r20' | 'r32';
+export type ProfileImageRadius = 'r6' | 'r8' | 'r12' | 'r16' | 'r20' | 'r32';
 
 type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
 type SizeSpec = { box: number; image: number };
@@ -75,8 +75,8 @@ const SIZE_PRESET: Record<ProfileImageSize, SizeSpec> = {
   xl: { box: 112, image: 100 },
   lg: { box: 78, image: 64 },
   md: { box: 40, image: 32 },
-  sm: { box: 32, image: 24 },
-  xs: { box: 24, image: 16 },
+  sm: { box: 28, image: 24 },
+  xs: { box: 20, image: 20 },
 };
 
 const BP_ORDER: Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl'];
@@ -171,7 +171,7 @@ export default function ProfileImage({
   size = 'md',
   responsiveSize,
   responsiveSpec,
-  radius = 'r12',
+  radius = 'r16',
   editable = false,
   showEditButton = true,
   clickToEdit,
@@ -211,7 +211,12 @@ export default function ProfileImage({
   const isErrored = !!currentSrcKey && erroredSrc === currentSrcKey;
 
   const effectiveSrc = isErrored ? fallback : imageSrc || fallback;
-  const usingFallback = isErrored || !imageSrc;
+
+  const isFallback = isErrored || !imageSrc;
+
+  const fitClass = isFallback ? styles.contain : styles.cover;
+
+  const shouldProfileFallbackBg = variant === 'profile' && isFallback;
 
   const shouldClickToEdit = clickToEdit ?? (editable && !showEditButton);
 
@@ -242,6 +247,7 @@ export default function ProfileImage({
       setErroredSrc(null);
 
       // local preview
+
       const localUrl = URL.createObjectURL(file);
       setPreviewUrl((prev) => {
         if (prev?.startsWith('blob:')) URL.revokeObjectURL(prev);
@@ -297,9 +303,13 @@ export default function ProfileImage({
         <div className={`${styles.box} ${styles[radius]}`}>
           <div className={`${styles.mask} ${styles[radius]}`}>
             <div
-              className={`${styles.avatar} ${styles[radius]} ${hasBorder ? styles.avatarBorder : ''} ${
-                editable && shouldClickToEdit ? styles.clickable : ''
-              }`}
+              className={[
+                styles.avatar,
+                styles[radius],
+                hasBorder ? styles.avatarBorder : '',
+                editable && shouldClickToEdit ? styles.clickable : '',
+                shouldProfileFallbackBg ? styles.profileFallbackBg : '', // ✅ CHANGED
+              ].join(' ')}
               onClick={handleAvatarClick}
               onKeyDown={handleKeyDown}
               role={editable && shouldClickToEdit ? 'button' : undefined}
@@ -311,9 +321,7 @@ export default function ProfileImage({
                 alt={alt}
                 fill
                 sizes={sizesAttr}
-                className={`${styles.img} ${styles[radius]} ${
-                  usingFallback ? styles.contain : styles.cover
-                }`}
+                className={`${styles.img} ${styles[radius]} ${fitClass}`}
                 priority={priority}
                 loading={priority ? 'eager' : 'lazy'}
                 onError={() => {