fix: 소식 페이지 아이템 프로필 이미지 수정

depromeet · Aug 28, 2024 · 64cab28 · 64cab28
1 parent 27254da
commit 64cab28
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/features/news/components/molecules/news-item-wrapper.tsx b/features/news/components/molecules/news-item-wrapper.tsx
@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 
-import { DefaultProfileIcon, Image } from '@/components/atoms';
+import { DefaultProfileIcon } from '@/components/atoms';
+import { ProfileImage } from '@/components/molecules';
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { convertTimeToElapsedTime, getFormatDate } from '@/utils';
@@ -10,7 +11,7 @@ import { CheerUpButton } from '../atoms';
 export interface NewsItemWrapperProps {
   memberId: number;
   isRecentNews: boolean;
-  profileUrl?: string;
+  memberProfileUrl?: string;
   memberNickname: string;
   recordAt: string;
   createdAt: string;
@@ -19,7 +20,7 @@ export interface NewsItemWrapperProps {
 
 export const NewsItemWrapper = ({
   isRecentNews,
-  profileUrl,
+  memberProfileUrl,
   memberNickname,
   recordAt,
   createdAt,
@@ -32,8 +33,16 @@ export const NewsItemWrapper = ({
       <div className={userInfoStyles}>
         <div className={userProfileImageWrapperStyles}>
           {isRecentNews && <div className={newMarkStyles} />}
-          {profileUrl ? (
-            <Image src={profileUrl} alt="user profile image" />
+          {memberProfileUrl ? (
+            <ProfileImage
+              src={memberProfileUrl}
+              alt="user profile image"
+              width={40}
+              height={40}
+              style={{
+                objectFit: 'cover',
+              }}
+            />
           ) : (
             <DefaultProfileIcon width={40} height={40} />
           )}
@@ -69,7 +78,13 @@ const userInfoStyles = flex({
   alignItems: 'center',
 });
 
-const userProfileImageWrapperStyles = css({ width: '40px', height: '40px' });
+const userProfileImageWrapperStyles = flex({
+  width: '40px',
+  height: '40px',
+  align: 'stretch',
+  rounded: 'full',
+  overflow: 'hidden',
+});
 
 const newMarkStyles = css({
   position: 'absolute',

diff --git a/features/news/components/organisms/news-list.tsx b/features/news/components/organisms/news-list.tsx
@@ -75,6 +75,7 @@ const getPropsObjects = (content: NewsContent) => {
   const {
     memberId,
     memberNickname,
+    memberProfileUrl,
     createdAt,
     isRecentNews,
     memoryId,
@@ -93,6 +94,7 @@ const getPropsObjects = (content: NewsContent) => {
   const wrapperProps: NewsItemWrapperProps = {
     memberId,
     memberNickname,
+    memberProfileUrl,
     createdAt,
     isRecentNews,
     recordAt,