Tags 컴포넌트에서는 tags 값을 props로 받아 와서 태그 목록을 렌더링해 줍니다. 각 태그 항목을 Link 컴포넌트로 작성했으며, 클릭했을 때 이동 경로는 /?tag=태그로 설정했습니다.

SubInfo 컴포넌트와 Tags 컴포넌트를 다 만들었으면, PostList에서 기존 SubInfo와 Tags를 지우고 이번에 새로 만든 컴포넌트를 불러와서 사용하세요.

components/posts/PostList.js

import React from 'react';
import styled from 'styled-components';
import Responsive from '../common/Responsive';
import Button from '../common/Button';
import palette from '../../lib/styles/palette';
import SubInfo from '../common/SubInfo';
import Tags from '../common/Tags';

(...)

const PostItem = () => {
  return (
    <PostItemBlock>
      <h2>제목</h2>
      <SubInfo username="username" publishedDate={new Date()} />
      <Tags tags={['태그1', '태그2', '태그3']} />
      <p>포스트 내용의 일부분..</p>
    </PostItemBlock>
  );
};

(...)

---