[modify] 기대평이 width보다 적게 보여질 때 후처리 추가

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 (
     <div className="w-full h-full overflow-hidden" {...eventListener}>
       <div

src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js

@@ -5,7 +5,7 @@ const FRICTION_RATE = 0.1;
 const MOMENTUM_THRESHOLD = 0.6;
 const MOMENTUM_RATE = 0.3;
 
-function useAutoCarousel(speed = 1) {
+function useAutoCarousel(speed = 1, gap = 0) {
   const childRef = useRef(null);
   const [position, setPosition] = useState(0);
   const [isControlled, setIsControlled] = useState(false);
@@ -19,7 +19,7 @@ function useAutoCarousel(speed = 1) {
     (time) => {
       if (childRef.current === null) return;
 
-      const width = childRef.current.clientWidth;
+      const width = childRef.current.clientWidth + gap;
 
       // 마우스 뗐을 때 관성 재계산
       const baseSpeed = isHovered ? 0 : speed;

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),