SubInfo 컴포넌트는 hasMarginTop 값이 true이면 상단 여백을 주고, 그렇지 않으면 여백이 없습니다. 그리고 username과 publishedDate를 props로 받아 와서 보여 주도록 설정했습니다.

다음으로 Tags 컴포넌트를 만듭니다.

components/commons/Tags.js

import React from 'react';
import styled from 'styled-components';
import palette from '../../lib/styles/palette';
import { Link } from 'react-router-dom';

const TagsBlock = styled.div`
  margin-top: 0.5rem;
  .tag {
    display: inline-block;
    color: ${palette.cyan[7]};
    text-decoration: none;
    margin-right: 0.5rem;
    &:hover {
      color: ${palette.cyan[6]};
    }
  }
`;

const Tags = ({ tags }) => {
  return (
    <TagsBlock>
      {tags.map(tag => (
        <Link className="tag" to={`/?tag=${tag}`} key={tag}>
          #{tag}
        </Link>
      ))}
    </TagsBlock>
  );
};

export default Tags;

---