From bf8c548b6aced823843fb250dd790cb12c21717f Mon Sep 17 00:00:00 2001 From: ParkWonYeop Date: Sat, 27 Dec 2025 21:59:53 +0900 Subject: [PATCH] fix: MarkdownRender MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 포스팅의 숫자가 잘못 표시되는 문제 해결 --- src/components/post/MarkdownRenderer.tsx | 29 ++++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) 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);