From ef0c42fd212319fc9e9fa7b1d54ccce1845c9b14 Mon Sep 17 00:00:00 2001
From: Tekiter <tekiter8@gmail.com>
Date: Fri, 21 Jul 2023 01:23:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20=EA=B8=80?=
 =?UTF-8?q?=20=EB=B3=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/blog/article/[id]/page.tsx   |  8 ++-
 .../web/src/components/blog/ArticleDetail.tsx | 65 +++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/blog/ArticleDetail.tsx

diff --git a/apps/web/src/app/blog/article/[id]/page.tsx b/apps/web/src/app/blog/article/[id]/page.tsx
index b8350e5..e2635eb 100644
--- a/apps/web/src/app/blog/article/[id]/page.tsx
+++ b/apps/web/src/app/blog/article/[id]/page.tsx
@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import ArticlePage from '@/components/blog/ArticleDetail';
+
 interface BlogArticlePageProps {
   params: { id: string };
 }
@@ -7,7 +9,11 @@ interface BlogArticlePageProps {
 export const runtime = 'edge';
 
 const BlogArticlePage: FC<BlogArticlePageProps> = ({ params }) => {
-  return <>{params.id}</>;
+  return (
+    <>
+      <ArticlePage id={params.id} />
+    </>
+  );
 };
 
 export default BlogArticlePage;
diff --git a/apps/web/src/components/blog/ArticleDetail.tsx b/apps/web/src/components/blog/ArticleDetail.tsx
new file mode 100644
index 0000000..d65e864
--- /dev/null
+++ b/apps/web/src/components/blog/ArticleDetail.tsx
@@ -0,0 +1,65 @@
+import Link from 'next/link';
+
+import { gateway } from '@/gateway';
+
+import { BlockRenderer } from '../notion/renderer';
+
+interface ArticlePageProps {
+  id: string;
+}
+
+async function ArticlePage({ id }: ArticlePageProps) {
+  const article = await gateway.blog.article.query({ id });
+
+  return (
+    <div className='flex flex-col items-center'>
+      <div className='flex w-full max-w-[800px] flex-col px-[16px]'>
+        <Link href='/blog' className='flex gap-x-[8px] self-start py-[24px] pr-[8px]'>
+          <BackIcon />
+          <span className='text-[16px] font-light leading-[20px] text-gray80'>블로그 홈 가기</span>
+        </Link>
+        {article.thumbnail && (
+          <div className='overflow-clip rounded-lg border border-real-white/10 md:rounded-3xl'>
+            <img src={article.thumbnail.url} alt='Thumbnail Image' />
+          </div>
+        )}
+        <div className='mt-[20px] flex md:mt-[32px]'>
+          {article.category && (
+            <>
+              <Link href={`/blog/category/${article.category}`}>
+                <span className='rounded-[13px] bg-black80 px-[12px] py-[6px] leading-[120%] text-white100'>
+                  {article.category}
+                </span>
+              </Link>
+            </>
+          )}
+        </div>
+        <h1 className='mt-[12px] break-keep text-[28px] font-bold leading-[130%] text-white100 md:text-[40px]'>
+          {article.title}
+        </h1>
+        <div className='mt-[8px] text-[14px] font-light text-gray60'>
+          {/* {article.publishedAt && format(article.publishedAt, 'yyyy.MM.dd')} */}
+          {article.publishedAt.toString()}
+        </div>
+        <div className='mt-[40px] md:mt-[80px]'>
+          <BlockRenderer blocks={article.blocks} renderPageLink={() => <div>Subpage not allowed</div>} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ArticlePage;
+
+function BackIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width={20} height={20} fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M13.852 2.642a.498.498 0 010 .7L7.194 10l6.658 6.658a.498.498 0 010 .7.498.498 0 01-.7 0L6.144 10.35a.498.498 0 010-.7l7.008-7.008a.498.498 0 01.7 0z'
+        fill='#808388'
+      />
+    </svg>
+  );
+}