[개발자 포트폴리오 > AboutMe] 마크다운 화면에 뿌리기, word highlighting 적용 | MDXRemote, Tailwind

이번 포스팅에서는 저번 포스팅에서 구현한 getAboutMeContent 함수를 사용하여

노션페이지에서 조회한 마크다운을 화면에 뿌리는 과정에 대해 정리해보려 한다. 

 

지난 포스팅

[개발자 포트폴리오 > AboutMe] 노션 페이지 내용 조회 함수 구현 | pageToMarkdown

---

page.tsx 작성

현재 개발하고 있는 AboutMe 페이지는 인덱스 페이지가 될 예정이므로

/app 하위에 존재하던 page.tsx를 수정하여 구현할 예정이다. 

 

/app/page.tsx를 수정하여 AboutMe 페이지 컴포넌트를 구현해보자. 

import { Separator } from '@/components/ui/separator';
import { MDXRemote } from 'next-mdx-remote/rsc';
import remarkGfm from 'remark-gfm';
import rehypeSanitize from 'rehype-sanitize';
import { getAboutMeContent } from '@/lib/notion';

export default async function AboutMe() {
  const { markdown } = await getAboutMeContent();

  return (
    <div className="container py-6 md:py-8 lg:py-12">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-[240px_1fr_240px] md:gap-8">
        {/* 왼쪽 사이드바 */}
        <div className="hidden md:block">
          <div className="sticky top-16">
            {/* 목차 섹션이 들어갈 예정이다 */}
          </div>
        </div>

        {/* 메인 컨텐츠 */}
        <div>
          <div className="prose prose-neutral dark:prose-invert prose-headings:scroll-mt-[var(--header-height)] max-w-none [&>h1:first-of-type]:hidden">
            <MDXRemote
              source={markdown}
              options={{
                mdxOptions: {
                  remarkPlugins: [remarkGfm],
                  rehypePlugins: [rehypeSanitize],
                },
              }}
            />
          </div>
          <Separator className="my-16" />
        </div>

        {/* 오른쪽 사이드바 */}
        <div className="hidden md:block">
          <div className="top-4 space-y-6">
          	{/* 프로필 섹션 및 문의 섹션이 들어갈 예정이다 */}
          </div>
        </div>
      </div>
    </div>
  );
}

 

 

이렇게 하면 마크다운 콘텐츠가 화면에 보기좋게 포맷팅되어 렌더링된다. 

 

MDXRemote 컴포넌트에 사용되는 플러그인들에 대해 지피티에게 물어본 결과,

remarkGfm 플러그인은 표, 체크리스트와 같은 GFM(GitHub Flavored Markdown)을 지원하고

rehypeSanitize 플러그인은 잠재적인 XSS 공격을 방지하기 위해 콘텐츠를 살균한다고 한다. 

 

---

Word Highlighting 적용하기

 

노션에 작성한 내용이 화면에 잘 나타나고 있는것 처럼 보이나 한가지 문제가 있다. 

노션에 하이라이팅했던 단어들이 포트폴리오 페이지에서는 다르게 보여지고 있다. 

위에가 노션. 아래가 포트폴리오 페이지

 

노션에서 하이라이팅한 단어들은 HTML로 변환되는 과정에서 <code> 태그로 감싸지게 되는데, 

Tailwind의 code 태그 스타일링이 적용되어 저렇게 나오는 것 같다. 

 

노션과 동일하게 보여지도록 여러 플러그인들을 적용해보았는데

모두 내가 원하는대로 동작하지 않았다. 

 

그래서 code 태그에 대한 스타일링을 직접 하기로 했다. 

MDXRemote 컴포넌트의 부모 div의 className 속성에 아래 코드 추가하면 된다. 

 [&_code]:bg-[rgba(135,131,120,.15)] 
 [&_code]:text-red-400 
 [&_code]:rounded-sm 
 [&_code]:px-2 
 [&_code]:py-1 
 [&_code]:before:content-none 
 [&_code]:after:content-none

---

이렇게 직접 스타일링을 했더니 노션 페이지와 완전히 똑같지는 않지만 

어느정도 맘에 드는 정도가 되었다. 

다크모드

라이트모드

 

---

이렇게 노션API를 통해 조회한 마크다운을 화면에 뿌릴 수 있게 되었다. 

다음 포스팅에서는 이 마크다운 내용에서 목차들을 추출하여

목차 섹션을 만들어보도록 하겠다.