diff --git a/features/news/components/molecules/news-item-wrapper.tsx b/features/news/components/molecules/news-item-wrapper.tsx index 94d9fd66..15f80e35 100644 --- 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 = ({
{isRecentNews &&
} - {profileUrl ? ( - user profile image + {memberProfileUrl ? ( + ) : ( )} @@ -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 index 9a7282f5..73f120de 100644 --- 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,