refactor: 이미지 대체텍스트가 overflow되어 레이아웃을 벗어나는 이슈 개선

woowacourse-teams · Aug 25, 2024 · 66f7c75 · 66f7c75
1 parent 7d1fd0f
commit 66f7c75
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/frontend/src/components/@common/ProfileImage/ProfileImage.tsx b/frontend/src/components/@common/ProfileImage/ProfileImage.tsx
@@ -15,7 +15,8 @@ function ProfileImage({ name = '셀럽', imageUrl, size, boxShadow = false, ...p
 export default ProfileImage;
 
 const StyledProfile = styled.img<{ size: string; boxShadow: boolean }>`
-  ${paintSkeleton}
+  display: inline-block;
+
   width: ${({ size }) => size || 'auto'};
   height: ${({ size }) => size || 'auto'};
 
@@ -25,6 +26,10 @@ const StyledProfile = styled.img<{ size: string; boxShadow: boolean }>`
 
   object-fit: cover;
 
+  line-height: ${({ size }) => size || 'auto'};
+  text-align: center;
+
+  ${paintSkeleton}
   ${({ boxShadow }) =>
     boxShadow &&
     css`