Merge pull request #258 from ODOICHON/feat/#257

feat: 주소 찾기 모달 닫는 기능 추가

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>