youngminss-log

...
📦src
 ┣ 📂app
 ┃ ┣ 📂blog
 ┃ ┃ ┣ 📂[category]
 ┃ ┃ ┃ ┗ 📂[slug]
 ┃ ┃ ┃   ┗ 📜page.tsx   // 글 상세 페이지
 ┃ ┃ ┗ 📜page.tsx       // 글 전체 목록 페이지
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂blog               // 글 모음 디렉터리
 ┃ ┗ 📂category-1
 ┃ ┃ ┗ 📂post-1
 ┃ ┃   ┗ 📜content.mdx  // ex. "/blog/category-1/post-1" 에서 보여줄 글
 ┣ 📂functions
 ┃ ┗ 📜post.ts          // 글 정보 전처리 관련 함수 모음
 ┣ 📂types
 ┃ ┗ 📜post.ts          // 글 데이터 관련 타입
 ┣ 📂components
 ┃ ┣ 📂Comments
 ┃ ┃ ┗ 📜Giscus.tsx
 ┃ ┣ 📂post
 ┃ ┃ ┗ 📜PostBody.tsx   // 전처리된 mdx -> html 컴포넌트
...

import { TPost, TPostAbstract, TPostDetail } from "@/types/post";
import dayjs from "dayjs";
import fs from "fs";
import { sync } from "glob";
import matter from "gray-matter";
import path from "path";
import readingTime from "reading-time";
 
const BASE_PATH = "/src/blog";
const POSTS_PATH = path.join(process.cwd(), BASE_PATH);
 
...
 
export const getPost = async ({
  category,
  slug,
}: {
  category: string;
  slug: string;
}) => {
  const postPath = `${POSTS_PATH}/${category}/${slug}/content.mdx`;
  const post = await parsePost(postPath);
 
  return post;
};
 
const parsePost = async (postPath: string): Promise<TPost> => {
  const postAbstract = parsePostAbstract(postPath);
  const postDetail = await parsePostDetail(postPath);
 
  return { ...postAbstract, ...postDetail };
};
 
// 글 category, slug, path 반환 함수
export const parsePostAbstract = (postPath: string): TPostAbstract => {
  const filePath = postPath
    .slice(postPath.indexOf(BASE_PATH))
    .replace(`${BASE_PATH}/`, "")
    .replace(".mdx", "");
 
  const [category, slug] = filePath.split("/");
  const url = `/blog/${category}/${slug}`;
 
  return { url, category, slug };
};
 
// 글 상세 데이터 파싱 함수
const parsePostDetail = async (postPath: string): Promise<TPostDetail> => {
  const file = fs.readFileSync(postPath, "utf8");
  const { data, content } = matter(file);
 
  const title = data["title"];
  const keywords = data["keywords"]
    ?.split(",")
    .map((keyword: string) => keyword.trim());
  const createdAt = data["createdAt"];
  const dateString = dayjs(data.date).locale("ko").format("YYYY년 MM월 DD일");
  const readingMinutes = Math.ceil(readingTime(content).minutes);
 
  return {
    ...data,
    title,
    keywords,
    createdAt,
    dateString,
    readingMinutes,
    content,
  };
};
 
// 전체 글 카테고리 리스트 반환 함수
export const getCategoryList = () => {
  const categoryPathList: string[] = sync(`${POSTS_PATH}/*`);
  const categoryList = categoryPathList.map(
    (path) => path.split("/").slice(-1)?.[0],
  );
 
  return categoryList;
};
 
// 전체 글 path 리스트 반환 함수 (특정 카테고리에 대한 글 path 리스트도 가능)
export const getPostPathList = (category?: string) => {
  const categoryPath = category || "**";
  const postPathList: string[] = sync(`${POSTS_PATH}/${categoryPath}/**/*.mdx`);
 
  return postPathList;
};
 
// 전체 글 리스트 반환 함수 (특정 카테고리에 대한 글 리스트도 가능)
export const getPostList = async (category?: string) => {
  const pathList: string[] = getPostPathList(category);
  const postList = await Promise.all(
    pathList.map((postPath) => parsePost(postPath)),
  );
 
  return postList;
};
...

import PostBody from "@/components/post/PostBody";
import { getPost } from "@/functions/post";
...
 
type TPostDetailProps = {
  params: { category: string; slug: string };
};
 
...
 
const PostDetail = async ({ params: { category, slug } }: TPostDetailProps) => {
  const post = await getPost({
    category: category,
    slug: slug,
  });
 
  return (
    <>
	  <PostBody post={post} />
    </>
  );
};
 
export default PostDetail;
 

import { TPost } from "@/types/post";
import { MDXRemote } from "next-mdx-remote/rsc";
...
 
const PostBody = ({ post }: { post: TPost }) => {
  ...
  return (
      <MDXRemote
        source={post.content}
		...
      />
  );
};
 
export default PostBody;