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} /> )}