diff --git a/src/components/post/MarkdownRenderer.tsx b/src/components/post/MarkdownRenderer.tsx index 3385043..c6be501 100644 --- a/src/components/post/MarkdownRenderer.tsx +++ b/src/components/post/MarkdownRenderer.tsx @@ -22,7 +22,7 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { // ๐ก๏ธ ์ค์: ์ฌ๊ธฐ์ HTML ํ๊ทธ๋ฅผ ์๋ ํ์ฌ XSS ๊ณต๊ฒฉ ๋ฐฉ์ง rehypePlugins={[rehypeSanitize]} components={{ - // 1. ์ฝ๋ ๋ธ๋ก ์ปค์คํ (Mac ์คํ์ผ ์๋์ฐ + ๋ฌธ๋ฒ ๊ฐ์กฐ) + // 1. ์ฝ๋ ๋ธ๋ก ์ปค์คํ code({ node, inline, className, children, ...props }: any) { const match = /language-(\w+)/.exec(className || ''); const language = match ? match[1] : ''; @@ -44,7 +44,7 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { ); }, - // 2. ์ธ์ฉ๊ตฌ (Blockquote) ์คํ์ผ + // 2. ์ธ์ฉ๊ตฌ blockquote({ children }) { return (
@@ -53,7 +53,7 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { ); }, - // 3. ๋งํฌ (a) ์คํ์ผ + // 3. ๋งํฌ a({ href, children }) { const isExternal = href?.startsWith('http'); return ( @@ -69,7 +69,7 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { ); }, - // 4. ํ ์ด๋ธ ์คํ์ผ + // 4. ํ ์ด๋ธ table({ children }) { return (@@ -89,10 +89,8 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { return{children} ; }, - // 5. ์ด๋ฏธ์ง ์คํ์ผ + // 5. ์ด๋ฏธ์ง img({ src, alt }) { - // rehype-sanitize๊ฐ ์ ์ฉ๋๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก img ํ๊ทธ๊ฐ ํ์ฉ๋์ง๋ง, - // onError ํธ๋ค๋ง ๋ฑ์ ์ํด ์ปค์คํ ์ปดํฌ๋ํธ ์ ์ง๋ ์ข์. return ({ - // ์ด๋ฏธ์ง ๋ก๋ ์คํจ ์ ์จ๊น ์ฒ๋ฆฌ ํน์ ํ๋ ์ด์คํ๋ e.currentTarget.style.display = 'none'; }} /> @@ -110,12 +107,20 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { ); }, - // 6. ๋ฆฌ์คํธ ์คํ์ผ + // 6. ๋ฆฌ์คํธ ์คํ์ผ (์ฌ๊ธฐ๊ฐ ๋ฌธ์ ์์) ul({ children }) { return
{children}
; }, - ol({ children }) { - return{children}
; + // ๐ ๏ธ ์์ ๋จ: ...props๋ฅผ ์ ๋ฌํ์ฌ start ์์ฑ์ ์ ์ฉ + ol({ children, ...props }: any) { + return ( ++ {children} +
+ ); }, li({ children }) { return{children} ; @@ -139,7 +144,7 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) { ); } -// ์ฝ๋ ๋ธ๋ก ์ปดํฌ๋ํธ (๋ณ๊ฒฝ ์์) +// ์ฝ๋ ๋ธ๋ก ์ปดํฌ๋ํธ function CodeBlock({ language, code }: { language: string; code: string }) { const [isCopied, setIsCopied] = useState(false);