カルーセルの挙動を修正、バッジのサイズとスクロールの調整

components/Menu/Carousel/CarouselBox.tsx

@@ -29,7 +29,8 @@ export const CarouselBox = ({
 
   useEffect(() => {
     if (!carouselBadgeScrollViewRef.current) return;
-    const scrollToIndex = (dotButton ? 28 : 22) * listIndex - (width / 2) + (dotButton ? 28 : 22) - 5;
+    const dotSize = dotButton ? 28 : 24;
+    const scrollToIndex = dotSize * listIndex - width / 2 + dotSize - 5;
     carouselBadgeScrollViewRef.current.scrollTo({
       x: scrollToIndex,
       animated: true,
@@ -64,13 +65,6 @@ export const CarouselBox = ({
       setDotButton(data === "true");
     });
   }, []);
-  useEffect(() => {
-    if (!carouselRef.current) return;
-    carouselRef?.current.scrollTo({
-      count: listIndex - carouselRef.current.getCurrentIndex(),
-      animated: true,
-    });
-  }, [listIndex]);
   const RenderItem = ({ item, index }) => {
     return (
       <View
@@ -141,8 +135,11 @@ export const CarouselBox = ({
           parallaxScrollingOffset: 100,
           parallaxAdjacentItemScale: 0.8,
         }}
+        scrollAnimationDuration={600}
         onSnapToItem={setListIndex}
         renderItem={RenderItem}
+        overscrollEnabled={false}
+        defaultIndex={listIndex >= listUpStation.length ? 0 : listIndex}
       />
       <ScrollView
         horizontal