프리티어 해결

Author: g1nya2

src/scripts/components/card-component.ts

@@ -24,11 +24,13 @@ class CardComponent extends HTMLElement {
     this.innerHTML = `
       <div class="card">
         <a href="${href}" class="card-link">
-          ${imgSrc
-            ? `<div class="card-icon">
+          ${
+            imgSrc
+              ? `<div class="card-icon">
                 <img class="card-img" src="${imgSrc}" alt="${title}" />
               </div>`
-            : ''}
+              : ''
+          }
           <div class="card-content">
             <p class="card-description">
               <strong class="card-title">${title}</strong><br />

src/scripts/load_md.ts

@@ -8,7 +8,8 @@ marked.setOptions({
 
 // card-component를 블록 태그 및 셀프 클로징 태그로 처리하는 커스텀 토크나이저 추가
 // 템플릿 리터럴에서 역참조(\1) 사용 불가하므로 정규식 리터럴로 하드코딩
-const blockTagRegex = /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i;
+const blockTagRegex =
+  /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i;
 
 const customBlockTokenizer = {
   name: 'custom-block-tag',
@@ -50,11 +51,17 @@ export async function renderMarkdownWithComponents(
     } else if (token.trim()) {
       // 나머지는 기존 방식대로 웹 컴포넌트 분리 후 마크다운 파싱
       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)
+        .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)) {
+        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);

src/styles/style.css

@@ -21,33 +21,32 @@
   thead {
     @apply bg-gray-200;
   }
-  
 }
 
 /* 카드 컴포넌트 스타일 */
 @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 h-full flex flex-col;
+    @apply mb-4 flex h-full min-w-0 flex-col rounded-md border border-gray-200 bg-white px-4 py-3 transition duration-200 hover:border-gray-300 hover:shadow;
   }
-  
+
   .card-link {
     @apply flex items-start gap-4 no-underline;
   }
 
   .card-icon {
-    @apply flex-shrink-0 mt-1;
+    @apply mt-1 flex-shrink-0;
   }
 
   .card-img {
-    @apply w-6 h-6;
+    @apply h-6 w-6;
   }
 
   .card-content {
     @apply flex-1;
   }
 
   .card-description {
-    @apply text-sm text-gray-500 leading-snug;
+    @apply text-sm leading-snug text-gray-500;
   }
 
   .card-title {
@@ -64,7 +63,12 @@ body {
   padding: 0;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 700;
   margin-top: 1.5em;
   margin-bottom: 0.5em;