이 컴포넌트에 사용된 SubInfo 컴포넌트와 Tags 컴포넌트는 PostViewer에서 사용한 코드와 같습니다. 한 가지 차이점이라면, SubInfo 컴포넌트의 경우 margin-top이 없다는 것입니다.

이렇게 똑같은 코드를 두 번 선언하는 대신, SubInfo 컴포넌트와 Tags 컴포넌트를 common 디렉터리에 따로 분리시켜서 재사용해 볼까요? 그리고 분리시킬 때 계정명이 나타나는 부분과 각 태그가 나타나는 부분에 Link를 사용하여 클릭 시 이동할 주소를 설정해 주겠습니다.

먼저 SubInfo를 분리시킵니다.

components/common/SubInfo.js

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

const SubInfoBlock = styled.div`
  ${props =>
    props.hasMarginTop &&
    css`
      margin-top: 1rem;
    `}
  color: ${palette.gray[6]};

  /* span 사이에 가운뎃점 문자 보여 주기 */
  span + span:before {
    color: ${palette.gray[4]};
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    content: '\\B7'; /* 가운뎃점 문자 */
  }
`;

const SubInfo = ({ username, publishedDate, hasMarginTop }) => {
  return (
    <SubInfoBlock hasMarginTop={hasMarginTop}>
      <span>
        <b>
          <Link to={`/@${username}`}>{username}</Link>
        </b>
      </span>
      <span>{new Date(publishedDate).toLocaleDateString()}</span>
    </SubInfoBlock>
  );
};

export default SubInfo;

---