fix : Adjust to new component styles and apply the feedback

DaleStudy · Jun 20, 2024 · 01eb609 · 01eb609
1 parent 703cbe1
commit 01eb609
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 33 deletions.
diff --git a/components/image.js b/components/image.js
@@ -1,12 +1,29 @@
-class ImageComponent extends HTMLElement {
+const css = `
+  <style>
+    img {
+      display: block;
+      max-width: 100%;
+    }
+  </style>
+`;
+
+class DsImage extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
 
     this.validateAttributes();
     this.setDefaultAttributes();
 
-    this.render();
+    const src = this.getAttribute("src") || "";
+    const alt = this.getAttribute("alt") || "";
+    const width = this.getAttribute("width") || "";
+    const height = this.getAttribute("height") || "";
+
+    const html = `
+      <img src="${src}" alt="${alt}" width="${width}" height="${height}">
+    `;
+    this.shadowRoot.innerHTML = css + html; // Direct assignment
   }
 
   validateAttributes() {
@@ -23,33 +40,6 @@ class ImageComponent extends HTMLElement {
       }
     }
   }
-
-  setDefaultAttributes() {
-    if (!this.hasAttribute("width")) {
-      this.setAttribute("width", "100%");
-    }
-    if (!this.hasAttribute("height")) {
-      this.setAttribute("height", "auto");
-    }
-  }
-
-  render() {
-    const src = this.getAttribute("src");
-    const alt = this.getAttribute("alt");
-    const width = this.getAttribute("width");
-    const height = this.getAttribute("height");
-
-    this.shadowRoot.innerHTML = `
-        <style>
-          img {
-            display: block;
-            max-width: 100%;
-            height: auto;
-          }
-        </style>
-        <img src="${src}" alt="${alt}" width="${width}" height="${height}">
-      `;
-  }
 }
 
-customElements.define("image-component", ImageComponent);
+customElements.define("ds-image", DsImage);
diff --git a/index.html b/index.html
@@ -243,13 +243,13 @@
       </div>
 
       <div class="intro-image">
-        <image-component src="images/roadmap.png" alt="Study roadmap"></image-component>
+        <ds-image src="images/roadmap.png" alt="Study roadmap"></ds-image>
       </div>
     </div>
 
     <div id="language-container">
       <div class="language-image">
-        <image-component src="images/languages.png" alt="Languages"></image-component>
+        <ds-image src="images/languages.png" alt="Languages"></ds-image>
       </div>
       <div class="hero">
         <p>지역에 관계없이 다양한 언어로 참여할 수 있어요</p>
@@ -263,7 +263,7 @@
         <link-button size="big" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
       </div>
       <div class="review-image">
-        <image-component src="images/review.png" alt="Review image"></image-component>
+        <ds-image src="images/review.png" alt="Review image"></ds-image>
       </div>
     </div>