feat: Link to Notion

bibbi-team · Jan 31, 2024 · cc8e201 · cc8e201
1 parent d5b3326
commit cc8e201
Show file tree

Hide file tree

Showing 15 changed files with 1,853 additions and 49 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Pretendard-Bold';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: #242427;
+  font-family: Pretendard-Regular, sans-serif;
+}
+
+.privacy-heading {
+  font-weight: bold;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,56 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import {ArticleJsonLd, DefaultSeo} from "next-seo";
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '삐삐',
+  description: '가족 일상공유 어플리케이션',
+  openGraph: {
+    title: '삐삐 - 가족 초대 링크가 도착했어요',
+    description: '입장하고 일상공유를 시작해보세요',
+    url: 'https://no5ing.kr',
+    siteName: 'BbiBbi',
+    images: [
+      {
+        url: 'https://no5ing.kr/og_image.png',
+        width: 800,
+        height: 400,
+      }
+    ],
+    locale: 'ko_KR',
+    type: 'website',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="kr">
+      <head>
+        <ArticleJsonLd
+          useAppDir={true}
+          url="https://no5ing.kr"
+          title="삐삐 - 가족 초대 링크가 도착했어요"
+          authorName={"bbibbi"}
+          datePublished={
+            "2023-01-01T00:00:00+09:00"
+          }
+          description={"입장하고 일상공유를 시작해보세요"}
+          images={
+            [
+              "https://no5ing.kr/og_image.png"
+            ]
+          }
+        />
+      </head>
+
+      <body suppressHydrationWarning={true} className={inter.className}>{children}</body>
+    </html>
+  )
+}
diff --git a/app/links/[id]/page.tsx b/app/links/[id]/page.tsx
@@ -1,10 +1,11 @@
 "use client"
 import {useEffect, useState} from "react";
 import Image from "next/image";
+import bbibbiMain from '../../../public/bbibbi_main.svg'
 import {usePathname, useSearchParams} from "next/navigation";
 
 export default function Page() {
-  const id = usePathname().split("/").pop();
+  const id = usePathname()?.split("/")?.pop();
   const [platform, setPlatform] = useState<"unknown" | "ios" | "android">("unknown");
   const iosTargetUrl = 'https://no5ing.kr/o/'+id + '?retry=1';
   useEffect(() => {
@@ -33,7 +34,7 @@ export default function Page() {
     }
   }
   return <div className={"flex flex-col justify-center items-center h-screen w-screen gap-8"}>
-    <Image src="/oing_icon.png" width={200} height={200} alt={"logo"} />
+    <Image src={bbibbiMain} width={335} height={182} alt={"logo"} />
     <div className={"text-center text-lg text-gray-300"}>
       {platform == "unknown" ? <span>모바일에서만 접근할 수 있어요</span> :  <div className={"bg-slate-500 text-gray-300 font-semibold py-3 px-6 rounded-md text-center"} onClick={handleRoute}>앱으로 이동</div>}
     </div>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,11 @@
+import Image from "next/image";
+import verySad from '../public/very_sad.svg'
+
+export default function NotFound() {
+    return <div className={"flex flex-col justify-center items-center h-screen w-screen gap-8"}>
+        <Image src={verySad} width={200} height={200} alt={"logo"} />
+        <div className={"text-center text-lg text-gray-300"}>
+            <span>페이지를 찾을 수 없어요</span>
+        </div>
+    </div>
+}
diff --git a/app/o/[id]/page.tsx b/app/o/[id]/page.tsx
@@ -1,16 +1,17 @@
 "use client"
 import {useEffect, useState} from "react";
 import Image from "next/image";
+import bbibbiMain from '../../../public/bbibbi_main.svg'
 import {usePathname, useSearchParams} from "next/navigation";
 import axios from "axios";
 
 export default function Page() {
-  const id = usePathname().split("/").pop();
+  const id = usePathname()?.split("/")?.pop();
   const searchParams = useSearchParams();
   const appStoreUrl = 'https://itunes.apple.com/kr/app/id6475082088';
   const playStoreUrl = 'https://play.google.com/store/apps/details?id=com.no5ing.bbibbi' + (id ? '&referrer='+id : '');
   const [platform, setPlatform] = useState<"unknown" | "ios" | "android">("unknown");
-  const retry = searchParams.get("retry");
+  const retry = searchParams?.get("retry");
   useEffect(() => {
     const detectPlatform = () => {
       const unknownWindow = ((window as unknown) as any);
@@ -52,7 +53,7 @@ export default function Page() {
     }
   }
   return <div className={"flex flex-col justify-center items-center h-screen w-screen gap-8"}>
-    <Image src="/oing_icon.png" width={200} height={200} alt={"logo"} />
+    <Image src={bbibbiMain} width={335} height={182} alt={"logo"} />
     <div className={"text-center text-lg text-gray-300"}>
       {platform == "unknown" ? <span>모바일에서만 접근할 수 있어요</span> :  <div className={"bg-slate-500 text-gray-300 font-semibold py-3 px-6 rounded-md text-center"} onClick={handleRoute}>앱으로 이동</div>}
     </div>

diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx
@@ -0,0 +1,20 @@
+import {Code, Collection, Equation} from "@/components/notion_dynamic";
+import { NotionRenderer } from "react-notion-x";
+import { ExtendedRecordMap } from "notion-types";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function NotionPage({ recordMap }: { recordMap: ExtendedRecordMap }) {
+    return <NotionRenderer
+        recordMap={recordMap}
+        fullPage={true}
+        darkMode={false}
+        components={{
+            nextImage: Image,
+            nextLink: Link,
+            Code,
+            Collection,
+            Equation,
+        }}
+    />
+}
diff --git a/components/notion_dynamic.ts b/components/notion_dynamic.ts
@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic'
+
+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)
+)
+
+export { Code, Collection, Equation }