feat: nextjs 마이그레이션 마무리

SEOKKAMONI · Dec 1, 2024 · d414999 · d414999
1 parent 7220a0d
commit d414999
Show file tree

Hide file tree

Showing 24 changed files with 1,445 additions and 30 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: false,
   images: {
     remotePatterns: [
       {

diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "marked": "^15.0.3",
     "next": "14.2.18",
     "overlay-kit": "^1.4.1",
     "react": "^18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/posts/test.mdx b/posts/test.mdx
@@ -0,0 +1,7 @@
+---
+title: 테스트
+date: 2024-12-01
+thumbnail: "/images/test/thumbnail.png"
+---
+
+테스트
diff --git a/public/images/test/thumbnail.png b/public/images/test/thumbnail.png
diff --git a/src/app/icon.png b/src/app/icon.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,18 @@ import Providers from "./providers";
 
 import "@/styles/globals.css";
 
+export const metadata = {
+  title: "SEOKKAMONI.blog",
+  description: "blog.seokkamoni.me",
+  openGraph: {
+    title: "SEOKKAMONI.blog",
+    description: "blog.seokkamoni.me",
+    url: "https://blog.seokkamoni.me",
+    siteName: "SEOKKAMONI.blog",
+  },
+  metadataBase: new URL("https://blog.seokkamoni.me"),
+};
+
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="ko">

diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
diff --git a/src/app/post/[title]/page.tsx b/src/app/post/[title]/page.tsx
@@ -0,0 +1,29 @@
+import { getPosts } from "@/utils/getPosts";
+import PostView from "@/views/PostView";
+import type { Metadata } from "next";
+
+export type PostPageParams = { title: string };
+
+interface PostPageProps {
+  params: PostPageParams;
+}
+
+export const generateMetadata = ({ params }: PostPageProps): Metadata => {
+  const posts = getPosts();
+  const post = posts.find(async (post) => post.title === params.title);
+  const ogImage = post?.thumbnail || "/opengraph-image.png";
+
+  return {
+    title: post?.title,
+    openGraph: {
+      publishedTime: post?.date,
+      images: [ogImage],
+    },
+  };
+};
+
+const PostPage = async ({ params }: PostPageProps) => (
+  <PostView params={params} />
+);
+
+export default PostPage;
diff --git a/src/components/ContactOverlay.tsx b/src/components/ContactOverlay.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/utils/twMerge";
+import { cn } from "@/utils/cn";
 import IconClose from "./icons/IconClose";
 
 const SOCAILS = [

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "@/utils/twMerge";
+import { cn } from "@/utils/cn";
 import { overlay } from "overlay-kit";
 import { useEffect, useState } from "react";
 import ContactOverlay from "./ContactOverlay";

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -2,10 +2,8 @@ import Link from "next/link";
 
 const Logo = () => {
   return (
-    <Link href="/">
-      <span className="cursor-pointer text-[18px] font-bold text-black">
-        SEOKKAMONI.blog
-      </span>
+    <Link href="/" className="cursor-pointer text-[18px] font-bold text-black">
+      SEOKKAMONI.blog
     </Link>
   );
 };

diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -0,0 +1,20 @@
+import { marked } from "marked";
+
+import "@/styles/markdown.css";
+
+interface MarkdownProps {
+  html: string;
+}
+
+const Markdown = ({ html }: MarkdownProps) => {
+  const __html = marked(html, { async: false });
+
+  return (
+    <div
+      className="markdown-body w-full h-full"
+      dangerouslySetInnerHTML={{ __html }}
+    />
+  );
+};
+
+export default Markdown;
diff --git a/src/components/Spacer.tsx b/src/components/Spacer.tsx
@@ -0,0 +1,17 @@
+interface SpacerProps {
+  height?: string | number;
+  width?: string | number;
+}
+
+const Spacer = ({ height, width }: SpacerProps) => {
+  return (
+    <div
+      style={{
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height,
+      }}
+    />
+  );
+};
+
+export default Spacer;