Merge pull request #117 from DaleStudy/sam/92

feat : create language-section component
DaleStudy · Jul 10, 2024 · 9c21c73 · 9c21c73
2 parents 8898e25 + 2739041
commit 9c21c73
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 15 deletions.
diff --git a/components/language-section.js b/components/language-section.js
@@ -0,0 +1,133 @@
+import { css, html } from "../html-css-utils.js";
+
+class LanguageSection extends HTMLElement {
+  constructor() {
+    super();
+    this.render();
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        row-gap: 30px;
+        margin: 0px 27px 0px;
+        max-width: 1550px;
+
+        @media only screen and (min-width: 768px) {
+          row-gap: 50px;
+          margin: 0px 75px 0px 76px;
+        }
+
+        @media only screen and (min-width: 1024px) {
+          position: relative;
+          flex-direction: row;
+          width: 80%;
+          height: 52vh;
+          margin: 0;
+        }
+      }
+
+      .hero {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        row-gap: 20px;
+        width: 65%;
+
+        @media only screen and (min-width: 768px) {
+          row-gap: 30px;
+          width: 40%;
+        }
+
+        @media only screen and (min-width: 1024px) {
+          justify-content: center;
+          row-gap: 40px;
+          width: 37%;
+        }
+      }
+
+      .gap {
+        @media only screen and (min-width: 1024px) {
+          justify-content: center;
+          width: 16%;
+        }
+      }
+
+      aside {
+        width: 100%;
+
+        @media only screen and (min-width: 1024px) {
+          width: 47%;
+        }
+      }
+
+      ::slotted([slot="mobile-image"]) {
+        display: block;
+      }
+
+      ::slotted([slot="tablet-image"]) {
+        display: none;
+      }
+
+      ::slotted([slot="desktop-image"]) {
+        display: none;
+      }
+
+      @media only screen and (min-width: 768px) {
+        ::slotted([slot="mobile-image"]) {
+          display: none;
+        }
+
+        ::slotted([slot="tablet-image"]) {
+          display: block;
+        }
+      }
+
+      @media only screen and (min-width: 1024px) {
+        ::slotted([slot="tablet-image"]) {
+          display: none;
+        }
+
+        ::slotted([slot="desktop-image"]) {
+          display: block;
+        }
+      }
+    `;
+  }
+
+  createHtml() {
+    return html`
+      <section>
+        <aside>
+          <slot name="tablet-image"></slot>
+          <slot name="desktop-image"></slot>
+          <slot name="mobile-image"></slot>
+        </aside>
+
+        <div class="gap"></div>
+
+        <div class="hero">
+          <slot name="heading"></slot>
+          <slot name="button"></slot>
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define("ds-language-section", LanguageSection);
diff --git a/images/horizontal-language.png b/images/horizontal-language.png
diff --git a/images/vertical-language.png b/images/vertical-language.png
diff --git a/index.html b/index.html
@@ -182,21 +182,40 @@
       ></ds-image>
     </ds-intro-section>
 
-    <div id="language-container">
-      <div class="language-image">
-        <ds-image src="images/languages.png" alt="languages"></ds-image>
-      </div>
-      <div class="hero">
-        <ds-hero>지역에 관계없이 다양한 언어로 참여할 수 있어요</ds-hero>
-        <ds-button-link
-          size="big"
-          variant="ghost"
-          outline
-          href="#join-instruction-container"
-          >참여방법 안내</ds-button-link
-        >
-      </div>
-    </div>
+    <ds-language-section>
+      <ds-image
+        slot="mobile-image"
+        src="images/vertical-language.png"
+        alt="languages"
+        width="100%"
+        height="auto"
+      ></ds-image>
+      <ds-image
+        slot="tablet-image"
+        src="images/horizontal-language.png"
+        alt="languages"
+        width="100%"
+        height="auto"
+      ></ds-image>
+      <ds-image
+        slot="desktop-image"
+        src="images/vertical-language.png"
+        alt="languages"
+        width="100%"
+        height="auto"
+      ></ds-image>
+      <ds-hero slot="heading">
+        지역에 관계없이 다양한 언어로 참여할 수 있어요.
+      </ds-hero>
+      <ds-button-link
+        slot="button"
+        size="big"
+        variant="ghost"
+        href="#join-instructions"
+      >
+        참여방법 안내
+      </ds-button-link>
+    </ds-language-section>
 
     <div id="review-container">
       <div class="hero">

diff --git a/main.js b/main.js
@@ -6,6 +6,7 @@ import "./components/hero.js";
 import "./components/icon-link-list.js";
 import "./components/image.js";
 import "./components/intro-section.js";
+import "./components/language-section.js"
 import "./components/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";
 import "./components/step.js";