[FEAT] react notion x 및 NotionRender 업데이트 (morethanmin#174)

* Feat: getPosts 요청 감소 로직 추가

* Feat: react-notion-x 업데이트 및 NotionRederer 수정

package.json

@@ -26,7 +26,7 @@
     "react-cusdis": "^2.1.3",
     "react-dom": "^17.0.2",
     "react-icons": "^4.4.0",
-    "react-notion-x": "^4.11.0"
+    "react-notion-x": "^6.16.0"
   },
   "devDependencies": {
     "@types/gtag.js": "^0.0.12",

src/containers/Detail/components/PageDetail/index.tsx

@@ -1,12 +1,32 @@
-import {
-  NotionRenderer,
-  Equation,
-  Code,
-  Collection,
-  CollectionRow,
-} from "react-notion-x"
+import { NotionRenderer } from "react-notion-x"
 import { TPost } from "@/src/types"
 import React from "react"
+import dynamic from "next/dynamic"
+import Link from "next/link"
+import Image from "next/image"
+const Code = dynamic(() =>
+  import("react-notion-x/build/third-party/code").then((m) => m.Code)
+)
+const Collection = dynamic(() =>
+  import("react-notion-x/build/third-party/collection").then(
+    (m) => m.Collection
+  )
+)
+const Equation = dynamic(() =>
+  import("react-notion-x/build/third-party/equation").then((m) => m.Equation)
+)
+const Pdf = dynamic(
+  () => import("react-notion-x/build/third-party/pdf").then((m) => m.Pdf),
+  {
+    ssr: false,
+  }
+)
+const Modal = dynamic(
+  () => import("react-notion-x/build/third-party/modal").then((m) => m.Modal),
+  {
+    ssr: false,
+  }
+)
 
 const mapPageUrl = (id: string) => {
   return "https://www.notion.so/" + id.replace(/-/g, "")
@@ -23,10 +43,13 @@ const PageDetail: React.FC<Props> = ({ blockMap, data }) => {
       <NotionRenderer
         recordMap={blockMap}
         components={{
-          equation: Equation,
-          code: Code,
-          collection: Collection,
-          collectionRow: CollectionRow,
+          Code,
+          Collection,
+          Equation,
+          Modal,
+          Pdf,
+          nextImage: Image,
+          nextLink: Link,
         }}
         mapPageUrl={mapPageUrl}
       />

src/containers/Detail/components/PostDetail/index.tsx

@@ -1,16 +1,36 @@
-import {
-  NotionRenderer,
-  Equation,
-  Code,
-  Collection,
-  CollectionRow,
-} from "react-notion-x"
+import { NotionRenderer } from "react-notion-x"
+import dynamic from "next/dynamic"
 import { TPost } from "@/src/types"
 import React from "react"
 import PostHeader from "./PostHeader"
 import Footer from "./PostFooter"
 import CommentBox from "./CommentBox"
 import Category from "@components/Category"
+import Image from "next/image"
+import Link from "next/link"
+const Code = dynamic(() =>
+  import("react-notion-x/build/third-party/code").then((m) => m.Code)
+)
+const Collection = dynamic(() =>
+  import("react-notion-x/build/third-party/collection").then(
+    (m) => m.Collection
+  )
+)
+const Equation = dynamic(() =>
+  import("react-notion-x/build/third-party/equation").then((m) => m.Equation)
+)
+const Pdf = dynamic(
+  () => import("react-notion-x/build/third-party/pdf").then((m) => m.Pdf),
+  {
+    ssr: false,
+  }
+)
+const Modal = dynamic(
+  () => import("react-notion-x/build/third-party/modal").then((m) => m.Modal),
+  {
+    ssr: false,
+  }
+)
 
 const mapPageUrl = (id: string) => {
   return "https://www.notion.so/" + id.replace(/-/g, "")
@@ -43,10 +63,13 @@ const PostDetail: React.FC<Props> = ({ blockMap, data }) => {
             <NotionRenderer
               recordMap={blockMap}
               components={{
-                equation: Equation,
-                code: Code,
-                collection: Collection,
-                collectionRow: CollectionRow,
+                Code,
+                Collection,
+                Equation,
+                Modal,
+                Pdf,
+                nextImage: Image,
+                nextLink: Link,
               }}
               mapPageUrl={mapPageUrl}
             />

src/libs/apis/getPosts.ts

@@ -6,11 +6,24 @@ import getAllPageIds from "@libs/utils/notion/getAllPageIds"
 import getPageProperties from "@libs/utils/notion/getPageProperties"
 import { TPosts } from "@customTypes/index"
 
+declare global {
+  var notionDatas: { TPosts: TPosts; savedDate: Date }
+}
+
 /**
  * @param {{ includePages: boolean }} - false: posts only / true: include pages
  */
 
 export async function getPosts() {
+  if (global?.notionDatas) {
+    const saved = global.notionDatas.savedDate
+    const now = new Date()
+    const diff = (now.getTime() - saved.getTime()) / 1000
+    if (diff < 60 * 60) {
+      return global.notionDatas.TPosts
+    }
+  }
+
   let id = CONFIG.notionConfig.pageId as string
   const api = new NotionAPI()
 
@@ -52,6 +65,8 @@ export async function getPosts() {
       return dateB - dateA
     })
 
+    global.notionDatas = { TPosts: data, savedDate: new Date() }
+
     return data as TPosts
   }
 }