[UI] Box, Button : web-component 생성 및 스타일링 (#98)

* [task/96] Button : web-component HTML 구조 작성

* [task/97] Button : 스타일링

* [task/93] Box : web-component HTML 구조 작성

* [refactor] LoadMd : 문서를 웹컴포넌트 기준 분할 후 순차 삽입되도록 변경

* 기능 추가에 따른 디테일 수정

Author: krsy0411

src/scripts/components/box-component.ts

@@ -0,0 +1,40 @@
+class BoxComponent extends HTMLElement {
+    static get observedAttributes() {
+        return ['img-src', 'href', 'title', 'description'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        const imgSrc = this.getAttribute('imgsrc') || '';
+        const href = this.getAttribute('href') || '/';
+        const title = this.getAttribute('title') || '';
+        const description = this.getAttribute('description') || '';
+
+        this.innerHTML = `
+        <article id="box-component">
+            <a href="${href}">
+                <div>
+                    <div>
+                        <img src="${imgSrc}" />
+                        <p>${title}</p>
+                    </div>
+                    <div>${description}</div>
+                </div>
+            </a>
+        </article>
+        `;
+    }
+}
+
+customElements.define('box-component', BoxComponent);

src/scripts/components/button-component.ts

@@ -0,0 +1,32 @@
+class ButtonComponent extends HTMLElement {
+    static get observedAttributes() {
+        return ['href', 'title'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        const href = this.getAttribute('href') || '#';
+        const title = this.getAttribute('title') || '';
+
+        this.innerHTML = `
+            <button type="button" class="not-prose my-4">
+                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-[#086dd7] text-white!">
+                    ${title}
+                </a>
+            </button>
+        `;
+    }
+}
+
+customElements.define('button-component', ButtonComponent);

src/scripts/components/header-component.ts

@@ -9,7 +9,7 @@ class HeaderComponent extends HTMLElement {
             <div class="max-w-[1920px] mx-auto flex lg:gap-8 gap-2 h-full items-center justify-between">
                 <div class="flex h-full items-center lg:gap-8 gap-2">
                     <div>
-                        <a href="https://docker-ko.github.io" title="Docker korean translation home page">
+                        <a href="/" title="Docker korean translation home page">
                             <img
                                 src="./imgs/logo/docker-logo-white.svg"
                                 alt="Docker Korea home page"

src/scripts/components/index.ts

@@ -1,2 +1,4 @@
 import './footer-component';
 import './header-component';
+import './box-component';
+import './button-component'

src/scripts/load_md.ts

@@ -1,5 +1,25 @@
 import { marked } from 'marked';
 
+/**
+ * mdText를 웹 컴포넌트 태그(<box-component>, <button-component>, </box-component>, </button-component>) 기준으로 분할하여
+ * 마크다운은 파싱해서, 웹 컴포넌트는 그대로 contentElement에 삽입하는 함수
+ */
+async function renderMarkdownWithComponents(mdText: string, contentElement: HTMLElement) {
+  const tokens = mdText.split(/(<\/?box-component[^>]*>|<\/?button-component[^>]*>)/gi).filter(Boolean);
+
+  for (const token of tokens) {
+    // 웹 컴포넌트 태그인지 확인
+    if (/^<\/?(box-component|button-component)[^>]*>$/.test(token)) {
+      // 웹 컴포넌트 태그는 문자열 그대로 삽입
+      contentElement.innerHTML += token;
+    } else if (token.trim()) {
+      // 마크다운 텍스트는 파싱해서 바로 innerHTML로 삽입
+      const html = await marked.parse(token);
+      contentElement.innerHTML += html;
+    }
+  }
+}
+
 async function loadMarkdown(page: string) {
   try {
     const response = await fetch(`/docs/${page}.md?cache=${Date.now()}`);
@@ -15,8 +35,9 @@ async function loadMarkdown(page: string) {
       );
     }
 
-    const htmlContent = marked.parse(mdText);
-    document.getElementById('content')!.innerHTML = await htmlContent;
+    const contentElement = document.getElementById('content')!;
+    contentElement.innerHTML = '';
+    await renderMarkdownWithComponents(mdText, contentElement);
   } catch (error) {
     document.getElementById('content')!.innerHTML = `
             <div id="not-found" class="w-full">

src/styles/content_style.css

@@ -105,27 +105,17 @@ h4 {
 #content a {
   color: #007bff;
   text-decoration: none;
-  font-weight: 600;
   transition: color 0.2s ease-in-out;
-}
-
-#content a:hover {
-  color: #0056b3;
-  text-decoration: underline;
-}
-
-#content a:active {
-  color: #004080;
-}
 
-#content a:visited {
-  color: #800080;
-}
+  &:hover {
+    color: #007bff;
+  }
 
-#content a.external-link::after {
-  content: ' 🔗';
-  font-size: 0.8em;
-  opacity: 0.7;
+  &.external-link::after {
+    content: ' 🔗';
+    font-size: 0.8em;
+    opacity: 0.7;
+  }
 }
 
 #content .youtube-video {