diff --git a/front/src/pages/PlugIn/modal/MPage1.tsx b/front/src/pages/PlugIn/modal/MPage1.tsx
index 25c426d..9438298 100644
--- a/front/src/pages/PlugIn/modal/MPage1.tsx
+++ b/front/src/pages/PlugIn/modal/MPage1.tsx
@@ -3,7 +3,7 @@ import discord from "../../../assets/images/discord_screenshot.png";
const MPage1 = () => {
return (
-
+
1. 디스코드 데스크톱 애플리케이션을 실행해주세요.
diff --git a/front/src/pages/PlugIn/modal/Modal.tsx b/front/src/pages/PlugIn/modal/Modal.tsx
index 35118ba..a44d44d 100644
--- a/front/src/pages/PlugIn/modal/Modal.tsx
+++ b/front/src/pages/PlugIn/modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
import { ModalPortal } from "../../../utils/helpers/ModalPortal";
import { GrClose, GrNext, GrPrevious } from "react-icons/gr";
import MPage1 from "./MPage1";
@@ -9,9 +9,12 @@ import { ModalProps } from "../../../types/ModalProps";
const Modal = ({ onOpenModal }: ModalProps) => {
useEffect(() => {
document.body.style.overflow = "hidden";
+ document.addEventListener("mousedown", outsideClickHandler);
return () => {
document.body.style.overflow = "auto";
+ document.removeEventListener("mousedown", outsideClickHandler);
};
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const [currentPage, setCurrentPage] = useState
(1);
@@ -28,20 +31,21 @@ const Modal = ({ onOpenModal }: ModalProps) => {
}
};
+ const modalRef = useRef(null);
+
+ const outsideClickHandler = (e: MouseEvent) => {
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+ onOpenModal();
+ }
+ };
+
return (
-
-
-
- 디스코드 연결 가이드
-
-
-
+