Merge branch 'main' into helena/review-item-component

components/hero.js

@@ -0,0 +1,48 @@
+import { css, html } from "../html-css-utils.js";
+
+class Hero extends HTMLElement {
+  constructor() {
+    super();
+    this.render();
+  }
+
+  render() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+        :host {
+          font-weight: 500;
+        }
+
+        h2 {
+          font-weight: inherit;
+          font-size: 30px;
+        }
+
+        @media only screen and (min-width: 768px) {
+          h2 {
+            font-size: 40px;
+          }
+        }
+
+        @media only screen and (min-width: 1024px) {
+          h2 {
+            font-size: 50px;
+          }
+        }
+    `;
+  }
+
+  createHtml() {
+    return html`
+      <h2>
+        <slot></slot>
+      </h2>
+    `;
+  }
+}
+
+customElements.define('ds-hero', Hero);

components/image.js

@@ -0,0 +1,53 @@
+import { css, html } from "../html-css-utils.js";
+
+class Image extends HTMLElement {
+  constructor() {
+    super();
+
+    this.validateAttributes();
+    this.render();
+  }
+
+  validateAttributes() {
+    if (!this.hasAttribute("alt")) {
+      throw new Error('The "alt" attribute is required.');
+    }
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      img {
+        display: block;
+        max-width: 100%;
+      }
+    `;
+  }
+
+  createHtml() {
+    const src = this.getAttribute("src") || "";
+    const alt = this.getAttribute("alt") || "";
+    const width = this.getAttribute("width");
+    const height = this.getAttribute("height");
+
+    let imgHtml = `<img src="${src}" alt="${alt}"`;
+
+    if (width) {
+      imgHtml += ` width="${width}"`;
+    }
+
+    if (height) {
+      imgHtml += ` height="${height}"`;
+    }
+
+    imgHtml += `>`;
+
+    return imgHtml;
+  }
+}
+
+customElements.define("ds-image", Image);

index.html

@@ -238,7 +238,7 @@
 
     <div id="intro-container">
       <div class="hero">
-        <p>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</p>
+        <ds-hero>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</ds-hero>
         <ds-button-link
           size="big"
           variant="primary"
@@ -248,16 +248,16 @@
       </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>
+        <ds-hero>지역에 관계없이 다양한 언어로 참여할 수 있어요</ds-hero>
         <ds-button-link
           size="big"
           variant="ghost"
@@ -270,7 +270,7 @@
 
     <div id="review-container">
       <div class="hero">
-        <p>코드리뷰를 통해 새로운 관점을 배울 수 있어요</p>
+        <ds-hero>코드리뷰를 통해 새로운 관점을 배울 수 있어요</ds-hero>
         <ds-button-link
           size="big"
           variant="primary"
@@ -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,8 +1,11 @@
+import "./components/button-link.js";
 import "./components/footer-link/footer-link.js";
 import "./components/header.js";
 import "./components/hero/hero.js";
 import "./components/link-button/link-button.js";
 import "./components/review-item.js";
 import "./components/button-link.js";
+import "./components/hero.js";
+import "./components/image.js";
 import "./components/review-item/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";