fix: document markdown debugging

package.json

@@ -66,8 +66,10 @@
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.12.7",
     "refractor": "^4.8.1",
+    "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remirror": "^2.0.39",
+    "strip-markdown": "^6.0.0",
     "tailwind-merge": "^2.2.2",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",

src/app/(routes)/document/[id]/(main)/@header/default.tsx

@@ -24,7 +24,7 @@ const Header = () => {
   const router = useRouter()
   const { id } = useParams()
   const { getPreviousPath } = usePreviousPath({ getCustomPath: true })
-  const { data } = useQuery(queries.document.item(Number(id[0])))
+  const { data } = useQuery(queries.document.item(Number(id)))
 
   const handleClickCancel = () => {
     const previousPath = getPreviousPath()
@@ -58,7 +58,7 @@ const Header = () => {
                 130
               </Text>
 
-              <Link href={`${id[0]}/modify`} className="ml-[14px]">
+              <Link href={String(id) + '/modify'} className="ml-[14px]">
                 <Icon name="write-line" className="size-[24px]" />
               </Link>
               {/* 노션일 경우 아래 아이콘 렌더링 */}
@@ -149,7 +149,7 @@ const Header = () => {
 
         {/* data: 노트 제목, 문제 수, 글자 수, 마지막 수정 날짜 */}
         <div className=" px-[16px] pb-[18px] pt-[66px]">
-          <h2 className="mb-[8px] text-title2">{data?.name}</h2>
+          <h2 className="mb-[8px] text-title2">{data?.documentName}</h2>
           <div className="flex items-center text-text1-medium text-text-sub">
             <Text as="span">{data?.totalQuizCount}문제</Text>
             <Icon name="middle-dot" className="mx-[8px]" />

src/app/(routes)/document/[id]/modify/@header/default.tsx

@@ -22,11 +22,11 @@ const Header = () => {
     const file = new File([blob], `${title}.md`, { type: 'text/markdown' })
 
     updateDocumentMutate(
-      { documentId: Number(id[0]), request: { name: title, file } },
+      { documentId: Number(id), request: { name: title, file } },
       {
         onSuccess: () => {
           toast({ description: '노트가 수정되었어요' })
-          router.push(`/document/${id[0]}`)
+          router.push('/document/' + String(id))
         },
       }
     )

src/features/document/components/document-detail-controller.tsx

@@ -22,7 +22,7 @@ const DocumentDetailController = () => {
         {tabs.map((tab) => (
           <Link
             key={tab.key}
-            href={`/document/${id[0]}?tab=${tab.key}`}
+            href={`/document/${String(id)}?tab=${tab.key}`}
             className={cn(
               'grow px-[16px] pb-[12px] mt-[12px] border-b border-border-divider flex-center',
               activeTab === tab.key && 'border-b-2 border-button-fill-selected'

src/features/document/components/swipeable-document-card/index.tsx

@@ -13,6 +13,10 @@ import MoveDocumentDrawer from '@/features/document/components/move-document-dra
 import DeleteDocumentDialog from '../delete-document-dialog'
 import usePreviousPath from '@/shared/hooks/use-previous-path'
 import { useDocumentContext } from '../../contexts/document-context'
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkStringify from 'remark-stringify'
+import stripMarkdown from 'strip-markdown'
 
 interface DocumentProps {
   id: number
@@ -64,6 +68,16 @@ const SwipeableDocumentCard = ({
     setIsDragging(false)
   }
 
+  const getTextRemoveMarkdownSyntax = (markdown: string): string => {
+    const result = unified()
+      .use(remarkParse) // 마크다운 파싱
+      .use(stripMarkdown) // 문법 제거
+      .use(remarkStringify)
+      .processSync(markdown) // 동기 처리
+
+    return String(result) // 결과 반환
+  }
+
   return (
     <div
       onClick={() => {
@@ -122,8 +136,9 @@ const SwipeableDocumentCard = ({
             typography="text1-regular"
             className="w-[calc(100%-55px)] truncate text-nowrap break-all text-text-sub"
           >
-            {content}
+            {getTextRemoveMarkdownSyntax(content)}
           </Text>
+
           <Text typography="text2-medium" className="flex w-fit items-center text-text-sub">
             <span>{quizCount}문제</span>
             <Icon name="middle-dot" className="mx-[8px]" />

src/features/document/screens/document-content.tsx

@@ -5,16 +5,63 @@ import Text from '@/shared/components/ui/text'
 import { queries } from '@/shared/lib/tanstack-query/query-keys'
 import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
+import { ClassAttributes, HTMLAttributes } from 'react'
+import Markdown, { ExtraProps } from 'react-markdown'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import remarkGfm from 'remark-gfm'
 
 const DocumentContent = () => {
   const { id } = useParams()
-  const { data, isPending } = useQuery(queries.document.item(Number(id[0])))
+  const { data, isPending } = useQuery(queries.document.item(Number(id)))
+
+  const formattedContent = data?.content.replace(/\n/g, '\n\n')
 
   return (
     <div className="px-[20px] pb-[132px] pt-[10px]">
-      {isPending ? <Loading center /> : data && <Text className="font-suit">{data.content}</Text>}
+      {isPending ? (
+        <Loading center />
+      ) : (
+        data && (
+          <Text className="font-suit">
+            <Markdown
+              remarkPlugins={[remarkGfm]}
+              components={{ code: handleMarkDownCodeBlock, p: handleParagraph }}
+            >
+              {formattedContent}
+            </Markdown>
+          </Text>
+        )
+      )}
     </div>
   )
 }
 
 export default DocumentContent
+
+const handleMarkDownCodeBlock = (
+  props: ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps
+) => {
+  // style, node, ref는 사용하지 않음
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, className, style, node, ref, ...rest } = props
+  const match = /language-(\w+)/.exec(className || '')
+  return match ? (
+    <SyntaxHighlighter {...rest} style={dracula} language={match[1]} PreTag="div">
+      {String(children).replace(/\n$/, '')}
+    </SyntaxHighlighter>
+  ) : (
+    <code {...props} className={className}>
+      {children}
+    </code>
+  )
+}
+
+const handleParagraph = (props: HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <>
+      <p {...props}>{props.children}</p>
+      <br />
+    </>
+  )
+}

src/features/pages/documents-in-directory.tsx

@@ -58,7 +58,7 @@ const DocumentsInDirectory = () => {
               id={document.id}
               createType={document.documentType}
               title={document.name}
-              content={document.content.slice(0, 40)}
+              content={document.previewContent ?? ''}
               quizCount={document.totalQuizCount}
               characterCount={document.characterCount}
               directory={document.directory.name}

src/features/pages/modify-document.tsx

@@ -13,7 +13,7 @@ import { queries } from '@/shared/lib/tanstack-query/query-keys'
 
 const ModifyDocument = () => {
   const { id } = useParams()
-  const { data, isPending } = useQuery(queries.document.item(Number(id[0])))
+  const { data, isPending } = useQuery(queries.document.item(Number(id)))
   const { editorMarkdownContent: content } = useEditDocumentContext()
 
   if (isPending) {

src/types/document.d.ts

@@ -31,7 +31,9 @@ type DocumentItem = {
   id: number
   documentType: CreateType
   name: string
+  documentName?: string
   status: DocumentStatus
+  previewContent?: string
   content: string
   characterCount: number
   totalQuizCount: number

yarn.lock

@@ -11069,6 +11069,16 @@ remark-stringify@^11.0.0:
     mdast-util-to-markdown "^2.0.0"
     unified "^11.0.0"
 
+remark@^15.0.1:
+  version "15.0.1"
+  resolved "https://registry.npmjs.org/remark/-/remark-15.0.1.tgz"
+  integrity sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    remark-parse "^11.0.0"
+    remark-stringify "^11.0.0"
+    unified "^11.0.0"
+
 remirror@^2.0.39, [email protected]:
   version "2.0.40"
   resolved "https://registry.npmjs.org/remirror/-/remirror-2.0.40.tgz"
@@ -11810,6 +11820,13 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strip-markdown@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/strip-markdown/-/strip-markdown-6.0.0.tgz"
+  integrity sha512-mSa8FtUoX3ExJYDkjPUTC14xaBAn4Ik5GPQD45G5E2egAmeV3kHgVSTfIoSDggbF6Pk9stahVgqsLCNExv6jHw==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+
 style-loader@^3.3.1:
   version "3.3.4"
   resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz"