04. 커스텀 컴포넌트로 꾸미기

개요

02. MDX 파일 파싱 세팅에서 혼동을 방지하기위해 제외하고 보여드렸습니다만,
커스텀 컴포넌트를 적용하고 있습니다.

우선 커스텀 컴포넌트의 작동방식에 대해 이해하고, 어떻게 추가할지 고려해봅시다.

커스텀 컴포넌트의 작동방식

우선 기존의 MDX로 파싱된 데이터가 어떤 형태로 블로그에
표시되는지 확인해봐야 합니다.

저희가 마크다운으로 작성한 모든데이터가 html로 파싱되어
화면에 보여지는 것을 확인할 수 있습니다.
이러한 태그에 디자인된 새로운 컴포넌트를 할당하거나, 아예 새로운 컴포넌트를 만들 수 있습니다.

커스텀 컴포넌트 추가하기

components/mdx/index.tsx

tsx

const Mdx_Module = {
    Card,
    Cards,
    Callout,
    img: Image as any,
    strong: Strong,
    blockquote: Blockquote,
    pre: CodeBlock,
    tr: Tr,
    th: Th,
    td: Td,
    table: Table,
    hr: Hr,
    figcaption: FigCaption,
};
 
const options = {
    keepBackground: true,
    theme: {
        dark: 'dracula',
        light: 'github-light',
    },
    defaultLang: {
        block: 'js',
        inline: 'js',
    },
};
 
const Mdx_Body = async ({ content }: { content: string }) => {
    return (
        <MDXRemote
            options={{
                mdxOptions: {
                    remarkPlugins: [
                        // GitHub Flavored Markdown
                        remarkGfm,
                        // Accessibility for emojis
                        remarkA11yEmoji,
                        // Line breaks in MDX
                        remarkBreaks,
                    ],
                    rehypePlugins: [
                        // Pretty Code Block (Shiki)
                        [rehypePrettyCode, options],
                        rehypeSlug,
                    ],
                    format: 'mdx',
                },
            }}
            source={content}
            components={Mdx_Module}
        />
    );
};
 
export default Mdx_Body;

이전에는 없었던 내용을 추가합니다.

내가 만들 컴포넌트 - 이름으로 할당
기존 컴포넌트를 리 디자인 - hr: Hr, 컴포넌트를 할당

커스텀 컴포넌트 만들기 - 리디자인

한번 실제로 만들어 보겠습니다. 우선 간단하게 hr, 마크다운에서는 ---로 표기하는 태그죠 이 태그를 한번 디자인해보겠습니다.

components/mdx/modules/Hr.tsx

tsx

import React from 'react';
import { PiScissors } from 'react-icons/pi';
 
export const Hr = () => {
    return (
        <div className='w-full h-4 flex items-center my-4'>
            <PiScissors className='text-4xl mt-1 text-gray-400' />
            <div className='w-full h-full border-b-4 border-dashed rounded-md border-gray-300 dark:border-gray-600'></div>
        </div>
    );
};

아주 간단하게 리디자인된 Hr태그 입니다. 이제 제가 사용하면 형태에 맞게 표기됩니다.

커스텀 컴포넌트 만들기 - 신규

이번에는 아예 새로운 컴포넌트를 만들어 봅시다.
저는 이 블로그에서 Callout이라는 컴포넌트를 만들었습니다.

구문 강조용으로 사용하는데요, 실제 구조를 같이 보겠습니다.

components/mdx/modules/Callout.tsx

tsx

import { calloutData } from '@/utils/mdx/calloutData';
import { PropsWithChildren } from 'react';
 
interface CalloutProps extends PropsWithChildren {
    type?: string;
}
 
export const Callout = (props: CalloutProps) => {
    const type = props.type || 'default';
    const metaObj = calloutData[type];
    const Icon = metaObj.icon;
    const boxClassName = metaObj.boxClass;
 
    return (
        <div
            className={`${boxClassName} my-6 flex items-center gap-3 rounded-md px-5 py-4`}
        >
            <div>
                <Icon />
            </div>
            <div className='font-inherit flex-1 text-white text-2xl md:text-3xl'>
                {props.children}
            </div>
        </div>
    );
};

props로 받은 type과 children을 활용해서 데이터를 표기합니다. 이제 실제로 마크다운에서 사용할 때

콜아웃 테스트

위와 같이 사용할 수 있습니다.

다음 포스트에는 게시글에서의 목차, TOC를 직접 만들어 봅시다.

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...