ui : card-component,whats-next,get-docker

Author: g1nya2

src/scripts/load_md.ts

@@ -6,12 +6,9 @@ marked.setOptions({
   breaks: true,
 });
 
-//card-component를 블록 태그로 처리하는 커스텀 토크나이저 추가
-const blockTagNames = ['card-component'];
-const blockTagRegex = new RegExp(
-  `^<(${blockTagNames.join('|')})([\\s\\S]*?)>([\\s\\S]*?)<\\/\\1>`,
-  'i'
-);
+// card-component를 블록 태그 및 셀프 클로징 태그로 처리하는 커스텀 토크나이저 추가
+// 템플릿 리터럴에서 역참조(\1) 사용 불가하므로 정규식 리터럴로 하드코딩
+const blockTagRegex = /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i;
 
 const customBlockTokenizer = {
   name: 'custom-block-tag',
@@ -35,23 +32,35 @@ const customBlockTokenizer = {
 marked.use({ extensions: [customBlockTokenizer] });
 
 /**
- * mdText를 웹 컴포넌트 태그(<box-component>, <button-component>) 기준으로 분할하여
- * 마크다운은 파싱하고, 웹 컴포넌트는 그대로 삽입하는 함수
+ * 커스텀 파서: <div ...>...</div> 블록을 마크다운 파싱 없이 그대로 삽입
+ * 나머지 마크다운만 기존 파서로 처리
  */
 export async function renderMarkdownWithComponents(
   mdText: string,
   contentElement: HTMLElement
 ) {
-  const tokens = mdText
-    .split(/(<\/?card-component[^>]*>|<\/?button-component[^>]*>)/gi)
-    .filter(Boolean);
+  // <div ...>...</div> 블록 추출 (빈 줄 포함, 중첩 X)
+  const divBlockRegex = /(<div[\s\S]*?>[\s\S]*?<\/div>)/gi;
+  const tokens = mdText.split(divBlockRegex).filter(Boolean);
 
   for (const token of tokens) {
-    if (/^<\/?(card-component|button-component)[^>]*>$/.test(token)) {
+    if (/^<div[\s\S]*?>[\s\S]*?<\/div>$/.test(token)) {
+      // div 블록은 그대로 삽입
       contentElement.innerHTML += token;
     } else if (token.trim()) {
-      const html = await marked.parse(token);
-      contentElement.innerHTML += html;
+      // 나머지는 기존 방식대로 웹 컴포넌트 분리 후 마크다운 파싱
+      const innerTokens = token
+        .split(/(<card-component[\s\S]*?<\/card-component>|<card-component[\s\S]*?\/>|<button-component[\s\S]*?<\/button-component>|<button-component[\s\S]*?\/>)/gi)
+        .filter(Boolean);
+      for (const innerToken of innerTokens) {
+        if (/^<\/?(card-component|button-component)[^>]*?>.*?<\/(card-component|button-component)>$/.test(innerToken) ||
+            /^<(card-component|button-component)[^>]*?\/>$/.test(innerToken)) {
+          contentElement.innerHTML += innerToken;
+        } else if (innerToken.trim()) {
+          const html = await marked.parse(innerToken);
+          contentElement.innerHTML += html;
+        }
+      }
     }
   }
 }

src/styles/style.css

@@ -27,7 +27,7 @@
 /* 카드 컴포넌트 스타일 */
 @layer components {
   .card {
-    @apply min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow;
+    @apply min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow h-full flex flex-col;
   }