CI 테스트 : 코드 포맷팅 커밋

Author: krsy0411

src/scripts/components/box-component.ts

@@ -1,40 +1,40 @@
 class BoxComponent extends HTMLElement {
   static get observedAttributes() {
-      return ['imgsrc', 'href', 'title', 'description'];
+    return ['imgsrc', 'href', 'title', 'description'];
   }
 
   constructor() {
-      super();
+    super();
   }
 
   attributeChangedCallback() {
-      this.render();
+    this.render();
   }
 
   connectedCallback() {
-      this.render();
+    this.render();
   }
 
   render() {
-      const imgSrc = this.getAttribute('imgsrc') || '';
-      const href = this.getAttribute('href') || '/';
-      const title = this.getAttribute('title') || '';
-      const description = this.getAttribute('description') || '';
+    const imgSrc = this.getAttribute('imgsrc') || '';
+    const href = this.getAttribute('href') || '/';
+    const title = this.getAttribute('title') || '';
+    const description = this.getAttribute('description') || '';
 
-      this.innerHTML = `
-<div class="overflow-x-hidden shadow rounded bg-white mb-4 transition-all duration-200 hover:shadow hover:ring hover:ring-gray-200 hover:ring-1">
-<a href="${href}" class="no-underline decoration-none" style="text-decoration: none;">
-  <div class="flex flex-col gap-2 p-4">
-    <div class="flex gap-4 items-center">
-      <img class="w-[32px]" src="${imgSrc}" alt="">
-      <div class="text-xl font-semibold text-gray-800 dark:text-white flex items-center gap-2">${title}</div>
+    this.innerHTML = `
+    <div class="overflow-x-hidden shadow rounded bg-white mb-4 transition-all duration-200 hover:shadow hover:ring hover:ring-gray-200">
+      <a href="${href}" class="no-underline decoration-none" style="text-decoration: none;">
+        <div class="flex flex-col gap-2 p-4">
+          <div class="flex gap-4 items-center">
+            <img class="w-[32px]" src="${imgSrc}" alt="">
+            <div class="text-xl font-semibold text-gray-800 dark:text-white flex items-center gap-2">${title}</div>
+          </div>
+          <div class="text-gray-600 dark:text-white font-normal" style="text-decoration: none;">${description}</div>
+        </div>
+      </a>
     </div>
-    <div class="text-gray-600 dark:text-white font-normal" style="text-decoration: none;">${description}</div>
-  </div>
-</a>
-</div>
 `;
   }
 }
 
-customElements.define('box-component', BoxComponent);
+customElements.define('box-component', BoxComponent);

src/scripts/components/button-component.ts

@@ -1,32 +1,32 @@
 class ButtonComponent extends HTMLElement {
-    static get observedAttributes() {
-        return ['href', 'title'];
-    }
+  static get observedAttributes() {
+    return ['href', 'title'];
+  }
 
-    constructor() {
-        super();
-    }
+  constructor() {
+    super();
+  }
 
-    attributeChangedCallback() {
-        this.render();
-    }
+  attributeChangedCallback() {
+    this.render();
+  }
 
-    connectedCallback() {
-        this.render();
-    }
+  connectedCallback() {
+    this.render();
+  }
 
-    render() {
-        const href = this.getAttribute('href') || '#';
-        const title = this.getAttribute('title') || '';
+  render() {
+    const href = this.getAttribute('href') || '#';
+    const title = this.getAttribute('title') || '';
 
-        this.innerHTML = `
+    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);
+customElements.define('button-component', ButtonComponent);

src/scripts/components/index.ts

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

src/scripts/load_md.ts

@@ -3,7 +3,7 @@ import { marked } from 'marked';
 // ✅ marked 옵션 설정 (브레이크, GFM 지원 등)
 marked.setOptions({
   gfm: true,
-  breaks: true
+  breaks: true,
 });
 
 // ✅ box-component를 블록 태그로 처리하는 커스텀 토크나이저 추가
@@ -15,7 +15,7 @@ const blockTagRegex = new RegExp(
 
 const customBlockTokenizer = {
   name: 'custom-block-tag',
-  level: "block",
+  level: 'block',
   start(src: string) {
     return src.match(blockTagRegex)?.index;
   },
@@ -38,8 +38,13 @@ marked.use({ extensions: [customBlockTokenizer] });
  * mdText를 웹 컴포넌트 태그(<box-component>, <button-component>) 기준으로 분할하여
  * 마크다운은 파싱하고, 웹 컴포넌트는 그대로 삽입하는 함수
  */
-async function renderMarkdownWithComponents(mdText: string, contentElement: HTMLElement) {
-  const tokens = mdText.split(/(<\/?box-component[^>]*>|<\/?button-component[^>]*>)/gi).filter(Boolean);
+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)) {
@@ -69,7 +74,7 @@ async function loadMarkdown(page: string) {
     const contentElement = document.getElementById('content')!;
     contentElement.innerHTML = '';
     await renderMarkdownWithComponents(mdText, contentElement);
-  } catch (error) {
+  } catch {
     document.getElementById('content')!.innerHTML = `
       <div id="not-found" class="w-full">
         <p>페이지를 찾을 수 없습니다.</p>
@@ -80,6 +85,6 @@ async function loadMarkdown(page: string) {
 }
 
 export async function initializeMarkdownLoader() {
-  let page = location.hash ? location.hash.substring(2) : 'home';
+  const page = location.hash ? location.hash.substring(2) : 'home';
   await loadMarkdown(page);
 }

src/styles/content_style.css

@@ -133,4 +133,4 @@ h4 {
     width: 100%;
     height: 100%;
   }
-}
+}

src/styles/not_found.css

@@ -1,44 +1,44 @@
 .not-found {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
-    text-align: center;
-    padding: 20px;
-    max-width: 600px;
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  padding: 20px;
+  max-width: 600px;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .not-found h2 {
-    color: #d9534f;
-    font-size: 24px;
-    margin-bottom: 10px;
+  color: #d9534f;
+  font-size: 24px;
+  margin-bottom: 10px;
 }
 
 .not-found p {
-    font-size: 16px;
-    color: #555;
+  font-size: 16px;
+  color: #555;
 }
 
 .not-found .back-home {
-    display: inline-block;
-    margin-top: 10px;
-    padding: 8px 15px;
-    background: #007bff;
-    color: white;
-    text-decoration: none;
-    border-radius: 4px;
+  display: inline-block;
+  margin-top: 10px;
+  padding: 8px 15px;
+  background: #007bff;
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
 }
 
 .not-found .back-home:hover {
-    background: #0056b3;
-}
+  background: #0056b3;
+}

src/styles/style.css

@@ -2,7 +2,7 @@
 
 @layer base {
   table {
-    @apply table-auto w-3/4;
+    @apply w-3/4 table-auto;
   }
 
   th,