From 7b93a04a227df1bfef6d55d7673294f4a2521ac5 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Tue, 2 May 2023 10:01:38 +0900 Subject: [PATCH 1/4] [ feat ] add Modal no close button property --- src/@components/@common/Modal/index.tsx | 5 +++-- src/@components/MainPage/UpdateModal/index.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/@components/@common/Modal/index.tsx b/src/@components/@common/Modal/index.tsx index 20deea72..b735536d 100644 --- a/src/@components/@common/Modal/index.tsx +++ b/src/@components/@common/Modal/index.tsx @@ -12,10 +12,11 @@ interface ModalContents { closeHandler: () => void; closeOpacityClassName?: string; closeBtnClassName?: string; + isNoCloseBtn?: boolean; } export default function Modal(props: PropsWithChildren) { - const { theme = "DEFAULT", closeHandler, closeOpacityClassName, closeBtnClassName, children } = props; + const { theme = "DEFAULT", closeHandler, closeOpacityClassName, closeBtnClassName, isNoCloseBtn, children } = props; const outClickCloserRef = useOutClickCloser(closeHandler, true); if (theme === "GRAY_CENTER") @@ -37,7 +38,7 @@ export default function Modal(props: PropsWithChildren) { - {closeBtnClassName && ( + {isNoCloseBtn || ( diff --git a/src/@components/MainPage/UpdateModal/index.tsx b/src/@components/MainPage/UpdateModal/index.tsx index 5efb22fa..2e658091 100644 --- a/src/@components/MainPage/UpdateModal/index.tsx +++ b/src/@components/MainPage/UpdateModal/index.tsx @@ -10,7 +10,7 @@ export default function UpdateModal(props: UpdateModalProps) { const { closeHandler } = props; return ( - + 23.04.20 업데이트 피클 업데이트 안내 From 355845ebfba051221184995907a78c78e191eeab Mon Sep 17 00:00:00 2001 From: SNUPI Date: Tue, 2 May 2023 10:11:57 +0900 Subject: [PATCH 2/4] [ feat ] update modal lazy loading --- src/@components/MainPage/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/@components/MainPage/index.tsx b/src/@components/MainPage/index.tsx index f13d033c..2676573d 100644 --- a/src/@components/MainPage/index.tsx +++ b/src/@components/MainPage/index.tsx @@ -1,3 +1,5 @@ +import { lazy } from "react"; + import Footer from "../@common/Footer"; import Header from "../@common/Header"; import useGTMPage from "../@common/hooks/useGTMPage"; @@ -10,7 +12,8 @@ import MoodPiickle from "./MoodPiickle"; import PiickleMe from "./PiickleMe"; import StripBanner from "./StripBanner"; import { St } from "./style"; -import UpdateModal from "./UpdateModal"; + +const UpdateModal = lazy(() => import("./UpdateModal")); export default function MainPage() { const { isOpened, handleCloseModal } = useUpdateModal(); From bfbae6340cd56245a991b117ab0c94c9f73e2905 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Tue, 2 May 2023 10:17:27 +0900 Subject: [PATCH 3/4] [ refactor ] update modal --- src/@components/MainPage/UpdateModal/index.tsx | 13 ++++++------- src/@components/MainPage/hooks/useUpdateModal.ts | 6 ++++-- src/@components/MainPage/index.tsx | 4 +--- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/@components/MainPage/UpdateModal/index.tsx b/src/@components/MainPage/UpdateModal/index.tsx index 2e658091..f8808e7a 100644 --- a/src/@components/MainPage/UpdateModal/index.tsx +++ b/src/@components/MainPage/UpdateModal/index.tsx @@ -1,16 +1,15 @@ import { versionUpdateList } from "../../../util/main/versionUpdateList"; import Modal from "../../@common/Modal"; +import useUpdateModal from "../hooks/useUpdateModal"; import * as St from "./style"; -interface UpdateModalProps { - closeHandler: () => void; -} +export default function UpdateModal() { + const { isOpened, handleCloseModal } = useUpdateModal(); -export default function UpdateModal(props: UpdateModalProps) { - const { closeHandler } = props; + if (!isOpened) return null; return ( - + 23.04.20 업데이트 피클 업데이트 안내 @@ -26,7 +25,7 @@ export default function UpdateModal(props: UpdateModalProps) { ))} - 확인했어요 + 확인했어요 ); diff --git a/src/@components/MainPage/hooks/useUpdateModal.ts b/src/@components/MainPage/hooks/useUpdateModal.ts index 99584802..50c50919 100644 --- a/src/@components/MainPage/hooks/useUpdateModal.ts +++ b/src/@components/MainPage/hooks/useUpdateModal.ts @@ -1,13 +1,15 @@ import { useEffect, useState } from "react"; +const POPUP_SESSION_KEY = "popup-shown"; + export default function useUpdateModal() { const [isOpened, setIsOpened] = useState(false); useEffect(() => { - const isPopupShown = sessionStorage.getItem("popup-shown"); + const isPopupShown = sessionStorage.getItem(POPUP_SESSION_KEY); if (!isPopupShown) { setIsOpened(true); - sessionStorage.setItem("popup-shown", "true"); + sessionStorage.setItem(POPUP_SESSION_KEY, "true"); } }, []); diff --git a/src/@components/MainPage/index.tsx b/src/@components/MainPage/index.tsx index 2676573d..eae671fd 100644 --- a/src/@components/MainPage/index.tsx +++ b/src/@components/MainPage/index.tsx @@ -6,7 +6,6 @@ import useGTMPage from "../@common/hooks/useGTMPage"; import Banner from "./Banner"; import BestPiickle from "./BestPiickle"; import CTABtn from "./CTABtn"; -import useUpdateModal from "./hooks/useUpdateModal"; import Medley from "./Medley"; import MoodPiickle from "./MoodPiickle"; import PiickleMe from "./PiickleMe"; @@ -16,7 +15,6 @@ import { St } from "./style"; const UpdateModal = lazy(() => import("./UpdateModal")); export default function MainPage() { - const { isOpened, handleCloseModal } = useUpdateModal(); useGTMPage(); return ( @@ -30,7 +28,7 @@ export default function MainPage() {