feat: add review item responsive and color

components/review-item.js

@@ -0,0 +1,134 @@
+import { css, html } from "../html-css-utils.js";
+
+class ReviewItem extends HTMLElement {
+  constructor() {
+    super();
+
+    this.validateAttributes();
+    this.render();
+  }
+
+  validateAttributes() {
+    if (!this.hasAttribute("authorImgSrc")) {
+      throw new Error('The "authorImgSrc" attribute is required.');
+    }
+
+    if (!this.hasAttribute("content")) {
+      throw new Error('The "content" attribute is required.');
+    }
+
+    if (!this.hasAttribute("author")) {
+      throw new Error('The "author" attribute is required.');
+    }
+  }
+
+  render() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.createCss() + this.createHtml();
+  }
+
+  createCss() {
+    return css`
+      .review-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-radius: 10px;
+        padding: 39px 20px;
+        background-color: var(--bg-300);
+        color: var(--text-900);
+      }
+      .review-item blockquote,
+      figure {
+        margin: 0;
+      }
+      .review-img {
+        width: 104px;
+        height: 104px;
+        flex-shrink: 0;
+        object-fit: cover;
+      }
+      .review-img figure > img {
+        width: 100%;
+        height: 100%;
+        padding-top: 7px;
+        border-radius: 48%;
+        background-color: #ffffff;
+      }
+      .review-content {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        text-align: center;
+        margin-top: 10px;
+      }
+      .review-content blockquote {
+        font-size: 14px;
+        margin-top: 17px;
+        word-break: keep-all;
+      }
+      .review-content figcaption {
+        width: 100%;
+        font-size: 16px;
+        text-align: center;
+      }
+
+      /* Medium devices such as tablets (768px and up) */
+      @media only screen and (min-width: 768px) {
+        .review-item {
+          padding: 37px 20px;
+        }
+        .review-content blockquote {
+          margin-top: 16px;
+        }
+      }
+
+      /* Large devices such as laptops (1024px and up) */
+      @media only screen and (min-width: 1024px) {
+        .review-item {
+          padding: 41px 51px 31px;
+          flex-direction: row;
+          align-items: flex-start;
+        }
+        .review-img {
+          margin-right: 31px;
+        }
+        .review-content {
+          flex-direction: column;
+          margin-top: 0;
+          text-align: left;
+        }
+        .review-content blockquote {
+          margin-top: 0;
+          margin-bottom: 14px;
+          word-break: unset;
+        }
+        .review-content figcaption {
+          text-align: right;
+        }
+      }
+    `;
+  }
+
+  createHtml() {
+    const authorImgSrc = this.getAttribute("authorImgSrc");
+    const content = this.getAttribute("content");
+    const author = this.getAttribute("author");
+
+    return html`
+      <article class="review-item">
+        <section class="review-img">
+          <figure>
+            <img src="${authorImgSrc}" alt="Author profile image" />
+          </figure>
+        </section>
+        <section class="review-content">
+          <blockquote>${content}</blockquote>
+          <figcaption>${author}</figcaption>
+        </section>
+      </article>
+    `;
+  }
+}
+
+customElements.define("ds-review-item", ReviewItem);

index.html

@@ -142,11 +142,14 @@
         font-weight: medium;
       }
 
+      /* 'review-card-list' style will be removed when the review card list component is created */
       .review-card-list {
         display: grid;
-        grid-template-columns: repeat(2, 568px);
-        gap: 10px 9px;
+        grid-template-columns:  minmax(306px, 1fr);
+        gap: 10px;
         padding-top: 40px;
+        place-content: center;
+        place-items: center;
       }
 
       .review-card {
@@ -230,6 +233,21 @@
         font-size: 2.4rem;
         font-weight: regular;
       }
+
+      /* 'review-card-list' style will be removed when the review card list component is created */
+      /* Medium devices such as tablets (768px and up) */
+      @media only screen and (min-width: 768px) {
+        .review-card-list {
+          grid-template-columns: repeat(2, minmax(306px, 1fr));
+        }
+      }
+
+      /* Large devices such as laptops (1024px and up) */
+      @media only screen and (min-width: 1024px) {
+        .review-card-list {
+          gap: 10px 9px;
+        }
+      }
     </style>
   </head>
 
@@ -286,36 +304,31 @@
     <div id="member-review-container">
       <span>참가자 후기</span>
       <div class="review-card-list">
-        <review-item
-          img="images/human.png"
-          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
-          name="John Doe"
-        >
-        </review-item>
-        <review-item
-          img="images/human.png"
-          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
-          name="John Doe"
-        >
-        </review-item>
-        <review-item
-          img="images/human.png"
-          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
-          name="John Doe"
-        >
-        </review-item>
-        <review-item
-          img="images/human.png"
-          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
-          name="John Doe"
-        >
-        </review-item>
-        <review-item
-          img="images/human.png"
-          text="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
-          name="John Doe"
-        >
-        </review-item>
+        <ds-review-item
+          authorImgSrc="images/human_color.png"
+          content="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          author="John Doe"
+        ></ds-review-item>
+        <ds-review-item
+          authorImgSrc="images/human_color.png"
+          content="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          author="John Doe"
+        ></ds-review-item>
+        <ds-review-item
+          authorImgSrc="images/human_color.png"
+          content="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          author="John Doe"
+        ></ds-review-item>
+        <ds-review-item
+          authorImgSrc="images/human_color.png"
+          content="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          author="John Doe"
+        ></ds-review-item>
+        <ds-review-item
+          authorImgSrc="images/human_color.png"
+          content="해외취업을 목표로 리트코드 스터디 모임에 참여한 것은 좋은 선택이었습니다. 특히 혼자 공부하는 것보다 멤버들과 함께 문제를 풀며 시너지를 낼 수 있었습니다. 모임 중에 다양한 질문을 주고받으며 실력을 쌓을 수 있었고, 해외 취업 준비에 실질적인 도움을 받을 수 있었습니다."
+          author="John Doe"
+        ></ds-review-item>
       </div>
     </div>
 

main.js

@@ -3,5 +3,5 @@ import "./components/footer-link/footer-link.js";
 import "./components/header.js";
 import "./components/hero.js";
 import "./components/image.js";
-import "./components/review-item/review-item.js";
+import "./components/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";