Design: NoticeDetail.tsx

src/components/support/NoticeDetail.tsx

@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
+import { useHTMLParser } from '@/hooks/support/useHTMLPaser';
 import { getNoticeDetail } from '@/api/support';
 import { NoticeDetailData } from '@/types/types';
 import SEOMeta from '@/components/common/SEOMeta';
@@ -12,7 +13,6 @@ import { CustomerItem, CustomertDate, Semibold } from '@/styles/styles';
 
 const NoticeDetail = () => {
   const { postId } = useParams();
-
   const { data: noticeDetail } = useQuery({
     queryKey: ['noticeDetail', postId],
     queryFn: async () => {
@@ -21,6 +21,9 @@ const NoticeDetail = () => {
     }
   });
 
+  const htmlString =
+    noticeDetail?.content && useHTMLParser(noticeDetail?.content);
+
   const pageData = {
     ...SEO_DATA.supportNotice,
     pageUrl: `${SEO_DATA.supportNotice.pageUrl}/${postId}`
@@ -36,7 +39,9 @@ const NoticeDetail = () => {
             {noticeDetail?.date}
           </DetailDate>
         </TitleContainer>
-        <DetailContents>{noticeDetail?.content}</DetailContents>
+        <DetailContents>
+          <div dangerouslySetInnerHTML={{ __html: htmlString ?? '' }} />
+        </DetailContents>
       </div>
     </>
   );
@@ -56,6 +61,15 @@ const DetailContents = styled.div`
   line-height: 18px;
   white-space: pre-wrap;
   font-size: var(--font-sizes-xs);
+  & h3 {
+    font-size: var(--font-sizes-sm);
+    color: var(--colors-main);
+    margin-bottom: -10px;
+  }
+  & li {
+    line-height: 14px;
+    margin: 5px 0 -10px;
+  }
 `;
 
 export default NoticeDetail;

src/hooks/support/useHTMLPaser.ts

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+export const useHTMLParser = (markdown: string | undefined) => {
+  if (!markdown) return '';
+
+  // 간단한 마크다운 구문을 HTML로 변환
+  let html = markdown;
+
+  //  하이라이트 변환
+  html = html.replace(/==(.*?)==/g, '<h3>$1</h3>');
+  // 강조 표시 변환
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // 볼드체
+  html = html.replace(/__(.*?)__/g, '<strong>$1</strong>'); // 볼드체
+
+  // 이탤릭체 변환
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>'); // 이탤릭체
+  html = html.replace(/_(.*?)_/g, '<em>$1</em>'); // 이탤릭체
+
+  // 코드 블록 변환
+  html = html.replace(/`(.*?)`/g, '<code>$1</code>'); // 인라인 코드
+
+  // 링크 변환
+  html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>'); // 링크
+
+  // 줄 바꿈 변환
+  html = html.replace(/\n/g, '<br>'); // 줄 바꿈
+
+  // - 변환
+  html = html.replace(/\*\s\[(.*?)\]/g, '<li><strong>$1</strong></li>');
+
+  return html;
+};