실제에는 회색 선이 없습니다.
적용 코드
<InlineProfileInfo img="./assets/post-img-example.png" name="채팅" desc="메시지가 보인느 공간입니다." state="chat" />
<InlineProfileInfo name="팔로우 정보" state="follow" />
<InlineProfileInfo img="이미지경로" ame="팔로우" desc={'사용자가 설정한 프로필 설명이 보이는 공간입니다.'} state="follow" />
<InlineProfileInfo name="포스트 작성자" desc="@user" state="post" />
<InlineProfileInfo name="댓글" desc="5분전" state="comment" />
JavaScript
복사
속성 | 설명 |
img | - 프로필 이미지 경로 |
name | 사용자 계정 이름 |
desc | 계정에 대한 세부 정보 |
state | 상태를 입력해주세요
- chat
- follow
- post
- comment |
컴포넌트 구현 코드
export default function InlineProfileInfo({ img, name, desc, state }) {
const check = state.toUpperCase();
let size, gap, line;
switch (check) {
case 'CHAT':
case 'POST':
size = '42px';
gap = '12px';
line = '4px';
break;
case 'COMMENT':
size = '36px';
gap = '12px';
line = '6px';
break;
case 'FOLLOW':
size = '50px';
gap = '12px';
line = '6px';
break;
default:
size = '42px';
gap = '12px';
line = '6px';
}
return (
<ProfileInfo gap={gap}>
<ProfileImg src={img} alt="" size={size}></ProfileImg>
<ProfileText line={line} check={check}>
<strong>{name}</strong>
<p>{desc}</p>
</ProfileText>
</ProfileInfo>
);
}
JavaScript
복사
