[#3] feat: toggleModal => openModal, closeModal. 적절한 event delegation 위해

OPGG-HACKTHON · Aug 7, 2021 · bc341cc · bc341cc
1 parent 85e9385
commit bc341cc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/common/ModalContainer/ModalContainer.tsx b/src/common/ModalContainer/ModalContainer.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 type Props = {
   isPopup?: boolean;
   contentComponent?: React.ReactNode;
-  onClickOverlay?: () => void;
+  onClickOverlay?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
 const ModalContainer = ({
@@ -14,7 +14,7 @@ const ModalContainer = ({
 }: Props) => {
   const onClickOnlyOverlay = (e: React.MouseEvent<HTMLElement>) => {
     if (e.target !== e.currentTarget) return;
-    if (onClickOverlay) onClickOverlay();
+    if (onClickOverlay) onClickOverlay(e);
   };
 
   return isPopup ? (

diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -12,18 +12,26 @@ const Main = () => {
   const rVideos = videos.filter((video) => video.rank % 2 !== 0);
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const toggleModal = () => {
-    setModalOpen((prev) => !prev);
+  const openModal = (e: React.MouseEvent<HTMLElement>) => {
+    const targetElement = e.target as HTMLElement;
+    if (targetElement.tagName === 'VIDEO') {
+      setModalOpen(true);
+    }
   };
+
+  const closeModal = (e: React.MouseEvent<HTMLElement>) => {
+    setModalOpen(false);
+  };
+
   return (
     <div style={{ width: '65%', margin: 'auto' }}>
       <VideoSelectBar popularTags={datas.popularTags} />
       <ModalContainer
         isPopup={isModalOpen}
-        onClickOverlay={toggleModal}
+        onClickOverlay={closeModal}
         contentComponent={<VideoModal />}
       />
-      <VideoWrapper onClick={toggleModal}>
+      <VideoWrapper onClick={openModal}>
         <div>
           {lVideos.map((data) => (
             <LazyItem