feat: add stepList and stepSection

components/step-section.js

@@ -0,0 +1,37 @@
+import { html, css } from "../html-css-utils.js";
+
+class StepSection extends HTMLElement {
+  constructor() {
+    super();
+    this.render();
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      .step-section {
+        width: 80%;
+        max-width: 1550px;
+        margin: 0 auto;
+        padding: 100px 0;
+        @media only screen and (min-width: 1024px) {
+          padding: 149px 0;
+        }
+      }
+    `;
+  }
+
+  createHtml() {
+    return html`
+      <section class="step-section">
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+
+customElements.define("ds-step-section", StepSection);

components/step.js

@@ -3,27 +3,59 @@ import { css, html } from "../html-css-utils.js";
 class BaseStepElement extends HTMLElement {
   constructor() {
     super();
-    this.validateAttributes();
     this.render();
   }
 
-  validateAttributes() {
-    this.requiredAttributes.forEach((attr) => {
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  validateAttributes(requiredAttributes) {
+    requiredAttributes.forEach((attr) => {
       if (!this.hasAttribute(attr)) {
         throw new Error(`The "${attr}" attribute is required.`);
       }
     });
   }
+}
 
-  render() {
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+class StepList extends BaseStepElement {
+  createCss() {
+    return css`
+      .step-list {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: 10px;
+        margin-top: 20px;
+
+        @media only screen and (min-width: 1024px) {
+          flex-direction: row;
+          column-gap: 10px;
+        }
+      }
+      .step-list ::slotted(ds-step) {
+        flex: 1 1 100%;
+      }
+    `;
+  }
+
+  createHtml() {
+    return html`
+      <div class="step-list">
+        <slot></slot>
+      </div>
+    `;
   }
 }
 
 class Step extends BaseStepElement {
-  get requiredAttributes() {
-    return ["step", "iconSrc"];
+  constructor() {
+    super();
+    this.validateAttributes(["step", "iconSrc"]);
   }
 
   createCss() {
@@ -33,57 +65,57 @@ class Step extends BaseStepElement {
         margin: 0;
         padding: 0;
       }
-      .step {
+      article {
+        width: 100%;
+        height: 400px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        background: white;
         border-radius: 10px;
-        padding: 106px 53px;
         text-align: center;
         border: 5px solid transparent;
         background-clip: padding-box, border-box;
         background-origin: padding-box, border-box;
         background-image: linear-gradient(white, white),
           linear-gradient(135deg, #24eaca, #846de9);
+        padding: 75px 27px;
+
+        @media only screen and (min-width: 768px) {
+          height: 460px;
+          padding: 67px 74px;
+        }
+
+        @media only screen and (min-width: 1024px) {
+          height: 627px;
+          padding: 106px 54px;
+        }
       }
       .step-title h3 {
         font-size: 24px;
         font-weight: var(--font-weight-medium);
+        @media only screen and (min-width: 768px) {
+          font-size: 36px;
+        }
       }
       .step-icon {
-        width: 40px;
+        width: auto;
         height: 40px;
         margin: 20px 0;
+        @media only screen and (min-width: 768px) {
+          width: 60px;
+          height: 60px;
+          margin: 50px 0;
+        }
       }
       .step-content {
         font-size: 16px;
         font-weight: var(--font-weight-regular);
         word-break: keep-all;
-      }
-
-      /* Medium devices such as tablets (768px and up) */
-      @media only screen and (min-width: 768px) {
-        .step-title h3 {
-          font-size: 36px;
-        }
-        .step-icon {
-          width: 60px;
-          height: 60px;
-          margin: 50px 0;
-        }
-        .step-content {
+        @media only screen and (min-width: 768px) {
           font-size: 24px;
         }
       }
-
-      /* Large devices such as desktops and laptops (1024px and up) */
-      @media only screen and (min-width: 1024px) {
-        .step {
-          min-height: 627px;
-        }
-      }
     `;
   }
 
@@ -92,7 +124,7 @@ class Step extends BaseStepElement {
     const iconSrc = this.getAttribute("iconSrc");
 
     return html`
-      <article class="step">
+      <article>
         <section class="step-title">
           <h3>Step ${step}</h3>
         </section>
@@ -106,8 +138,9 @@ class Step extends BaseStepElement {
 }
 
 class StepTextLink extends BaseStepElement {
-  get requiredAttributes() {
-    return ["link"];
+  constructor() {
+    super();
+    this.validateAttributes(["link"]);
   }
 
   createCss() {
@@ -128,5 +161,6 @@ class StepTextLink extends BaseStepElement {
   }
 }
 
+customElements.define("ds-step-list", StepList);
 customElements.define("ds-step", Step);
 customElements.define("ds-step-text-link", StepTextLink);

index.html

@@ -174,20 +174,13 @@
         .review-card-list {
           grid-template-columns: repeat(2, minmax(306px, 1fr));
         }
-        .instruction-card-list {
-          grid-template-rows: minmax(460px, 1fr);
-        }
       }
 
       /* Large devices such as laptops (1024px and up) */
       @media only screen and (min-width: 1024px) {
         .review-card-list {
           gap: 10px 9px;
         }
-        .instruction-card-list {
-          grid-template-columns: repeat(3, minmax(375px, 1fr));
-          grid-template-rows: minmax(627px, 1fr);
-        }
       }
     </style>
   </head>
@@ -273,9 +266,9 @@
       </div>
     </div>
 
-    <div id="join-instruction-container">
-      <span>스터디 참여방법</span>
-      <div class="instruction-card-list">
+    <ds-step-section>
+      <ds-hero>스터디 참여방법</ds-hero>
+      <ds-step-list>
         <ds-step step="1" iconSrc="images/icon_step1.png">
           <p slot="content">
             현재 스터디 1기가 진행중이에요. (2024년 4/21~8/10) 다음 기수 스터디 참여를 원한다면 
@@ -306,8 +299,8 @@
             에서 간단한 모임을 가져요. 멤버 간의 친밀감도 쌓고 해외 취업 관련한 유용한 정보도 공유하고 있어요.
           </p>
         </ds-step>
-      </div>
-    </div>
+      </ds-step-list>
+    </ds-step-section>
 
     <footer>
       <div

main.js

@@ -8,3 +8,4 @@ import "./components/intro-section.js";
 import "./components/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";
 import "./components/step.js";
+import "./components/step-section.js";