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);