Next.js 블로그 만들기 Ver.2

import { Post } from '@/models/post';
import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';
 
const postRoot = join(process.cwd(), 'app/(post)'); // Users/banghojin/Desktop/blog/blog/app/(post) 형식으로 변환
 
export const getPostBySlug = (slug: string): Post => {
  const [tag, id] = slug.split('/'); //[ 'think/why-i-use-next' ] 형태로 받은 데이터를 태그, id로 가져와서
  const fullPath = join(postRoot, `${slug}/page.mdx`); // '/Users/banghojin/Desktop/blog/blog/app/(post)/think/why-i-use-next/page.mdx' 형태로 변환
  const fileContents = fs.readFileSync(fullPath, 'utf8'); // 해당 파일을 읽고
  const { data, content } = matter(fileContents); //data = --- --- 안에 있는 데이터들, content는 md 코드
 
  return {
    id,
    tag,
    slug,
    content,
    title: data.title,
    postTag: data.tag,
  };
};
 
export const getPosts = () => {
  const dirs = fs.readdirSync(postRoot, { recursive: true }); // postRoot안에 있는 모든 루트 파일트리를 가져와서 ['etc',study,layout.tsx ...]
  const paths = dirs.map((path) => path);
  const slugs = paths.filter((path) => path.split('/').length === 2); //[ 'think/why-i-use-next' ] 해당 형태로 변환
  const posts = slugs.map(getPostBySlug);
 
  return posts;
};

{
    id: 'test-post',
    tag: 'test',
    slug: 'test/test-post',
    content: '\n' +
      ##test',
    title: '테스트 글입니다',
    postTag: 'test'
}

'@/utils/getPosts';
import React from 'react';
 
const HomePage = () => {
  const posts = getPosts();
 
  return (
    <div>
      <PostListLayout posts={posts} />
    </div>
  );
};
 
export default HomePage;

const PostListLayout = ({ posts }: PostListLayoutType) => {
  const [divide, setDivide] = useState<Option>(['tag', '전체']);
  const divideOptions: Option[1][] = ['전체', '학습', '기술', '생각', '경험'];
  const clickBtn = () => {
    setDivide((prevDivide) => {
      const currentIndex = divideOptions.indexOf(prevDivide[1]);
      const nextIndex = (currentIndex + 1) % divideOptions.length;
      return ['tag', divideOptions[nextIndex]];
    });
  };
  const dividedPosts = useMemo(() => {
    const [_, tag] = divide;
    return tag === '전체' ? posts : posts.filter((post) => getTag(post.tag) === tag);
  }, [posts, divide]);
 
  return (
    <Suspense fallback={null}>
      <main className="max-w-2xl m-auto mb-10 text-sm ">
        <header className="flex justify-between text-sm text-gray-600 dark:text-gray-300">
          <div className="flex items-center">
            <button
              onClick={clickBtn}
              className={`font-naverBold flex mr-2 items-center justify-center w-12 h-9 text-left text-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-[#242424] active:bg-gray-200 dark:active:bg-[#222]`}
            >
              {divide[1] === '전체' ? 'tag' : `${divide[1]}`}
            </button>
            <span className="pl-2 grow font-naverBold">title</span>
          </div>
          <div className="text-sm flex items-center font-naverBold">
            {dividedPosts?.length} posts
          </div>
        </header>
 
        <PostList posts={posts} divide={divide} />
      </main>
    </Suspense>
  );
};

export default async function Layout({ children }) {
  const posts = getPosts();
 
  return (
    <article className="mb-10 text-gray-800 dark:text-gray-300">
      <PostHeader posts={posts} />
      {children}
    </article>
  );
}

export function PostHeader({ posts }: PostHeaderType) {
  // think/why-i-use-next 으로 왔을 때 ["think" , "why-i-use-next"] 형식
  const segments = useSelectedLayoutSegments();
 
  const post = posts.find((post) => post.id === segments[segments.length - 1]);
 
  if (post == null) return <></>;
 
  return (
    <>
      <div className="pt-3 pb-8">
        <div
          className="max-w-max flex items-center py-1 px-2 bg-gray-200 font-naverBold rounded-md mb-2 dark:text-white dark:bg-gray-800"
          suppressHydrationWarning={true}
        >
          {getTag(post.tag)}
        </div>
        <h1 className=" text-2xl font-naverBold dark:text-gray-100">{post.title}</h1>
      </div>
    </>
  );
}

{
id: 'test-post',
tag: 'test',
slug: 'test/test-post',
content: '\n' +
##test',
title: '테스트 글입니다',
postTag: 'test'
}