fix: set z-index to ImageModal header

src/shared/ui/ImageLayout/ImageLayout.tsx

@@ -1,41 +1,27 @@
 import { Carousel } from 'src/shared/ui/Carousel/Carousel';
 import { useStep } from 'src/shared/functions/useStep';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import styles from './ImageLayout.module.css';
 import { ImageModal } from 'src/shared/ui/ImageModal/ImageModal';
 
 export const ImageLayout = ({ urls }: { urls: string[] }) => {
-  const isSlidingRef = useRef(false);
   const { step, setStep } = useStep({ max: urls.length });
   const [selectedUrlIdx, setSelectedUrlIdx] = useState<number | null>(null);
 
   const imageList = useMemo(() => urls.map((url) => ({ src: url, alt: url })), [urls]);
 
   const onBeforeChangeStep = (current: number, next: number) => {
     setStep(next);
-    isSlidingRef.current = true;
-  };
-
-  const onAfterChangeStep = () => {
-    isSlidingRef.current = false;
   };
 
   const onClickImage = (idx: number) => {
-    if (!isSlidingRef.current) {
-      setSelectedUrlIdx(idx);
-    }
+    setSelectedUrlIdx(idx);
   };
 
   return (
     <>
       <div className={styles.Container}>
-        <Carousel
-          className={styles.Carousel}
-          infinite={false}
-          arrows={false}
-          beforeChange={onBeforeChangeStep}
-          afterChange={onAfterChangeStep}
-        >
+        <Carousel className={styles.Carousel} infinite={false} arrows={false} beforeChange={onBeforeChangeStep}>
           {urls.map((url, idx) => (
             <img src={url} key={url} alt={'프로필 이미지'} onClick={() => onClickImage(idx)} />
           ))}
@@ -45,7 +31,7 @@ export const ImageLayout = ({ urls }: { urls: string[] }) => {
         </div>
       </div>
       <ImageModal
-        showModal={Boolean(selectedUrlIdx)}
+        showModal={selectedUrlIdx !== null}
         closeModal={() => setSelectedUrlIdx(null)}
         imageList={imageList}
         initialSlide={selectedUrlIdx ?? undefined}

src/shared/ui/ImageModal/ImageModal.module.css

@@ -19,6 +19,7 @@
     left: 0;
     right: 0;
     width: 100%;
+    z-index: 1;
     color: white;
     display: flex;
     justify-content: space-between;