안뇽하세요 강사님

안녕하세요 !!!

Media가 없어진걸 알려주셔서 너무 감사합니다 !!!
우선 Media가 쓰인곳이 Message.js와 MessageHeader.js 두곳이네요 !

먼저 Message.js에서는

<div style={{ marginBottom: '3px', display:'flex' }}>
<img
style={{ borderRadius: '10px' }}
width={48}
height={48}
className="mr-3"
src={message.user.image}
alt={message.user.name}
/>
<div style={{
backgroundColor: isMessageMine(message, user) && "#ECECEC"
}}>
<h6>{message.user.name}{" "}
<span style={{ fontSize: '10px', color: 'gray' }}>
{timeFromNow(message.timestamp)}
</span>
</h6>
{isImage(message) ?
<img style={{ maxWidth: '300px' }} alt="이미지" src={message.image} />
:
<p>
{message.content}
</p>
}
</div>
</div>

이렇게 바꿔주세요 !!!

그리고 MessageHeader에서는

const renderUserPosts = (userPosts) =>
Object.entries(userPosts)
.sort((a, b) => b[1].count - a[1].count)
.map(([key, val], i) => (
<div key={i} style={{ display: 'flex'}}>
<img
style={{ borderRadius: 25 }}
width={48}
height={48}
className="mr-3"
src={val.image}
alt={val.name}
/>
<div>
<h6>{key}</h6>
<p>
{val.count} 개
</p>
</div>
</div>
))

이렇게 바꿔주시면 감사하겠습니다 !

Media를 div 태그로 바꿔주고 display:'flex' 스타일을 주었습니다 !

감사합니다.

인프런 커뮤니티 질문&답변