fix: sonar cloud issue

components/shared/Carousel/v2/CarouselMain.tsx

@@ -5,7 +5,9 @@ import { cn } from "@/lib/utils";
 import { useCarousel } from "./CarouselContext";
 import { CarouselMainProps } from "./Carousel.type";
 
-export default function CarouselMain({ className }: CarouselMainProps) {
+export default function CarouselMain({
+  className,
+}: Readonly<CarouselMainProps>) {
   const { showIndex, items, Component, renderKey } = useCarousel();
   const [carouselItemWidth, setCarouselItemWidth] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);

components/shared/Carousel/v2/CarouselPagination.tsx

@@ -4,7 +4,7 @@ import { CarouselActionType, CarouselPaginationProps } from "./Carousel.type";
 
 export default function CarouselPagination({
   className,
-}: CarouselPaginationProps) {
+}: Readonly<CarouselPaginationProps>) {
   const { showIndex, items, renderKey } = useCarousel();
   const dispatch = useCarouselDispatch();
 

components/shared/InputOTP/inputOTP.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useArgs } from "@storybook/preview-api";
 
 import InputOTP from ".";
 

components/shared/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import React, {
   useEffect,
   ForwardRefRenderFunction,
   forwardRef,
+  KeyboardEventHandler,
 } from "react";
 import { cn } from "@/lib/utils";
 import Portal from "../Portal/Portal";
@@ -52,6 +53,12 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
 
   const [removeDOM, setRemoveDOM] = useState(!isOpen);
 
+  const handleKeyUp: KeyboardEventHandler = (e) => {
+    if (maskClosable && e.key === "Enter") {
+      onClose?.();
+    }
+  };
+
   useEffect(() => {
     let timer: NodeJS.Timeout;
 
@@ -80,15 +87,16 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
             isOpen ? "opacity-100" : "opacity-0"
           )}
           data-testid="modal-mask"
+          tabIndex={maskClosable ? 0 : -1}
           onClick={maskClosable ? onClose : undefined}
+          onKeyUp={handleKeyUp}
         />
         <div
           className={cn(
             "fixed z-20 left-1/2 -translate-x-1/2 duration-200",
             containerSizeMap[size],
             isOpen ? "opacity-100" : "opacity-0"
           )}
-          data-testid="modal-container"
         >
           <BoxFancy
             ref={ref}
@@ -98,7 +106,7 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
               dialogSize[size]
             )}
             {...restProps}
-            role="dialog"
+            role="alertdialog"
           >
             <header className="text-[22px] text-center">{title}</header>
             <div>{children}</div>

components/shared/SelectBoxGroup/SelectBoxGroup.tsx

@@ -44,7 +44,7 @@ function SelectBoxGroup<T = string>({
   itemClassName,
   itemWrapperClassName,
   onChange,
-}: SelectBoxGroupProps<T>) {
+}: Readonly<SelectBoxGroupProps<T>>) {
   const reactId = useId();
   const selectBoxId = `select_box_${reactId}`;
 

features/room/components/GameRoomActions/GameRoomActions.tsx

@@ -6,7 +6,6 @@ import useRequest from "@/hooks/useRequest";
 import { useRouter } from "next/router";
 import { useToast } from "@/components/shared/Toast";
 import useUser from "@/hooks/useUser";
-import { CarouselItemProps } from "@/components/shared/Carousel/v2";
 import { GameType } from "@/requests/games";
 import { fastJoinGameEndpoint } from "@/requests/rooms";
 import Icon from "@/components/shared/Icon";