From 7df83a2a37010de7c4208b92e9d71d556ad196bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Mon, 23 Dec 2024 16:23:25 +0900
Subject: [PATCH] fix: set z-index to ImageModal header

---
 src/shared/ui/ImageLayout/ImageLayout.tsx     | 22 ++++---------------
 .../ui/ImageModal/ImageModal.module.css       |  1 +
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/shared/ui/ImageLayout/ImageLayout.tsx b/src/shared/ui/ImageLayout/ImageLayout.tsx
index 783db2b..481712a 100644
--- a/src/shared/ui/ImageLayout/ImageLayout.tsx
+++ b/src/shared/ui/ImageLayout/ImageLayout.tsx
@@ -1,11 +1,10 @@
 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);
 
@@ -13,29 +12,16 @@ export const ImageLayout = ({ urls }: { urls: string[] }) => {
 
   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}
diff --git a/src/shared/ui/ImageModal/ImageModal.module.css b/src/shared/ui/ImageModal/ImageModal.module.css
index 3b69a2d..aeb768f 100644
--- a/src/shared/ui/ImageModal/ImageModal.module.css
+++ b/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;