feat: Image Modal 닫기 버튼 추가

june-by · Nov 30, 2023 · e2e8d55 · e2e8d55
1 parent f145a35
commit e2e8d55
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/client/components/shared/Overlays/ImageModal/ImageModal.tsx b/client/components/shared/Overlays/ImageModal/ImageModal.tsx
@@ -15,9 +15,9 @@ const ImageModal = ({ onClose, src, width = 100, height = 100 }: Props) => {
     <div className={styles.ModalWrap}>
       <div className={styles.Overlay} onClick={onClose} />
       <div className={styles.Content}>
-        {/* <button onClick={onClose}>
+        <button className={styles.CloseButton} onClick={onClose}>
           <CloseIcon />
-        </button> */}
+        </button>
         <Image src={src} alt="" width={width} height={height} />
       </div>
     </div>

diff --git a/client/components/shared/Overlays/ImageModal/styles.module.scss b/client/components/shared/Overlays/ImageModal/styles.module.scss
@@ -28,17 +28,22 @@
   img {
     border: 5px solid white;
     border-radius: 4px;
-    @include desktop {
-      transform: scale(1.5);
-    }
+    // @include desktop {
+    //   transform: scale(1.5);
+    // }
   }
-  button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    border: none;
-    background: none;
-    cursor: pointer;
-    z-index: 100;
+}
+
+.CloseButton {
+  position: absolute;
+  top: -50px;
+  right: 0px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  z-index: 100;
+  svg {
+    width: 25px;
+    height: 25px;
   }
 }