From c3f7d201d55621cf5534e87f52c59e5153c8dd82 Mon Sep 17 00:00:00 2001
From: "nageuna922@gmail.com" <nageuna922@gmail.com>
Date: Tue, 10 Dec 2024 16:49:29 +0900
Subject: [PATCH] refactor: markdown processor

---
 .../search/components/search-item/index.tsx   |  2 +-
 .../search/screen/search-in-document.tsx      | 23 ++++---------------
 src/features/search/utils/index.tsx           | 16 +++++++++++++
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/features/search/components/search-item/index.tsx b/src/features/search/components/search-item/index.tsx
index 9843a2ff..995f9f94 100644
--- a/src/features/search/components/search-item/index.tsx
+++ b/src/features/search/components/search-item/index.tsx
@@ -6,7 +6,7 @@ import DocumentTypeIcon from '@/features/document/components/document-type-icon'
 
 interface Props {
   createType: Document.ItemInList['documentType']
-  documentTitle: string
+  documentTitle: React.ReactNode
   matchingSentence: React.ReactNode
   resultType: 'document' | 'quiz'
   relativeDirectory: string
diff --git a/src/features/search/screen/search-in-document.tsx b/src/features/search/screen/search-in-document.tsx
index 88c0307b..b1d44f64 100644
--- a/src/features/search/screen/search-in-document.tsx
+++ b/src/features/search/screen/search-in-document.tsx
@@ -5,7 +5,7 @@ import SearchList from '../components/search-list'
 import SearchItem from '../components/search-item'
 import RecentSearches from '../components/recent-searches'
 import HeaderInDocument from '../components/header-in-document'
-import { extractPlainText, highlightAndTrimText } from '../utils'
+import { highlightAndTrimText, MarkdownProcessor } from '../utils'
 import Text from '@/shared/components/ui/text'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useQuery } from '@tanstack/react-query'
@@ -123,7 +123,10 @@ const SearchInDocument = () => {
                   <SearchItem
                     key={idx}
                     createType={idx % 2 === 0 ? 'FILE' : 'TEXT'} // type 들어가야함
-                    documentTitle={searchItem.documentName ?? ''}
+                    documentTitle={highlightAndTrimText(
+                      searchItem.documentName ?? '',
+                      initialKeyword ?? ''
+                    )}
                     matchingSentence={
                       searchItem.content ? (
                         <MarkdownProcessor
@@ -155,19 +158,3 @@ const SearchInDocument = () => {
 }
 
 export default SearchInDocument
-
-/** 마크다운 텍스트를 받아
- * 문법을 제거하고 키워드에 강조를 해서 반환하는 함수
- */
-const MarkdownProcessor = ({
-  markdownText,
-  keyword,
-}: {
-  markdownText: string
-  keyword: string
-}) => {
-  const plainText = extractPlainText(markdownText)
-  const highlightedText = highlightAndTrimText(plainText, keyword)
-
-  return <div>{highlightedText}</div>
-}
diff --git a/src/features/search/utils/index.tsx b/src/features/search/utils/index.tsx
index 532b2d25..cb50dfbf 100644
--- a/src/features/search/utils/index.tsx
+++ b/src/features/search/utils/index.tsx
@@ -65,3 +65,19 @@ export function extractPlainText(markdownText: string): string {
   div.innerHTML = html
   return div.textContent || ''
 }
+
+/** 마크다운 텍스트를 받아
+ * 문법을 제거하고 키워드에 강조를 해서 반환하는 함수
+ */
+export const MarkdownProcessor = ({
+  markdownText,
+  keyword,
+}: {
+  markdownText: string
+  keyword: string
+}) => {
+  const plainText = extractPlainText(markdownText)
+  const highlightedText = highlightAndTrimText(plainText, keyword)
+
+  return <div>{highlightedText}</div>
+}