refactor: markdown processor

picktoss · Dec 10, 2024 · c3f7d20 · c3f7d20
1 parent f793682
commit c3f7d20
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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>
+}