Merge branch 'main' into sam/121

components/code-review-section.js

@@ -0,0 +1,92 @@
+import { css, html } from "../html-css-utils.js";
+
+class CodeReviewSection 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: 0 27px 0;
+        max-width: 1550px;
+
+        @media only screen and (min-width: 768px) {
+          row-gap: 50px;
+          margin: 0 76px 0 77px;
+        }
+
+        @media only screen and (min-width: 1024px) {
+          position: relative;
+          flex-direction: row-reverse;
+          width: 80%;
+          height: 53vh;
+          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: 40%;
+        }
+      }
+
+      aside {
+        width: 100%;
+
+        @media only screen and (min-width: 1024px) {
+          width: 60%;
+        }
+      }
+    `;
+    }
+
+
+  createHtml() {
+    return html`
+      <section>
+        <aside>
+          <slot name="image"></slot>
+        </aside>
+
+        <div class="hero">
+          <slot name="heading"></slot>
+          <slot name="button"></slot>
+        </div>
+      </section>
+    `;
+  }
+}
+
+customElements.define("ds-code-review-section", CodeReviewSection);

index.html

@@ -206,20 +206,27 @@
       </ds-button-link>
     </ds-language-section>
 
-    <div id="review-container">
-      <div class="hero">
-        <ds-hero>코드리뷰를 통해 새로운 관점을 배울 수 있어요</ds-hero>
-        <ds-button-link
-          size="big"
-          variant="primary"
-          href="https://discord.gg/43UkheRV"
-          >디스코드 참여하기</ds-button-link
-        >
-      </div>
-      <div class="review-image">
-        <ds-image src="images/review.png" alt="review"></ds-image>
-      </div>
-    </div>
+    <ds-code-review-section>
+      <ds-hero slot="heading">
+        코드리뷰를 통해 새로운 관점을 배울 수 있어요
+      </ds-hero>
+      <ds-button-link
+        slot="button"
+        size="big"
+        variant="primary"
+        href="https://discord.gg/43UkheRV"
+      >
+        디스코드 참여하기
+      </ds-button-link>
+
+      <ds-image
+        slot="image"
+        src="images/review.png"
+        alt="review"
+        width="100%"
+        height="auto"
+      ></ds-image>
+    </ds-code-review-section>
 
     <div id="member-review-container">
       <span>참가자 후기</span>

main.js

@@ -1,4 +1,5 @@
 import "./components/button-link.js";
+import "./components/code-review-section.js"
 import "./components/footer-link-list.js";
 import "./components/footer.js";
 import "./components/header.js";