diff --git a/src/mainPage/features/comment/autoScrollCarousel/index.jsx b/src/mainPage/features/comment/autoScrollCarousel/index.jsx index bb3d5b42..de91b2a1 100644 --- a/src/mainPage/features/comment/autoScrollCarousel/index.jsx +++ b/src/mainPage/features/comment/autoScrollCarousel/index.jsx @@ -1,9 +1,9 @@ import useAutoCarousel from "./useAutoCarousel.js"; function AutoScrollCarousel({ speed = 1, gap = 0, children }) { - const { position, ref, eventListener } = useAutoCarousel(speed); + const { position, ref, eventListener } = useAutoCarousel(speed, gap); - const flexStyle = "flex [&>div]:flex-shrink-0 gap-[var(--gap,0)] items-center absolute"; + const flexStyle = "min-w-full flex [&>div]:flex-shrink-0 gap-[var(--gap,0)] justify-around items-center absolute"; return (
{ if (childRef.current === null) return; - const width = childRef.current.clientWidth; + const width = childRef.current.clientWidth + gap; // 마우스 뗐을 때 관성 재계산 const baseSpeed = isHovered ? 0 : speed; diff --git a/src/mainPage/features/comment/mock.js b/src/mainPage/features/comment/mock.js index c48122b8..72d9c60b 100644 --- a/src/mainPage/features/comment/mock.js +++ b/src/mainPage/features/comment/mock.js @@ -2,7 +2,7 @@ import { http, HttpResponse } from "msw"; import { makeLorem } from "@common/mock/utils.js"; function getCommentMock() { - return Array.from({ length: 20 }, (_, i) => { + return Array.from({ length: 2 }, (_, i) => { return { id: i * 100 + Math.floor(Math.random() * 99), content: makeLorem(5, 12),