슬라이더 부분 오류입니다

넷플릭스 슬라이더 부분 만들기 강의 진행중입니다.

슬라이더가 작동하긴 하는데.. CSS부분이 문제인지 부드럽게 넘어가는 것이 아닌

툭툭 끊겨서 넘어갑니다. (onClick이벤트를 slider__arrow-left에 넣은 것은 클릭 편하라고.. 입니다. arrow에 onClick이벤트를 설정해도 동일한 문제가 발생합니다.)

CSS 파일의 경우는 강의에서 제공해주신거 복사해서 사용했는데 혹시 이유를 알 수 있을까요?

Row.js부분의 코드입니다.

import axios from "../api/axios";
import React, { useEffect, useState } from "react";
import "./Row.css";

export default function Row({ isLargeRow, title, id, fetchUrl }) {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetchMovieData();
  }, []);

  const fetchMovieData = async () => {
    const request = await axios.get(fetchUrl);
    setMovies(request.data.results);
  };

  return (
    <section className="row">
      <h2>{title}</h2>
      <div className="slider">
        <div
          className="slider__arrow-left"
          onClick={() => {
            document.getElementById(id).scrollLeft -= window.innerWidth - 80;
          }}
        >
          <span className="arrow">{"<"}</span>
        </div>
        <div id={id} className="row__posters">
          {movies.map((movie) => (
            <img
              key={movie.id}
              className={`row__poster ${isLargeRow && "row__posterLarge"}`}
              src={`https://image.tmdb.org/t/p/original/${
                isLargeRow ? movie.poster_path : movie.backdrop_path
              } `}
              alt={movie.name}
            />
          ))}
        </div>
        <div
          className="slider__arrow-right"
          onClick={() => {
            document.getElementById(id).scrollLeft += window.innerWidth - 80;
          }}
        >
          <span className="arrow">{">"}</span>
        </div>
      </div>
    </section>
  );
}

인프런 커뮤니티 질문&답변