fix : adjust the new component writting styles and apply feedback pro…

…vided

components/image.js

@@ -0,0 +1,62 @@
+class Image extends HTMLElement {
+  constructor() {
+    super();
+
+    this.validateAttributes();
+    this.render();
+  }
+
+  validateAttributes() {
+    if (!this.hasAttribute("alt")) {
+      throw new Error('The "alt" attribute is required.');
+    }
+
+    const allowedAttributes = ["src", "alt", "width", "height"];
+    for (const attr of this.attributes) {
+      if (!allowedAttributes.includes(attr.name)) {
+        throw new Error(`The attribute "${attr.name}" is not allowed.`);
+      }
+    }
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return `
+      <style>
+        img {
+          display: block;
+          max-width: 100%;
+        }
+      </style>
+    `;
+  }
+
+  createHtml() {
+    const src = this.getAttribute("src") ?? "";
+    const alt = this.getAttribute("alt") ?? "";
+
+    let imgHtml = `<img src="${src}" alt="${alt}"`;
+
+    if (this.hasAttribute("width")) {
+      const width = this.getAttribute("width");
+      imgHtml += ` width="${width}"`;
+    }
+
+    if (this.hasAttribute("height")) {
+      const height = this.getAttribute("height");
+      imgHtml += ` height="${height}"`;
+    }
+
+    imgHtml += `>`;
+
+    return `
+      ${imgHtml}
+    `;
+  }
+}
+
+customElements.define("ds-image", Image);

index.html

@@ -248,13 +248,13 @@
       </div>
 
       <div class="intro-image">
-        <img src="images/roadmap.png" alt="#" />
+        <ds-image src="images/roadmap.png" alt="roadmap"></ds-image>
       </div>
     </div>
 
     <div id="language-container">
       <div class="language-image">
-        <img src="images/languages.png" alt="#" />
+        <ds-image src="images/languages.png" alt="languages"></ds-image>
       </div>
       <div class="hero">
         <p>지역에 관계없이 다양한 언어로 참여할 수 있어요</p>
@@ -279,7 +279,7 @@
         >
       </div>
       <div class="review-image">
-        <img src="images/review.png" />
+        <ds-image src="images/review.png" alt="review"></ds-image>
       </div>
     </div>
 

main.js

@@ -1,6 +1,7 @@
+import "./components/button-link.js";
 import "./components/footer-link/footer-link.js";
 import "./components/header.js";
 import "./components/hero/hero.js";
-import "./components/button-link.js";
+import "./components/image.js";
 import "./components/review-item/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";