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 1/8] 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.

From 460c0a2921503f4e963b3735fc5828ea6738a772 Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 17:29:37 -0400
Subject: [PATCH 2/8] refactor: modify minor styles based on figma

---
 components/review-item/review-item.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/review-item/review-item.css b/components/review-item/review-item.css
index a312f6f..73d3624 100644
--- a/components/review-item/review-item.css
+++ b/components/review-item/review-item.css
@@ -19,13 +19,14 @@ figure {
   width: 104px;
   height: 104px;
   flex-shrink: 0;
+  object-fit: cover;
   margin-right: 31px;
 }
 .review-content figure > img {
   width: 100%;
   height: 100%;
   padding-top: 7px;
-  border-radius: 50%;
+  border-radius: 48%;
   background-color: #ffffff;
 }
 .review-content blockquote {
@@ -36,5 +37,6 @@ figure {
   margin-top: 14px;
 }
 .review-footer figcaption {
+  font-size: 16px;
   text-align: right;
 }

From 7468f4d8c833d0c16d453d20e8b08791dc9dc148 Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 17:55:20 -0400
Subject: [PATCH 3/8] refactor: combine CSS in JS

---
 components/review-item/review-item.js | 43 ++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/components/review-item/review-item.js b/components/review-item/review-item.js
index eea34d2..6ac8222 100644
--- a/components/review-item/review-item.js
+++ b/components/review-item/review-item.js
@@ -25,7 +25,48 @@ class ReviewItem extends HTMLElement {
   render() {
     try {
       this.shadowRoot.innerHTML = `
-        <link rel="stylesheet" href="components/review-item/review-item.css">
+        .review-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border-radius: 10px;
+          padding: 41px 51px 31px;
+          background-color: #efefef;
+          max-width: 568px;
+        }
+        .review-item blockquote,
+          figure {
+          margin: 0;
+        }
+        .review-content {
+          display: flex;
+          align-items: center;
+        }
+        .review-content figure {
+          width: 104px;
+          height: 104px;
+          flex-shrink: 0;
+          object-fit: cover;
+          margin-right: 31px;
+        }
+        .review-content figure > img {
+          width: 100%;
+          height: 100%;
+          padding-top: 7px;
+          border-radius: 48%;
+          background-color: #ffffff;
+        }
+        .review-content blockquote {
+          font-size: 14px;
+        }
+        .review-footer {
+          width: 100%;
+          margin-top: 14px;
+        }
+        .review-footer figcaption {
+          font-size: 16px;
+          text-align: right;
+        }
         <article class="review-item">
           <section class="review-content">
             <figure>

From ef6bb6c01dd86fe22b5b512c735735f923537800 Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 17:56:29 -0400
Subject: [PATCH 4/8] remove: separated CSS file

---
 components/review-item/review-item.css | 42 --------------------------
 1 file changed, 42 deletions(-)
 delete mode 100644 components/review-item/review-item.css

diff --git a/components/review-item/review-item.css b/components/review-item/review-item.css
deleted file mode 100644
index 73d3624..0000000
--- a/components/review-item/review-item.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.review-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-radius: 10px;
-  padding: 41px 51px 31px;
-  background-color: #efefef;
-  max-width: 568px;
-}
-.review-item blockquote,
-figure {
-  margin: 0;
-}
-.review-content {
-  display: flex;
-  align-items: center;
-}
-.review-content figure {
-  width: 104px;
-  height: 104px;
-  flex-shrink: 0;
-  object-fit: cover;
-  margin-right: 31px;
-}
-.review-content figure > img {
-  width: 100%;
-  height: 100%;
-  padding-top: 7px;
-  border-radius: 48%;
-  background-color: #ffffff;
-}
-.review-content blockquote {
-  font-size: 14px;
-}
-.review-footer {
-  width: 100%;
-  margin-top: 14px;
-}
-.review-footer figcaption {
-  font-size: 16px;
-  text-align: right;
-}

From 18a7b7c356d3d9457462baa50e384c6f3fd5c3c1 Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 17:57:10 -0400
Subject: [PATCH 5/8] rename: move JS file to /components

---
 components/{review-item => }/review-item.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename components/{review-item => }/review-item.js (100%)

diff --git a/components/review-item/review-item.js b/components/review-item.js
similarity index 100%
rename from components/review-item/review-item.js
rename to components/review-item.js

From bae4e1a978ead5ec4cd2aa59432a4beda63a49ee Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 18:05:03 -0400
Subject: [PATCH 6/8] fix: add style tag

---
 components/review-item.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/review-item.js b/components/review-item.js
index 6ac8222..7276ab7 100644
--- a/components/review-item.js
+++ b/components/review-item.js
@@ -25,6 +25,7 @@ class ReviewItem extends HTMLElement {
   render() {
     try {
       this.shadowRoot.innerHTML = `
+      <style>
         .review-item {
           display: flex;
           flex-direction: column;
@@ -67,6 +68,7 @@ class ReviewItem extends HTMLElement {
           font-size: 16px;
           text-align: right;
         }
+      </style>
         <article class="review-item">
           <section class="review-content">
             <figure>

From f00d3375de07703842e9519e3fbb2b08cb76a29a Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Sat, 15 Jun 2024 18:05:42 -0400
Subject: [PATCH 7/8] refactor: modify component path in main.js

---
 main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.js b/main.js
index 16d65c9..79edaf9 100644
--- a/main.js
+++ b/main.js
@@ -2,5 +2,5 @@ import "./components/divider/divider.js";
 import "./components/footer-link/footer-link.js";
 import "./components/hero/hero.js";
 import "./components/link-button/link-button.js";
-import "./components/review-item/review-item.js";
+import "./components/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";

From 016fa3c745d321c5691f11f7ecfc7ad164d8da68 Mon Sep 17 00:00:00 2001
From: hwigyeompark <phg5590@gmail.com>
Date: Mon, 17 Jun 2024 16:56:16 -0400
Subject: [PATCH 8/8] refactor: align depth of HTML

---
 components/review-item.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/review-item.js b/components/review-item.js
index 7276ab7..d263077 100644
--- a/components/review-item.js
+++ b/components/review-item.js
@@ -69,17 +69,17 @@ class ReviewItem extends HTMLElement {
           text-align: right;
         }
       </style>
-        <article class="review-item">
-          <section class="review-content">
-            <figure>
-              <img src="${this.img}" alt="Reviewer">
-            </figure>
-            <blockquote>${this.text}</blockquote>
-          </section>
-          <footer class="review-footer">
-            <figcaption>${this.name}</figcaption>
-          </footer>
-        </article>
+      <article class="review-item">
+        <section class="review-content">
+          <figure>
+            <img src="${this.img}" alt="Reviewer">
+          </figure>
+          <blockquote>${this.text}</blockquote>
+        </section>
+        <footer class="review-footer">
+          <figcaption>${this.name}</figcaption>
+        </footer>
+      </article>
       `;
     } catch (error) {
       // log any rendering errors.