About_Section1 구현 완료_20210531_Day7

금일 진행 사항

- About Section1 구현 완료 - Pair review Carousel

 

Pair review Carousel

React-slick Library 를 사용하여 구현했다. 커스터마이징은 자유롭지 않지만 편리하다.

Firebase 에 리뷰 데이터를 저장하여 사용하는 방법도 있지만, 간단한 텍스트 데이터이기에 src - assets - reviews 의 자바스크립트 파일에 리뷰 배열을 만들어 데이터를 저장하고 불러오는 방식으로 구현했다.

Carousel.js 코드

import React, { Component } from "react";
import Slider from "react-slick";
import styled from "styled-components";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import wArrowLeft from "../assets/images/wArrowLeft.svg";
import wArrowRight from "../assets/images/wArrowRight.svg";
import gArrowLeft from "../assets/images/gArrowLeft.svg";
import gArrowRight from "../assets/images/gArrowRight.svg";
import theme from "../common/style/themes/default";
import reviews from "../assets/reviews/reviews";

function handleHover(element) {
  const arrowId = element.target.id;

  if (arrowId === "right") {
    element.target.src = gArrowRight;
  } else if (arrowId === "left") {
    element.target.src = gArrowLeft;
  }
}

function handleUnhover(element) {
  const arrowId = element.target.id;

  if (arrowId === "right") {
    element.target.src = wArrowRight;
  } else if (arrowId === "left") {
    element.target.src = wArrowLeft;
  }
}

function NextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <img
      alt="Right"
      id="right"
      className={className}
      style={{ ...style, display: "block" }}
      onClick={onClick}
      onMouseOver={handleHover}
      onMouseOut={handleUnhover}
      src={wArrowRight}
    />
  );
}

function PrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <img
      alt="Left"
      id="left"
      className={className}
      style={{ ...style, display: "block" }}
      onClick={onClick}
      onMouseOver={handleHover}
      onMouseOut={handleUnhover}
      src={wArrowLeft}
    />
  );
}

class Carousel extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 300,
      autoplay: true,
      autoplaySpeed: 3500,
      slidesToShow: 1,
      slidesToScroll: 1,
      border: "1px solid blue",
      nextArrow: <NextArrow />,
      prevArrow: <PrevArrow />,
    };
    return (
      <Main>
        <ReviewWrapper>
          <StyledSlider {...settings}>
            {reviews.map((ele) => (
              <ReviewBox key={ele.name}>
                <RContents>{ele.comment}</RContents>
                <RWriter>{ele.name}</RWriter>
              </ReviewBox>
            ))}
          </StyledSlider>
        </ReviewWrapper>
      </Main>
    );
  }
}

여기에서 포인트는 아래 라이브러리를 불러오는 것. CSS 적용이 잘 되지 않아 조금 헤맸는데, 역시 공식 사이트를 참고하는 것이 빠르고 정확하다.

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

도움 받은 사이트

스크롤바 숨기기: https://gofnrk.tistory.com/48

SVG 아이콘 색상 수정: https://iconscout.com/icon-editor

Change image src on img:hover :  https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

React-Slick: https://react-slick.neostack.com/docs/example/simple-slider

React Slick 캐러셀 라이브러리 적용하기: https://www.jeje01.me/react/apply-carousel-using-library/

So good..!