Update markdown.ts and related files

Author: Minseo Kim

src/hooks/useScheme.ts

@@ -35,7 +35,7 @@ const useScheme = (): [SchemeType, SetScheme] => {
         : "light"
       : data
     setScheme(cachedScheme || defaultScheme)
-  }, [])
+  }, [data, followsSystemTheme, setScheme])
 
   return [data, setScheme]
 }

src/libs/utils/markdown.ts

@@ -22,12 +22,16 @@ const stripMarkdown = (value: string) => {
 }
 
 export const parseHeadings = (content: string, levels: number[]) => {
+  if (typeof content !== "string" || !Array.isArray(levels) || levels.length === 0) {
+    return []
+  }
   const allowed = new Set(levels)
   const lines = content.split(/\r?\n/)
   const counts = new Map<string, number>()
   const headings: HeadingItem[] = []
 
   for (const line of lines) {
+    if (!line || typeof line !== "string") continue
     const match = /^(#{1,6})\s+(.+)$/.exec(line)
     if (!match) continue
 

src/routes/Detail/PageDetail/index.tsx

@@ -7,25 +7,26 @@ type Props = {}
 
 const PageDetail: React.FC<Props> = () => {
   const data = usePostQuery()
-
-  if (!data) return null
-  // About 페이지라면 뱃지/버튼을 직접 렌더링
-  const isAbout = data.slug === "about"
+  // compute derived values with hooks unconditionally
   const contentWithoutBadgeAndButton = useMemo(() => {
+    if (!data) return ""
+    const isAbout = data.slug === "about"
     if (!isAbout) return data.content
     // Daily 뱃지와 View Resume 버튼이 있던 줄 제거
     return data.content
       .replace(/^Daily\s*$/m, "")
       .replace(/^\[View Resume\]\(.*\)$/m, "")
       .trim()
-  }, [data.content, isAbout])
+  }, [data?.content, data?.slug])
+
+  if (!data) return null
 
   return (
     <StyledWrapper>
       <div className="contentCard">
-        {isAbout && <Badge>Daily</Badge>}
+        {data.slug === "about" && <Badge>Daily</Badge>}
         <MarkdownRenderer content={contentWithoutBadgeAndButton} />
-        {isAbout && (
+        {data.slug === "about" && (
           <ResumeButton
             href="https://daram62.github.io/MS_Tech_Blog"
             target="_blank"

src/routes/Detail/PostDetail/CommentBox/Utterances.tsx

@@ -33,7 +33,7 @@ const Utterances: React.FC<Props> = ({ issueTerm }) => {
     return () => {
       anchor.innerHTML = ""
     }
-  }, [scheme, router])
+  }, [scheme, router, issueTerm])
   return (
     <>
       <StyledWrapper id="comments">

src/routes/Detail/PostDetail/index.tsx

@@ -17,13 +17,11 @@ const PostDetail: React.FC<Props> = () => {
   const data = usePostQuery()
   const posts = usePostsQuery()
   const [activeId, setActiveId] = useState<string | null>(null)
-  if (!data) return null
-
-  const category = (data.category && data.category?.[0]) || undefined
-  const headings = useMemo(() => parseHeadings(data.content, [2, 3]), [data.content])
+  const category = (data?.category && data?.category?.[0]) || undefined
+  const headings = useMemo(() => parseHeadings(data?.content ?? "", [2, 3]), [data?.content])
   const currentIndex = useMemo(
-    () => posts.findIndex((post) => post.slug === data.slug),
-    [posts, data.slug]
+    () => posts.findIndex((post) => post.slug === data?.slug),
+    [posts, data?.slug]
   )
   const prevPost = currentIndex > 0 ? posts[currentIndex - 1] : null
   const nextPost =
@@ -56,6 +54,8 @@ const PostDetail: React.FC<Props> = () => {
     return () => observer.disconnect()
   }, [headings])
 
+  if (!data) return null
+
   return (
     <StyledWrapper>
       <div className="layout">

src/routes/Detail/hooks/useMermaidEffect.ts

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import mermaid from "mermaid"
-import { useEffect, useState } from "react"
+import { useEffect, useRef } from "react"
 import { queryKey } from "src/constants/queryKey"
 import useScheme from "src/hooks/useScheme"
 
@@ -27,7 +27,7 @@ const waitForMermaid = (interval = 100, timeout = 5000) => {
   })
 }
 const useMermaidEffect = () => {
-  const [memoMermaid, setMemoMermaid] = useState<Map<number, string>>(new Map())
+  const memoMermaidRef = useRef<Map<number, string>>(new Map())
 
   const { data, isFetched } = useQuery({
     queryKey: queryKey.scheme(),
@@ -54,9 +54,9 @@ const useMermaidEffect = () => {
               element.tagName === "CODE" ? element.parentElement ?? element : element
             const sourceText = element.textContent || ""
 
-            if (memoMermaid.get(i) !== undefined) {
+            if (memoMermaidRef.current.get(i) !== undefined) {
               const svg = await mermaid
-                .render("mermaid" + i, memoMermaid.get(i) || "")
+                .render("mermaid" + i, memoMermaidRef.current.get(i) || "")
                 .then((res) => res.svg)
               target.animate(
                 [
@@ -72,7 +72,7 @@ const useMermaidEffect = () => {
             const svg = await mermaid
               .render("mermaid" + i, sourceText)
               .then((res) => res.svg)
-            setMemoMermaid(memoMermaid.set(i, sourceText))
+            memoMermaidRef.current.set(i, sourceText)
             target.innerHTML = svg
           })
         await Promise.all(promises)

src/routes/Feed/PostList/index.tsx

@@ -48,7 +48,7 @@ const PostList: React.FC<Props> = ({ q }) => {
 
       return newFilteredPosts
     })
-  }, [q, currentTag, currentCategory, currentOrder, setFilteredPosts])
+  }, [q, currentTag, currentCategory, currentOrder, data])
 
   return (
     <>