적용 코드
<ChatHeader text={'회원이름'} isMore={true} />
JavaScript
복사
속성 | 설명 |
text | 회원 이름 |
isMore | 더보기 버튼 유무 true/false |
onClick | 더보기 버튼 클릭 이벤트 |
컴포넌트 구현 코드
export default function ChatHeader({ text, isMore, onClick }) {
const navigate = useNavigate();
return (
<ChatHeaderBox text={text} isMore={isMore}>
<Section>
<button
onClick={() => {
navigate(-1);
}}
>
<img src={`/assets/icon/icon-arrow-left.png`} alt="" />
</button>
<h2>{text}</h2>
{isMore ? (
<button className="more" onClick={onClick}>
<img src={`/assets/icon/icon-more-vertical.png`} alt="" />
</button>
) : (
<></>
)}
</Section>
</ChatHeaderBox>
);
}
JavaScript
복사
