From 53d27ceeef9eb9971ab27e293ee25f8cc59899b2 Mon Sep 17 00:00:00 2001
From: lybell-art <futireflugel@gmail.com>
Date: Tue, 20 Aug 2024 18:31:04 +0900
Subject: [PATCH] =?UTF-8?q?[modify]=20=EA=B8=B0=EB=8C=80=ED=8F=89=EC=9D=B4?=
 =?UTF-8?q?=20width=EB=B3=B4=EB=8B=A4=20=EC=A0=81=EA=B2=8C=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A7=88=20=EB=95=8C=20=ED=9B=84=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mainPage/features/comment/autoScrollCarousel/index.jsx    | 4 ++--
 .../features/comment/autoScrollCarousel/useAutoCarousel.js    | 4 ++--
 src/mainPage/features/comment/mock.js                         | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

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 (
     <div className="w-full h-full overflow-hidden" {...eventListener}>
       <div
diff --git a/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js b/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js
index 2b6b89c8..2ebd80d9 100644
--- a/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js
+++ b/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;
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),