'use client';
import { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import type { Components } from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeSanitize from 'rehype-sanitize';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Copy, Check, Terminal, ExternalLink } from 'lucide-react';
import { clsx } from 'clsx';
import rehypeSlug from 'rehype-slug';
interface MarkdownRendererProps {
content: string;
}
export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
const components: Components = {
// 1. 코드 블록 커스텀
code({ className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
const language = match ? match[1] : '';
const codeString = String(children).replace(/\n$/, '');
if (match) {
return (
);
}
return (
{children}
);
},
// 2. 인용구
blockquote({ children }) {
return (
{children}
);
},
// 3. 링크
a({ href, children }) {
const isExternal = href?.startsWith('http');
return (
{children}
{isExternal && }
);
},
// 4. 테이블
table({ children }) {
return (
);
},
thead({ children }) {
return {children};
},
th({ children }) {
return {children} | ;
},
td({ children }) {
return {children} | ;
},
// 5. 이미지
img({ src, alt }) {
return (
{/* eslint-disable-next-line @next/next/no-img-element */}
{
event.currentTarget.style.display = 'none';
}}
/>
{alt && {alt}}
);
},
// 6. 리스트 스타일
ul({ children }) {
return ;
},
ol({ children, ...props }) {
return (
{children}
);
},
li({ children }) {
return {children};
},
// 7. 헤딩 스타일
h1({ children, ...props }) {
return {children}
;
},
h2({ children, ...props }) {
return {children}
;
},
h3({ children, ...props }) {
return {children}
;
},
};
return (
{content}
);
}
// 코드 블록 컴포넌트
function CodeBlock({ language, code }: { language: string; code: string }) {
const [isCopied, setIsCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(code);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000);
};
return (
{language && (
{language}
)}
{code}
);
}