diff --git a/src/components/ModalPopup/ModalEvent2023FallItemInstagram.tsx b/src/components/ModalPopup/ModalEvent2023FallItemInstagram.tsx
index 85e7124e0..a237c2335 100644
--- 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 = () => (
+
+);
+
const ModalEvent2023FallItemInstagram = ({
item,
...modalProps
@@ -43,7 +50,11 @@ const ModalEvent2023FallItemInstagram = ({
};
return (
-
+ }
+ {...modalProps}
+ >
인스타그램 스토리에 공유하기
diff --git a/src/components/ModalPopup/ModalEvent2023FallRandomBox.tsx b/src/components/ModalPopup/ModalEvent2023FallRandomBox.tsx
index 1083e0bc4..55cb0e2a1 100644
--- 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,12 +30,14 @@ const Background = () => (
);
-type ModalEvent2023FallRandomBoxProps = { item?: EventItem } & Parameters<
- typeof Modal
->[0];
+type ModalEvent2023FallRandomBoxProps = {
+ item?: EventItem;
+ setShareItem?: Dispatch>>;
+} & Parameters[0];
const ModalEvent2023FallRandomBox = ({
item,
+ setShareItem,
...modalProps
}: ModalEvent2023FallRandomBoxProps) => {
const [isBoxOpend, setIsBoxOpend] = useState(false);
@@ -36,6 +45,14 @@ const ModalEvent2023FallRandomBox = ({
const isDisplayItemName = useDelay(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 (
: undefined}
- {...modalProps}
+ onEnter={onClickOk}
+ onChangeIsOpen={onChangeIsOpen}
>
@@ -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 ? "확인" : "박스 열기"}
diff --git a/src/pages/Event/Event2023FallStore/ItemListSection.tsx b/src/pages/Event/Event2023FallStore/ItemListSection.tsx
index d8c9407a4..0c757d71f 100644
--- 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}
/>
)}