프로필 이미지 삭제 직후 렌더링이 안되는 문제 해결

frontend/components/layout/ProfileModal.tsx

@@ -101,17 +101,21 @@ export function ProfileModal({
             {/* 프로필 사진 섹션 */}
             <div className="flex flex-col items-center space-y-4">
               <div className="relative">
-                <Avatar className="h-24 w-24">
-                  {selectedImage ? (
-                    <AvatarImage src={selectedImage} alt="프로필 사진 미리보기" />
-                  ) : user?.photo ? (
-                    <AvatarImage src={user.photo} alt="기존 프로필 사진" />
+                <div className="relative flex h-24 w-24 shrink-0 overflow-hidden rounded-full">
+                  {selectedImage && selectedImage.trim() !== "" ? (
+                    <img
+                      src={selectedImage}
+                      alt="프로필 사진 미리보기"
+                      className="aspect-square h-full w-full object-cover"
+                    />
                   ) : (
-                    <AvatarFallback className="text-lg">{formData.userName?.substring(0, 1) || "U"}</AvatarFallback>
+                    <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-2xl font-semibold text-slate-700">
+                      {formData.userName?.substring(0, 1)?.toUpperCase() || "U"}
+                    </div>
                   )}
-                </Avatar>
+                </div>
 
-                {(selectedImage || user?.photo) && (
+                {selectedImage && selectedImage.trim() !== "" ? (
                   <Button
                     type="button"
                     variant="destructive"
@@ -121,7 +125,7 @@ export function ProfileModal({
                   >
                     <X className="h-3 w-3" />
                   </Button>
-                )}
+                ) : null}
               </div>
 
               <div className="flex gap-2">