From b6310b8267185cec2583e4342ae4f64aa37cc246 Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 17:19:17 -0400
Subject: [PATCH] refactor: refine to more semantic

---
 components/review-item/review-item.css | 16 +++++++++++-----
 components/review-item/review-item.js  | 18 ++++++++++--------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/review-item/review-item.css b/components/review-item/review-item.css
index 2a9e74a..a312f6f 100644
--- a/components/review-item/review-item.css
+++ b/components/review-item/review-item.css
@@ -7,28 +7,34 @@
   background-color: #efefef;
   max-width: 568px;
 }
-.review-img-text-container {
+.review-item blockquote,
+figure {
+  margin: 0;
+}
+.review-content {
   display: flex;
   align-items: center;
 }
-.review-img {
+.review-content figure {
   width: 104px;
   height: 104px;
   flex-shrink: 0;
   margin-right: 31px;
 }
-.review-img img {
+.review-content figure > img {
   width: 100%;
   height: 100%;
   padding-top: 7px;
   border-radius: 50%;
   background-color: #ffffff;
 }
-.review-text {
+.review-content blockquote {
   font-size: 14px;
 }
-.review-name {
+.review-footer {
   width: 100%;
   margin-top: 14px;
+}
+.review-footer figcaption {
   text-align: right;
 }
diff --git a/components/review-item/review-item.js b/components/review-item/review-item.js
index 88757e9..eea34d2 100644
--- a/components/review-item/review-item.js
+++ b/components/review-item/review-item.js
@@ -26,15 +26,17 @@ class ReviewItem extends HTMLElement {
     try {
       this.shadowRoot.innerHTML = `
         <link rel="stylesheet" href="components/review-item/review-item.css">
-        <div class="review-item">
-          <div class="review-img-text-container">
-            <div class="review-img">
+        <article class="review-item">
+          <section class="review-content">
+            <figure>
               <img src="${this.img}" alt="Reviewer">
-            </div>
-            <div class="review-text">${this.text}</div>
-          </div>
-          <div class="review-name">${this.name}</div>
-        </div>
+            </figure>
+            <blockquote>${this.text}</blockquote>
+          </section>
+          <footer class="review-footer">
+            <figcaption>${this.name}</figcaption>
+          </footer>
+        </article>
       `;
     } catch (error) {
       // log any rendering errors.