table 태그를 overflow-x:auto 로 감싸도록 수정(UI 깨짐 수정)

package.json

@@ -40,6 +40,7 @@
 		"hastscript": "^7.2.0",
 		"mdsvex": "^0.10.6",
 		"rehype-autolink-headings": "^6.1.1",
-		"rehype-slug": "^5.1.0"
+		"rehype-slug": "^5.1.0",
+		"rehype-wrap-all": "^1.1.0"
 	}
 }

src/app.css

@@ -16,6 +16,9 @@
 	main {
 		min-height: 50vh;
 	}
+  overflow-x-auto {
+    @apply overflow-x-auto; /* .md에서만 사용할 때도 적용되도록 css파일에서 호출 처리 */
+  }
 }
 @tailwind components;
 @tailwind utilities;

svelte.config.js

@@ -5,6 +5,7 @@ import { mdsvex } from 'mdsvex';
 // Rehype plugins : https://github.com/rehypejs/rehype/blob/HEAD/doc/plugins.md#list-of-plugins
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeWrapAll from 'rehype-wrap-all';
 // import { h } from 'hastscript';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -20,8 +21,7 @@ const config = {
 			extensions: ['.svx', '.md'],
 			rehypePlugins: [
 				[rehypeSlug],
-				[
-					rehypeAutolinkHeadings,
+				[rehypeAutolinkHeadings,
 					{
 						behavior: 'append',
 						properties: {
@@ -39,8 +39,11 @@ const config = {
 						// 	console.log(node);
 						// 	return h('span', { class: 'relative' }, '🔗')
 						// }
-					}
-				]
+					}],
+				[rehypeWrapAll, {
+					selector: 'table',
+					wrapper: 'div.overflow-x-auto'
+				}]
 			]
 		})
 	],