12-5. 좋아요 UI 구현하기

API 준비도, 상태관리 준비도 끝났으니, 이제 유저인터페이스를 구현 할 차례입니다. 우리는 PostFooter 라는 컴포넌트를 만들어서 좋아요 상태와, 덧글의 갯수를 보여주도록 하겠습니다.

PostFooter 는 위와 같이 아이콘을 보여주게 됩니다. 이 아이콘은 react-icons 모듈을 설치하고, 해당 패키지에서 불러와서 사용하도록 하겠습니다.

$ yarn add react-icons

src/components/Shared/PostList/PostFooter.js

import React from 'react';
import styled from 'styled-components';
import oc from 'open-color';

import HeartIcon from 'react-icons/lib/go/heart';
import CommentIcon from 'react-icons/lib/io/chatbubble';

// 테두리, 패딩을 설정하고 내부의 svg 와 span 스타일을 설정해줌
const Wrapper = styled.div`
    padding: 1rem;
    border-top: 1px solid ${oc.gray[1]};
    display: flex;
    color: ${oc.gray[5]};
    svg {
        font-size: 1.75rem;
        cursor: pointer;
    }
    span {
        margin-left: 0.25rem;
        font-size: 0.8rem;
        padding-bottom: 0.25rem;
    }
`;

// 좋아요
const Likes = styled.div`
    display: flex;
    align-items: center;
    svg {
        &:hover {
            color: ${oc.gray[6]};
        }
        &:active {
            color: ${oc.pink[6]};
        }
    }
    ${props=>props.active && `
        svg {
            color: ${oc.pink[6]};
            &:hover {
                color: ${oc.pink[5]};
            }
        }
    `}
`;

// 덧글, 우측정렬됨
const Comments = styled.div`
    margin-left: auto;
    display: flex;
    align-items: center;
    svg {
        &:hover {
            color: ${oc.gray[6]};
        }
        &:active {
            color: ${oc.cyan[6]};
        }
    }
`;

const PostFooter = ({liked, likesCount=0, comments=[], onToggleLike, onCommentClick}) => (
    <Wrapper>
        <Likes active={liked}>
            <HeartIcon/>
            <span>좋아요 {likesCount}개</span>
        </Likes>
        <Comments>
            <CommentIcon/>
            <span>덧글 {comments.length}개</span>
        </Comments>
    </Wrapper>
);

export default PostFooter;

이제 이 컴포넌트를 Post 컴포넌트에서 불러와서 Content 컴포넌트 하단에 렌더링해보세요.

src/components/Shared/PostList/Post.js

(...)

import PostFooter from './PostFooter';

(...)

const Post = ({post}) =>{
    const {
        count,
        username,
        content,
        comments,
        likesCount,
        createdAt
    } = post.toJS();

    return (
        <Wrapper>
            <PostHead>
                <UserThumbnail image={`/api/users/${username}/thumbnail`}/>
                <Username>{username}</Username>
                <Count>#{count}번째 생각</Count>
                <Time><TimeAgo date={createdAt} formatter={formatter}/></Time>
            </PostHead>
            <Content>
                {content}
            </Content>
            <PostFooter/>
        </Wrapper>
    )
}

export default Post;

하단에 이렇게 좋아요와 덧글 버튼이 나타났나요?