From 1ccd5ef4575d2b01ec3696c15a0105879ca79328 Mon Sep 17 00:00:00 2001
From: sangminlee98 <tkdals0975@naver.com>
Date: Mon, 22 Apr 2024 21:58:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A3=BC=EC=86=8C=20=EC=B0=BE=EA=B8=B0?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB=EB=8A=94=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Trade/AddressModal/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Trade/AddressModal/index.tsx b/src/components/Trade/AddressModal/index.tsx
index 9440d15..7d8428c 100644
--- a/src/components/Trade/AddressModal/index.tsx
+++ b/src/components/Trade/AddressModal/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import DaumPostcodeEmbed, { Address } from 'react-daum-postcode';
 import styles from './styles.module.scss';
 
@@ -8,6 +8,7 @@ type AddressModalProps = {
 };
 
 function AddressModal({ callback, setIsPostcodeOpen }: AddressModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
   const handleComplete = (data: Address) => {
     let fullAddress = data.address;
     let extraAddress = '';
@@ -25,9 +26,19 @@ function AddressModal({ callback, setIsPostcodeOpen }: AddressModalProps) {
     callback(fullAddress, data.zonecode);
     setIsPostcodeOpen((pre) => !pre);
   };
+  useEffect(() => {
+    const handleCloseModal = (e: Event | React.MouseEvent) => {
+      if (!modalRef.current || !modalRef.current!.contains(e.target as Node))
+        setIsPostcodeOpen(false);
+    };
+    window.addEventListener('mousedown', handleCloseModal);
+    return () => {
+      window.removeEventListener('mousedown', handleCloseModal);
+    };
+  }, [modalRef]);
   return (
     <div className={styles.background}>
-      <section className={styles.container}>
+      <section ref={modalRef} className={styles.container}>
         <DaumPostcodeEmbed onComplete={handleComplete} autoClose={false} />
       </section>
     </div>