#277 업데이트 알림 뷰

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<ModalContents>) {
-  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<ModalContents>) {
       <ModalPortal>
         <St.GrayRoot className={closeOpacityClassName}>
           <St.GrayModal ref={outClickCloserRef}>
-            {closeBtnClassName && (
+            {isNoCloseBtn || (
               <St.CloseBtn type="button" className={closeBtnClassName} onClick={closeHandler}>
                 <IcModalCloseBtn closeBtnClassName={closeBtnClassName} />
               </St.CloseBtn>

src/@components/MainPage/UpdateModal/index.tsx

@@ -1,16 +1,15 @@
-import { versionUpdateList } from "../../../util/main/versionUpdateList";
+import { VERSION_UPDATES } 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 (
-    <Modal theme="GRAY_BOTTOM" closeHandler={closeHandler}>
+    <Modal theme="GRAY_BOTTOM" closeHandler={handleCloseModal} isNoCloseBtn={true}>
       <St.Container>
         <St.Tag>23.04.20 업데이트</St.Tag>
         <St.Title>피클 업데이트 안내</St.Title>
@@ -20,13 +19,13 @@ export default function UpdateModal(props: UpdateModalProps) {
           지금 하는 안내는 1주일 정도만 유지되니 이해 부탁드릴게요!
         </St.Description>
         <St.UpdateLists>
-          {versionUpdateList.map((versionUpdateList) => (
-            <St.ContentsWrapper key={versionUpdateList.id}>
-              ✅<St.Content>{versionUpdateList.content}</St.Content>
+          {VERSION_UPDATES.map((versionUpdate) => (
+            <St.ContentsWrapper key={versionUpdate.id}>
+              ✅<St.Content>{versionUpdate.content}</St.Content>
             </St.ContentsWrapper>
           ))}
         </St.UpdateLists>
-        <St.CheckBtn onClick={closeHandler}>확인했어요</St.CheckBtn>
+        <St.CheckBtn onClick={handleCloseModal}>확인했어요</St.CheckBtn>
       </St.Container>
     </Modal>
   );

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");
     }
   }, []);
 

src/@components/MainPage/index.tsx

@@ -1,19 +1,20 @@
+import { lazy } from "react";
+
 import Footer from "../@common/Footer";
 import Header from "../@common/Header";
 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";
 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();
   useGTMPage();
 
   return (
@@ -27,7 +28,7 @@ export default function MainPage() {
       <PiickleMe />
       <Footer />
       <CTABtn />
-      {isOpened && <UpdateModal closeHandler={handleCloseModal} />}
+      <UpdateModal />
     </St.MainPage>
   );
 }

src/util/main/versionUpdateList.ts

@@ -1,9 +1,9 @@
-type VersionUpdateList = {
+type VersionUpdate = {
   id: number;
   content: string;
 };
 
-export const versionUpdateList: VersionUpdateList[] = [
+export const VERSION_UPDATES: VersionUpdate[] = [
   { id: 1, content: "카드 넘기기가 세로 스크롤로 변경 되었어요!" },
   { id: 2, content: "북마크 이모티콘이 변경 되었어요!" },
   { id: 3, content: "19금 대화주제 필터를 오픈했어요!" },