feat: 모달 외부 영역 클릭시, 모달 사라지도록 추가

src/components/commons/modal/components/ModalWrapper.styled.ts

@@ -4,7 +4,7 @@ export const ModalWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 100;
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -15,6 +15,7 @@ export const ModalWrapper = styled.div`
 `;
 
 export const ModalContainer = styled.div`
+  z-index: 30;
   display: flex;
   flex-direction: column;
   gap: 3.2rem;

src/components/commons/modal/components/ModalWrapper.tsx

@@ -1,14 +1,38 @@
-import React from "react";
+import useModal from "@hooks/useModal";
+import React, { useRef } from "react";
 import * as S from "./ModalWrapper.styled";
 
 interface ModalWrapperProps {
   children: React.ReactNode;
+  type: "alert" | "confirm" | "modal";
 }
 
-const ModalWrapper = ({ children }: ModalWrapperProps) => {
+const ModalWrapper = ({ children, type }: ModalWrapperProps) => {
+  const { closeAlert, closeConfirm } = useModal();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const closeModal = () => {
+    switch (type) {
+      case "alert":
+        closeAlert();
+        return;
+      case "confirm":
+        closeConfirm();
+        return;
+      default:
+        return;
+    }
+  };
+
+  const handleClickOutside = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+      closeModal();
+    }
+  };
+
   return (
-    <S.ModalWrapper>
-      <S.ModalContainer>{children}</S.ModalContainer>
+    <S.ModalWrapper onClick={handleClickOutside}>
+      <S.ModalContainer ref={containerRef}>{children}</S.ModalContainer>
     </S.ModalWrapper>
   );
 };