feat : create image component

components/image.js

@@ -0,0 +1,56 @@
+class ImageComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+
+      this.validateAttributes();
+      this.setDefaultAttributes();
+
+      this.render();
+    }
+
+    validateAttributes() {
+      // Validate required attributes
+      if (!this.hasAttribute('alt')) {
+        throw new Error('The "alt" attribute is required.');
+      }
+
+      // Validate allowed attributes
+      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.`);
+        }
+      }
+    }
+
+    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);
+

index.html

@@ -243,13 +243,13 @@
       </div>
 
       <div class="intro-image">
-        <img src="images/roadmap.png" alt="#" />
+        <image-component src="images/roadmap.png" alt="Study roadmap"></image-component>
       </div>
     </div>
 
     <div id="language-container">
       <div class="language-image">
-        <img src="images/languages.png" alt="#" />
+        <image-component src="images/languages.png" alt="Languages"></image-component>
       </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">
-        <img src="images/review.png" />
+        <image-component src="images/review.png" alt="Review image"></image-component>
       </div>
     </div>
 

main.js

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