🎯 리뷰, 신간, 베스트셀러, 배너 등으로 메인 화면을 제작하고, 모바일 대응을 구현합니다.

📗 Today I Learned

React Slick

React에서 사용할 수 있는 슬라이더(캐러셀) 라이브러리입니다.

설치 방법

npm install react-slick slick-carousel

npm install -D @types/react-slick

• react-slick : React 슬라이더 라이브러리입니다.

• slick-carousel : 슬라이더가 제대로 동작하고 꾸며지도록 하기 위한 기본 스타일(CSS)을 포함하고 있느 의존성 패키지입니다. (반드시 설치 필요)

• @types/react-slick : TypeScript 환경에서 react-slick의 타입 체크 기능을 제공해주는 타입 전용 보조 패키지입니다.

🤔 의존성 패키지이지만 -D로 설치하지 않는 이유?

devDependencies는 보통 프로덕션 빌드에서는 제외되는데, slick-carousel은 실행 환경에서도 필요한 CSS를 제공하기 때문에 그냥 설치를 해야합니다.

기본 사용 예시

import React from "react";
import Slider from "react-slick";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}

• settings : 설정 객체입니다.

  • dots: true : 하단에 페이지 표시 점 표시

  • infinite: true : 마지막 슬라이드에서 처음으로 순환

  • speed: 500 : 슬라이드 넘어가는 속도 (0.5초)

  • slidesToShow: 1 : 한 번에 보여줄 슬라이드 1개

  • slidesToScroll: 1 : 넘길 때 한 장씩 넘김

• <Slider {...settings}> : 설정 객체를 props로 넘겨 슬라이더에 적용합니다.

---

메인페이지

리뷰

review.ts

export const reviewForMain = http.get('http://localhost:9999/reviews', () => {
  return HttpResponse.json(mockReviewData, {
    status: 200,
  });
});

메인페이지용 리뷰 데이터를 가짜로 응답해주는 헨들러를 작성합니다.

• http://localhost:9999/reviews로 GET 요청이 오면, mockReviewData 배열을 JSON 형식으로 200 OK로 응답해주는 가짜 API입니다.

review.api.ts

export const fetchReviewAll = async () => {
  return await requestHandler<BookReviewItem[]>('get', `/reviews`);
};

GET /reviews 요청을 보내 BookReviewItem[] 타입의 전체 리뷰 리스트를 받아오는 비동기 함수입니다.

MainReview.tsx

import { BookReviewItem as IBookReviewItem } from '@/models/book.model';
import styled from 'styled-components';
import BookReviewItem from '../book/BookReviewItem';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { useMediaQuery } from '@/hooks/useMediaQuery';

interface Props {
  reviews: IBookReviewItem[];
}

export default function MainReview({ reviews }: Props) {
  const { isMobile } = useMediaQuery();

  let sliderSettings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: isMobile ? 1 : 3,
    slidesToScroll: isMobile ? 1 : 3,
    gap: 16,
  };
  return (
    <StyledMainReview>
      <Slider {...sliderSettings}>
        {reviews.map((review) => (
          <BookReviewItem key={review.id} review={review} />
        ))}
      </Slider>
    </StyledMainReview>
  );
}

const StyledMainReview = styled.div`
  padding: 0 0 24px 0;

  .slick-track {
    padding: 12px 0;
  }

  .slick-slide > div {
    margin: 0 12px;
  }

  .slick-prev:before,
  .slick-next:before {
    color: #000;
  }

  @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
    .slick-prev {
      left: 0;
    }
    .slick-next {
      right: 0;
    }
  }
`;

• <Slider {...sliderSettings}> : sliderSettings를 그대로 넘긴 react-slider의 슬라이더 컴포넌트입니다.

  • reviews 배열을 순회하면서, 각 리뷰를 BookReviewItem 컴포넌트로 렌더링합니다.

결과 화면

---

신간 안내

MainNewBook.tsx

import { Book } from '@/models/book.model';
import styled from 'styled-components';
import BookItem from '../books/BookItem';

interface Props {
  books: Book[];
}

export default function MainNewBooks({ books }: Props) {
  return (
    <StyledMainNewBooks>
      {books.map((book) => (
        <BookItem key={book.id} book={book} view='grid' />
      ))}
    </StyledMainNewBooks>
  );
}

const StyledMainNewBooks = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;

  @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
    grid-template-columns: repeat(2, 1fr);
  }
`;

• books 배열을 돌면서 각각을 BookItem 컴포넌트로 렌더링합니다.

결과 화면

---

베스트셀러

book.ts

import { Book } from '@/models/book.model';
import { HttpResponse, http } from 'msw';
import { fakerKO as faker } from '@faker-js/faker';

const bestBooksData: Book[] = Array.from({ length: 10 }).map((_, index) => ({
  id: index,
  title: faker.lorem.sentence(),
  img: faker.number.int({ min: 100, max: 200 }),
  category_id: faker.number.int({ min: 0, max: 2 }),
  form: '종이책',
  isbn: faker.commerce.isbn(),
  summary: faker.lorem.paragraph(),
  detail: faker.lorem.paragraph(),
  author: faker.person.firstName(),
  pages: faker.number.int({ min: 100, max: 500 }),
  contents: faker.lorem.paragraph(),
  price: faker.number.int({ min: 10000, max: 50000 }),
  likes: faker.number.int({ min: 0, max: 100 }),
  pubDate: faker.date.past().toISOString(),
}));

export const bestBooks = http.get('http://localhost:9999/books/best', () => {
  return HttpResponse.json(bestBooksData, {
    status: 200,
  });
});

베스트셀러 도서 목록을 가짜로 응답해주는 헨들러를 작성합니다.

• http://localhost:9999/books/best로 GET 요청이 오면, bestBooksData 배열을 JSON 형식으로 200 OK로 응답해주는 가짜 API입니다.

book.api.ts

export const fetchBestBooks = async () => {
  const response = await httpClient.get<Book[]>(`/books/best`);
  return response.data;
};

GET /books/best 요청을 보내 Book[] 타입의 베스트셀러 리스트를 받아오는 비동기 함수입니다.

MainBest.tsx

import { Book } from '@/models/book.model';
import styled from 'styled-components';
import BookBestItem from '../books/BookBestItem';

interface Props {
  books: Book[];
}

export default function MainBest({ books }: Props) {
  return (
    <StyledMainBest>
      {books.map((item, index) => (
        <BookBestItem key={item.id} book={item} itemIndex={index} />
      ))}
    </StyledMainBest>
  );
}

const StyledMainBest = styled.div`
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;

  @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
    grid-template-columns: repeat(2, 1fr);
  }
`;

• books 배열을 돌면서 하나씩 BookBestItem 컴포넌트로 렌더링합니다.

BookBestItem.tsx

import { Book } from '@/models/book.model';
import styled from 'styled-components';
import BookItem, { StyledBookItem } from './BookItem';
import { Theme } from '@/style/theme';

interface Props {
  book: Book;
  itemIndex: number;
}

export default function BookBestItem({ book, itemIndex }: Props) {
  return (
    <StyledBookBestItem>
      <BookItem book={book} view='grid' />
      <div className='rank'>{itemIndex + 1}</div>
    </StyledBookBestItem>
  );
}

const StyledBookBestItem = styled.div`
  ${StyledBookItem} {
    .summary,
    .price,
    .likes {
      display: none;
    }

    h2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  position: relative;

  .rank {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
    background: ${({ theme }) => (theme as Theme).color.primary};
    border-radius: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    font-weight: 700;
    font-style: italic;
  }
`;

• <BookItem> 컴포넌트를 재사용하여 순위 뱃지를 오버레이로 겹쳐서 베스트셀러를 표현합니다.

결과 화면

---

배너

banner.model.ts

export interface Banner {
  id: number;
  title: string;
  description: string;
  image: string;
  url: string;
  target: string;
}

배너 데이터 타입을 정의합니다.

• id : 배너 고유 ID

• title : 배너 제목 (ex: '신간 출시!')

• description : 부제목, 설명 문구

• image : 이미지 URL

• url : 배너 클릭 시 이동할 링크

• target : 링크 열기 방식 ('_blank'(새 탭에서 열기), '_self'(현재 탭에서 열기) 등)

banner.ts

import { HttpResponse, http } from 'msw';
import { Banner } from '@/models/banner.model';

const bannerData: Banner[] = [
  {
    id: 1,
    title: '신간 출시: 아주 작은 습관의 힘',
    description: '더 나은 습관으로 삶을 바꿔보세요. 지금 시작하세요.',
    image: 'http://picsum.photos/id/111/1200/400',
    url: 'http://some.url',
    target: '_blank',
  },
  {
    id: 2,
    title: '무라카미 하루키 신작',
    description: '무라카미의 몽환적인 세계를 지금 바로 경험해보세요.',
    image: 'http://picsum.photos/id/222/1200/400',
    url: 'http://some.url',
    target: '_self',
  },
  {
    id: 3,
    title: '봄맞이 도서 할인!',
    description: '선택된 소설 최대 40% 할인. 기간 한정!',
    image: 'http://picsum.photos/id/33/1200/400',
    url: 'http://some.url',
    target: '_blank',
  },
];

export const banners = http.get('http://localhost:9999/banners', () => {
  return HttpResponse.json(bannerData, {
    status: 200,
  });
});

베너 데이터를 가짜로 응답해주는 헨들러를 작성합니다.

• http://localhost:9999/banners로 GET 요청이 오면, bannerData 배열을 JSON 형식으로 200 OK로 응답해주는 가짜 API입니다.

browser.ts

import { setupWorker } from 'msw/browser';
import { addReview, reviewForMain, reviewsById } from './review';
import { bestBooks } from './books';
import { banners } from './banner';

const handlers = [reviewsById, addReview, reviewForMain, bestBooks, banners];

export const worker = setupWorker(...handlers);

리뷰, 베스트셀러, 배너(review, books, banner) 가짜 API 핸들러를 모아서 Service Worker를 등록하여 요청을 가로챕니다.

banner.api.ts

import { Banner } from '@/models/banner.model';
import { requestHandler } from './http';

export const fetchBanners = async () => {
  return await requestHandler<Banner[]>('get', '/banners');
};

GET /banners 요청을 보내 Banner[] 타입의 배너 리스트를 받아오는 비동기 함수입니다.

Banner.tsx

import { Banner as IBanner } from '@/models/banner.model';
import styled from 'styled-components';
import BannerItem from './BannerItem';
import { useMemo, useState } from 'react';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import { Theme } from '@/style/theme';

interface Props {
  banners: IBanner[];
}

export default function Banner({ banners }: Props) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const transFormValue = useMemo(() => {
    return currentIndex * -100;
  }, [currentIndex]);

  const handlePrev = () => {
    if (currentIndex === 0) return;
    setCurrentIndex(currentIndex - 1);
  };
  const handleNext = () => {
    if (currentIndex === banners.length - 1) return;
    setCurrentIndex(currentIndex + 1);
  };

  const handleIndicatorClick = (index: number) => {
    setCurrentIndex(index);
  };

  return (
    <StyledBanner>
      <StyledBannerContainer $transFormValue={transFormValue}>
        {banners.map((item, index) => (
          <BannerItem banner={item} />
        ))}
      </StyledBannerContainer>

      <StyledBannerButton>
        <button className='prev' onClick={handlePrev}>
          <FaAngleLeft />
        </button>
        <button className='next' onClick={handleNext}>
          <FaAngleRight />
        </button>
      </StyledBannerButton>
      <StyledBannerIndicator>
        {banners.map((banner, index) => (
          <span
            className={index === currentIndex ? 'active' : ''}
            onClick={() => handleIndicatorClick(index)}
          ></span>
        ))}
      </StyledBannerIndicator>
    </StyledBanner>
  );
}

const StyledBanner = styled.div`
  overflow: hidden;
  position: relative;
`;

interface StyledBannerContainerProps {
  $transFormValue: number;
}

const StyledBannerContainer = styled.div<StyledBannerContainerProps>`
  display: flex;
  transform: translateX(${(props) => props.$transFormValue}%);
  transition: transform 0.5s ease-in-out;
`;

const StyledBannerButton = styled.div`
  button {
    border: 0;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 500px;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    svg {
      fill: #fff;
    }

    &.prev {
      left: 10px;
    }

    &.next {
      right: 10px;
    }

    @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
      width: 28px;
      height: 28px;
      font-size: 1.5rem;

      &.prev {
        left: 0px;
      }

      &.next {
        right: 0px;
      }
    }
  }
`;

const StyledBannerIndicator = styled.div`
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 100px;
    background: #fff;
    margin: 0 4px;
    cursor: pointer;

    &.active {
      background: ${({ theme }) => (theme as Theme).color.primary};
    }
  }

  @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
    bottom: 0;
    span {
      width: 12px;
      height: 12px;

      &.active {
        width: 24px;
      }
    }
  }
`;

• <StyledBanner> : banners를 돌면서 하나씩 BannerItem 컴포넌트를 좌우로 슬라이딩 연출을 합니다.

• <StyledBannerButton> : 이전/다음 버튼 누르면 currentIndex 조정되어 보여지는 컴포넌트를 변경합니다.

• <StyledBannerIndicator> : 하단 동그란 인디케이터로 현재 슬라이드의 index와 같으면 .active 클래스를 적용시키면서 해당 인덱스로 슬라이드 이동합니다.

BannerItem.tsx

import { Banner as IBanner } from '@/models/banner.model';
import styled from 'styled-components';

interface Props {
  banner: IBanner;
}

export default function BannerItem({ banner }: Props) {
  return (
    <StyledBannerItem>
      <div className='img'>
        <img src={banner.image} alt={banner.title} />
      </div>
      <div className='content'>
        <h2>{banner.title}</h2>
        <p>{banner.description}</p>
      </div>
    </StyledBannerItem>
  );
}

const StyledBannerItem = styled.div`
  flex: 0 0 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;

  .img {
    img {
      width: 100%;
      max-width: 100%;
    }
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: ${({ theme }) => theme.color.primary};
    }

    p {
      font-size: 1.2rem;
      color: ${({ theme }) => theme.color.text};
      margin: 0;
    }
  }

  @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
    .content {
      width: 100%;
      background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0)
      );

      h2 {
        font-size: 1.5rem;
        margin: 8px;
      }

      p {
        font-size: 0.75rem;
      }
    }
  }
`;

• 하나씩 배너 이미지를 보여주면서, 텍스트를 오버레이로 덮은 슬라이드 컴포넌트입니다.

useMain.ts

import { fetchBanners } from '@/api/banner.api';
import { fetchBestBooks, fetchBooks } from '@/api/books.api';
import { fetchReviewAll } from '@/api/review.api';
import { Banner } from '@/models/banner.model';
import { Book, BookReviewItem } from '@/models/book.model';
import { useEffect, useState } from 'react';

export const useMain = () => {
  const [reviews, setReviews] = useState<BookReviewItem[]>([]);
  const [newBooks, setNewBooks] = useState<Book[]>([]);
  const [bestBooks, setBestBooks] = useState<Book[]>([]);
  const [banners, setBanners] = useState<Banner[]>([]);

  useEffect(() => {
    fetchReviewAll().then((reviews) => {
      setReviews(reviews);
    });

    fetchBooks({
      category_id: undefined,
      news: true,
      currentPage: 1,
      limit: 4,
    }).then(({ books }) => {
      setNewBooks(books);
    });

    fetchBestBooks().then((books) => setBestBooks(books));

    fetchBanners().then((banners) => setBanners(banners));
  }, []);

  return { reviews, newBooks, bestBooks, banners };
};

메인 페이지에 필요한 데이터 리뷰, 신간, 베스트셀러, 배너를 useEffect 한 번으로 불러오고, 각각 useState에 저장해서 컴포넌트에서 쉽게 사용할 수 있도록 해주는 메인 페이지 커스텀 훅입니다.

Home.tsx

import Title from '@/components/common/Title';
import MainNewBooks from '@/components/main/MainNewBooks';
import { useMain } from '@/hooks/useMain';
import styled from 'styled-components';
import MainReview from '@/components/main/MainReview';
import MainBest from '@/components/main/MainBest';
import Banner from '@/components/common/banner/Banner';

export default function Home() {
  const { reviews, newBooks, bestBooks, banners } = useMain();

  return (
    <StyledHome>
      <Banner banners={banners} />
      <section className='section'>
        <Title size='large'>베스트 셀러</Title>
        <MainBest books={bestBooks} />
      </section>
      <section className='section'>
        <Title size='large'>신간 안내</Title>
        <MainNewBooks books={newBooks} />
      </section>
      <section className='section'>
        <Title size='large'>리뷰</Title>
        <MainReview reviews={reviews} />
      </section>
    </StyledHome>
  );
}

const StyledHome = styled.div`
  display: flex;
  flex-direction: column;
  gap: 24px;
`;

배너, 베스트셀러, 신간, 리뷰로 홈 화면을 구성합니다.

결과 화면

---

모바일 대응

theme.ts

export type MediaQuery = 'mobile' | 'tablet' | 'desktop';

export interface Theme {
 ...
  mediaQuery: {
    [key in MediaQuery]: string;
  };
}

export const light: Theme = {
  ...
  mediaQuery: {
    mobile: '(max-width: 768px)',
    tablet: '(max-width: 1024px)',
    desktop: '(min-width: 1025px)',
  },
};

• MediaQuery라는 유니언 타입으로 모바일 반응형 타입을 지정하였습니다.

useMediaQuery.ts

import { getTheme } from '@/style/theme';
import { useEffect, useState } from 'react';

export const useMediaQuery = () => {
  const [isMobile, setIsMobile] = useState(
    window.matchMedia(getTheme('light').mediaQuery.mobile).matches
  );

  useEffect(() => {
    const isMobileQuery = window.matchMedia(
      getTheme('light').mediaQuery.mobile
    );

    setIsMobile(isMobileQuery.matches);
  }, []);

  return { isMobile };
};

반응형 체크용 커스텀 훅으로, 현재 화면이 모바일 사이즈인지 확인하여 boolean 값으로 반환해줍니다.

적용 예시

const FooterStyle = styled.footer`
  display: flex;
  justify-content: space-between;

  @media ${({ theme }) => `screen and ${theme.mediaQuery.mobile}`} {
    flex-direction: column;
    align-items: center;
  }
`

미디어 쿼리를 활용하여 스크린 사이즈가 (max-width: 768px) 즉, 최대 가로 넓이가 768px일 때 스타일이 적용됩니다.

[해석된 코드의 모습]

@media screen and (max-width: 768px) {
  flex-direction: column;
  align-items: center;
}

결과 화면

---

✏️ 회고

Mock 서버를 한 번 더 경험하면서 조금 더 익숙해진 것 같고, mediaQuery 또한 커스텀 훅으로 유용하게 쓸 수 있는 방법을 알게 되었다.