적용 코드
<HomePost
like="123456789"
comment="1234"
imgList={[
'/assets/chat-exapmle.png',
'/assets/post-img-example.png',
'/assets/post-img-example.png',
]}
/>
JavaScript
복사
속성 | 설명 |
like | 좋아요 수 |
comment | 댓글 수 |
imgList | 이미지 리스트
* 이미지가 있을 때만 props 값을 넘겨주면 됩니다. |
컴포넌트 구현 코드
export default function HomePost({ like, comment, imgList }) {
const likeCnt = changeUnit(like);
const commentCnt = changeUnit(comment);
let swipeIndex = 0;
const handleSwipe = (e) => {
// 이미지 스와이프 이벤트
e.preventDefault();
swipeIndex += 1;
if (swipeIndex > 2) {
swipeIndex = 0;
}
const position = -100 * swipeIndex;
const changeList = e.currentTarget.parentElement.childNodes;
changeList.forEach((el) => {
el.style.transform = `translateX(${position}%)`;
});
};
return (
<>
<PostContainer>
<h3 className="sr-only">게시글 상세 정보</h3>
<InlineProfileInfo name="애월읍 위니브 감귤농장" desc="@ weniv_Mandarin" state="post" />
<PostContents>
<p>
옷을 인생을 그러므로 없으면 것은 이상은 것은 우리의 위하여, 뿐이다. 이상의 청춘의 뼈 따뜻한
그들의 그와 약동하다. 대고, 못할 넣는 풍부하게 뛰노는 인생의 힘있다.
</p>
{imgList && (
<>
<ImgContainer>
{imgList.map((el, idx) => (
<ImgItem key={idx} onClick={handleSwipe}>
<img src={el} alt="" />
</ImgItem>
))}
</ImgContainer>
{imgList.length > 1 && (
<SwipeContainer>
{imgList.map((el, idx) => (
<SwipeItem key={idx} on={idx ? null : 'on'}></SwipeItem>
))}
</SwipeContainer>
)}
</>
)}
</PostContents>
<PostReaction>
<button>
<img src={'/assets/icon/icon-heart.png'} alt="좋아요" />
{likeCnt}
</button>
<button>
<img src={'/assets/icon/icon-message-circle.png'} alt="댓글 입력창으로 이동" /> {commentCnt}
</button>
</PostReaction>
<PostDate>2020년 10월 21일</PostDate>
<MoreBtn type="button">
<span className="sr-only">더보기</span>
</MoreBtn>
</PostContainer>
</>
);
}
JavaScript
복사
