Merge pull request #31 from 01-binary/update-lib

Update lib

Author: 01-binary

package.json

@@ -16,17 +16,19 @@
     "jotai": "^2.8.0",
     "lodash": "^4.17.21",
     "next": "^13.4.4",
-    "notion-to-utils": "^0.4.21",
+    "notion-to-jsx": "^1.2.7",
+    "notion-to-utils": "^1.0.2",
     "p-map": "^7.0.2",
+    "prismjs": "^1.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
-    "react-notion-x": "^6.16.0",
     "rss": "^1.2.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.195",
     "@types/node": "18.11.10",
+    "@types/prismjs": "^1.26.5",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@types/rss": "^0.0.32",
@@ -51,5 +53,6 @@
       "prettier --write",
       "eslint --fix"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.ff4579ab459bb25aa7c0ff75b62acebe576f6084b36aa842971cf250a5d8c6cd3bc9420b22ce63c7f93a0857bc6ef29291db39c3e7a23aab5adfd5a4dd6c5d71"
 }

pages/_app.tsx

@@ -2,10 +2,10 @@ import type { AppProps } from 'next/app';
 
 import Layout from '@/components/layout';
 
-import 'prismjs/themes/prism-tomorrow.css';
-import 'katex/dist/katex.min.css';
+import 'notion-to-jsx/dist/index.css';
 import '@/assets/styles/index.css';
-import '@/assets/styles/notion-x.css';
+
+import 'prismjs/themes/prism-tomorrow.css';
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (

pages/about.tsx

@@ -1,26 +1,21 @@
 import { GetStaticProps } from 'next';
-import { NotionRenderer } from 'react-notion-x';
+import { NotionBlock, Renderer } from 'notion-to-jsx';
 
-import { ExtendedRecordMap as EmbeddedRecordMap } from '@/interfaces/notion';
-import { getPage } from '@/utils';
+import { notionClient } from '@/utils';
 
 import PageHead from '@/components/common/PageHead';
 
 import { REVALIDATE_TIME } from '@/assets/constants';
 
 interface Props {
-  recordMap: EmbeddedRecordMap;
+  blocks: NotionBlock[];
 }
 
-const AboutPage = ({ recordMap }: Props) => {
+const AboutPage = ({ blocks }: Props) => {
   return (
     <>
       <PageHead title="About" />
-      <article>
-        <NotionRenderer
-          recordMap={recordMap as Parameters<typeof NotionRenderer>[0]['recordMap']}
-        />
-      </article>
+      <Renderer blocks={blocks} />
     </>
   );
 };
@@ -32,11 +27,10 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
 
   if (!aboutId) throw new Error('NOTION_ABOUT_ID is not defined');
 
-  const recordMap = await getPage(aboutId);
-
+  const blocks = (await notionClient.getPageBlocks(aboutId)) as NotionBlock[];
   return {
     props: {
-      recordMap,
+      blocks,
     },
     revalidate: REVALIDATE_TIME,
   };

pages/api/cover-image.ts

@@ -1,15 +1,15 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { getPage, getPageCoverImage } from '@/utils';
+import { notionClient } from '@/utils';
 
 import { IMAGE_MAX_AGE } from '@/assets/constants';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { pageId } = req.query;
 
   try {
-    const recordMap = await getPage(pageId as string);
-    const notionCoverUrl = getPageCoverImage(recordMap) as unknown as URL;
+    const properties = await notionClient.getPageProperties(pageId as string);
+    const notionCoverUrl = properties?.coverUrl || '';
     const response = await fetch(notionCoverUrl);
     const contentType = response.headers.get('content-type');
 

pages/api/profile-image.ts

@@ -8,26 +8,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   if (!process.env.NOTION_PROFILE_ID) throw new Error('NOTION_PROFILE_ID is not defined');
   const pageId = process.env.NOTION_PROFILE_ID;
   try {
-    const response = await notionClient.pages.retrieve({
-      page_id: pageId,
-    });
+    const url = await notionClient.getFileUrl(pageId, 'media');
 
-    // 타입 체크를 위한 조건문 추가
-    if (!('properties' in response) || !response.properties.media) {
-      return res.status(404).json({ message: 'Media files not found' });
-    }
-
-    // 타입 선언 후 안전하게 접근
-    const mediaProperty = response.properties.media;
-
-    // media 파일 배열이 비어있지 않은지 확인 후 파일 URL 추출
-    if (
-      'files' in mediaProperty &&
-      mediaProperty.files.length > 0 &&
-      'file' in mediaProperty.files[0]
-    ) {
-      const fileUrl = mediaProperty.files[0].file.url;
-      const response = await fetch(fileUrl);
+    if (url) {
+      const response = await fetch(url);
       const contentType = response.headers.get('content-type');
 
       if (!contentType) throw new Error('content header does not exist');

pages/posts/[slug].tsx

@@ -1,44 +1,40 @@
 import { ParsedUrlQuery } from 'querystring';
 
 import { GetStaticPaths, GetStaticProps } from 'next';
-import { NotionRenderer } from 'react-notion-x';
+import { NotionBlock, Renderer } from 'notion-to-jsx';
 
-import PostRenderer from '@/features/posts/Renderer';
-import { ExtendedRecordMap } from '@/interfaces/notion';
-import { getIdBySlug, getNotionPosts, getPage, getPageProperties, getSlugs } from '@/utils';
-import { getPreviewImageFromRecordMap } from '@/utils';
-import { siteConfig } from 'site.config';
+import { getIdBySlug, getNotionPosts, getSlugs, notionClient } from '@/utils';
 
 import Giscus from '@/components/common/Giscus';
 import PageHead from '@/components/common/PageHead';
 
 import { REVALIDATE_TIME } from '@/assets/constants';
 
-import { getPageTitle } from '@/utils/getPageTitle';
-
 interface Props {
-  recordMap: ExtendedRecordMap;
+  blocks: NotionBlock[];
   seo: {
     title: string;
     description: string;
     keywords: string;
-    ogImage: string | null;
+    coverUrl: string;
   };
 }
 
-const PostPage = ({ recordMap, seo: { title, description, keywords, ogImage } }: Props) => {
-  if (!recordMap) return null;
+const PostPage = ({ blocks, seo: { title, description, keywords, coverUrl } }: Props) => {
+  if (!blocks) return null;
   return (
     <>
       <PageHead
         title={title}
         description={description}
         keywords={keywords}
-        image={ogImage}
+        image={coverUrl}
+      />
+      <Renderer
+        title={title}
+        cover={coverUrl}
+        blocks={blocks}
       />
-      <article>
-        <PostRenderer recordMap={recordMap as Parameters<typeof NotionRenderer>[0]['recordMap']} />
-      </article>
       <div className="mx-auto max-w-[900px] px-4">
         <Giscus />
       </div>
@@ -55,24 +51,17 @@ interface PostParams extends ParsedUrlQuery {
 export const getStaticProps: GetStaticProps<Props, PostParams> = async ({ params }) => {
   const { slug } = params as PostParams;
   const id = await getIdBySlug(slug as string, process.env.NOTION_POST_DATABASE_ID as string);
-  const recordMap = await getPage(id);
-  const { description, keywords } = await getPageProperties(id);
-  const previewImages = await getPreviewImageFromRecordMap(recordMap);
-
-  const title = getPageTitle(recordMap) as string;
-  const ogImage = `${siteConfig.url}/api/cover-image?pageId=${id}`;
+  const blocks = (await notionClient.getPageBlocks(id)) as NotionBlock[];
+  const properties = await notionClient.getPageProperties(id);
 
   return {
     props: {
-      recordMap: {
-        ...recordMap,
-        preview_images: previewImages,
-      } as ExtendedRecordMap,
+      blocks,
       seo: {
-        title,
-        description,
-        keywords,
-        ogImage,
+        title: properties?.['Name'] || '',
+        description: properties?.['Desc'] || '',
+        keywords: properties?.['Category']?.['name'] || '',
+        coverUrl: properties?.['coverUrl'] || '',
       },
     },
     revalidate: REVALIDATE_TIME,

pages/sitemap.xml.ts

@@ -10,7 +10,6 @@ export const getServerSideProps: GetServerSideProps = async ({ res }) => {
   if (!process.env.NOTION_POST_DATABASE_ID)
     throw new Error('NOTION_POST_DATABASE_ID is not defined');
   const databaseItems = await getNotionPosts(process.env.NOTION_POST_DATABASE_ID);
-
   res.setHeader('Content-Type', 'text/xml');
   res.write(generateSitemap(databaseItems));
   res.end();

src/assets/styles/index.css

@@ -6,49 +6,15 @@
 
 body {
   font-family: Spoqa Han Sans Neo, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui,
-    Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
+    Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
 
   min-width: 360px;
 }
 
-.notion-page {
-  padding-bottom: calc(max(5vh, 32px)) !important;
-  line-height: 1.65;
-}
-
-.notion-text {
-  padding: 0.5em 2px;
-}
-
-.notion-page-cover-wrapper,
-.notion-page-cover-wrapper span,
-.notion-page-cover-wrapper img {
-  max-width: 1200px !important;
-  border-radius: 24px;
-}
-
-.notion-collection-page-properties {
-  display: none !important;
-}
-
-@media only screen and (max-width: 1200px) {
-  .notion-page-cover-wrapper,
-  .notion-page-cover-wrapper span,
-  .notion-page-cover-wrapper img {
-    border-radius: 0;
+/* Prism.js 스타일 오버라이드 */
+@layer utilities {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    font-size: 0.9em !important;
   }
 }
-
-@media (min-width: 1300px) and (min-height: 300px) {
-  .notion-page-content-has-aside {
-    width: calc((97vw + var(--notion-max-width)) / 2);
-  }
-}
-
-.notion-page-cover-wrapper {
-  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
-}
-
-.notion-aside-table-of-contents-header {
-  display: none;
-}