14.6.1 카테고리 선택 UI 만들기

    먼저 components 디렉터리에 Categories.js 컴포넌트 파일을 생성하여 다음 코드를 작성하세요.

    components/Categories.js

    import React from 'react';
    import styled from 'styled-components';
     
    const categories = [
      {
        name: 'all',
        text: '전체보기'
      },
      {
        name: 'business',
        text: '비즈니스'
      },
      {
        name: 'entertainment',
        text: '엔터테인먼트'
      },
      {
        name: 'health',
        text: '건강'
      },
      {
        name: 'science',
        text: '과학'
      },
      {
        name: 'sports',
        text: '스포츠'
      },
      {
        name: 'technology',
        text: '기술'
      }
    ];
     
    const CategoriesBlock = styled.div`
      display: flex;
      padding: 1rem;
      width: 768px;
      margin: 0 auto;
      @media screen and (max-width: 768px) {
        width: 100%;
        overflow-x: auto;
      }
    `;
     
    const Category = styled.div`
      font-size: 1.125rem;
      cursor: pointer;
      white-space: pre;
      text-decoration: none;
      color: inherit;
      padding-bottom: 0.25rem;
     
      &:hover {
        color: #495057;
      }
     
      & + & {
        margin-left: 1rem;
      }
    `;
    const Categories = () => {
      return (
        <CategoriesBlock>
          {categories.map(c => (
            <Category key={c.name}>{c.text}</Category>
          ))}
        </CategoriesBlock>
      );
    };
     
    export default Categories;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.