Fix: ModalEvent2023FallRandomBox

sparcs-kaist · Sep 26, 2023 · 5e475c8 · 5e475c8
1 parent 0506f17
commit 5e475c8
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/src/components/ModalPopup/ModalEvent2023FallItemInstagram.tsx b/src/components/ModalPopup/ModalEvent2023FallItemInstagram.tsx
@@ -18,6 +18,13 @@ type ModalEvent2023FallItemInstagramProps = { item?: EventItem } & Parameters<
   typeof Modal
 >[0];
 
+const Background = () => (
+  <div css={{ position: "absolute", top: "20%", left: 0, bottom: 0, right: 0 }}>
+    <div className="c2023fallevent-before"></div>
+    <div className="c2023fallevent-after"></div>
+  </div>
+);
+
 const ModalEvent2023FallItemInstagram = ({
   item,
   ...modalProps
@@ -43,7 +50,11 @@ const ModalEvent2023FallItemInstagram = ({
   };
 
   return (
-    <Modal padding="16px 12px 12px" {...modalProps}>
+    <Modal
+      padding="16px 12px 12px"
+      backgroundChildren={<Background />}
+      {...modalProps}
+    >
       <div css={styleTitle}>
         <ShareRoundedIcon style={styleIcon} />
         인스타그램 스토리에 공유하기

diff --git a/src/components/ModalPopup/ModalEvent2023FallRandomBox.tsx b/src/components/ModalPopup/ModalEvent2023FallRandomBox.tsx
@@ -1,4 +1,11 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 import type { EventItem } from "types/event2023fall";
 
@@ -23,19 +30,29 @@ const Background = () => (
   </div>
 );
 
-type ModalEvent2023FallRandomBoxProps = { item?: EventItem } & Parameters<
-  typeof Modal
->[0];
+type ModalEvent2023FallRandomBoxProps = {
+  item?: EventItem;
+  setShareItem?: Dispatch<SetStateAction<Nullable<EventItem>>>;
+} & Parameters<typeof Modal>[0];
 
 const ModalEvent2023FallRandomBox = ({
   item,
+  setShareItem,
   ...modalProps
 }: ModalEvent2023FallRandomBoxProps) => {
   const [isBoxOpend, setIsBoxOpend] = useState<boolean>(false);
   const isDisplayRandomBox = !useDelayBoolean(!modalProps.isOpen, 500);
   const isDisplayItemName = useDelay<boolean>(isBoxOpend, !isBoxOpend, 6000);
   const onClickOk = useCallback(() => setIsBoxOpend(true), []);
 
+  const onChangeIsOpen = useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen && item) setShareItem?.(item);
+      modalProps?.onChangeIsOpen?.(isOpen);
+    },
+    [item, setShareItem, modalProps]
+  );
+
   useEffect(() => {
     if (!modalProps.isOpen) setIsBoxOpend(false);
   }, [modalProps.isOpen]);
@@ -58,10 +75,11 @@ const ModalEvent2023FallRandomBox = ({
 
   return (
     <Modal
+      {...modalProps}
       css={{ padding: "16px 12px 12px", overflow: "hidden" }}
-      onEnter={onClickOk}
       backgroundChildren={isBoxOpend ? <Background /> : undefined}
-      {...modalProps}
+      onEnter={onClickOk}
+      onChangeIsOpen={onChangeIsOpen}
     >
       <div css={styleTitle}>
         <HelpCenterRoundedIcon style={styleIcon} />
@@ -102,11 +120,7 @@ const ModalEvent2023FallRandomBox = ({
           ...theme.font14_bold,
         }}
         disabled={isDisplayItemName ? false : isBoxOpend}
-        onClick={
-          isDisplayItemName
-            ? () => modalProps?.onChangeIsOpen?.(false)
-            : onClickOk
-        }
+        onClick={isDisplayItemName ? () => onChangeIsOpen(false) : onClickOk}
       >
         {isDisplayItemName ? "확인" : "박스 열기"}
       </Button>

diff --git a/src/pages/Event/Event2023FallStore/ItemListSection.tsx b/src/pages/Event/Event2023FallStore/ItemListSection.tsx
@@ -125,6 +125,7 @@ const EventItemContainer = ({ value, fetchItems }: EventItemComponentProps) => {
           isOpen={!!rewardItem}
           onChangeIsOpen={() => setRewardItem(null)}
           item={rewardItem || undefined}
+          setShareItem={setShareItem}
         />
       )}
       <ModalEvent2023FallItemInstagram