From 79feded12f4475d2655869ad91c1c81c226ce70c Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Tue, 6 Feb 2024 16:39:39 +0900
Subject: [PATCH] =?UTF-8?q?[HomePanel]=20HomeOnSale=EC=AA=BD=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B2=BD=EC=83=89=20=EA=B4=80=EB=A0=A8=20css=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=20-=20css=20=EC=88=98=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/HomePanel/HomeOnSale/HomeOnSale.jsx |  4 +-
 .../HomeOnSale/HomeOnSale.module.less         | 80 +++++++++++++++++++
 .../HomeOnSaleItem/HomeOnSaleItem.module.less | 27 +------
 3 files changed, 84 insertions(+), 27 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
index 1cfe8488..f6795653 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
@@ -48,7 +48,7 @@ const HomeOnSale = ({ ...rest }) => {
     <Container {...rest} className={css.container}>
       <div className={css.bestSeller}>
         <h2 className={css.subTitle}>{$L("ON SALE")}</h2>
-        <TGrid type="onSaleItem">
+        <div className={css.onSaleItem}>
           {homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
             <VirtualGridList
               className={css.grid}
@@ -65,7 +65,7 @@ const HomeOnSale = ({ ...rest }) => {
               spacing={ri.scale(SALE_ITEM_CONF.SPACING)}
             />
           )}
-        </TGrid>
+        </div>
       </div>
     </Container>
   );
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
index 1d512055..d5357920 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
@@ -16,5 +16,85 @@
 
   .grid {
     height: 300px;
+    > div {
+      > div {
+        > div {
+          &:nth-child(5n + 1) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #f485c3, #cc4d92);
+              }
+            }
+          }
+          &:nth-child(5n + 2) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #fdbe43, #e47915);
+              }
+            }
+          }
+          &:nth-child(5n + 3) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #97ca73, #3e8d18);
+              }
+            }
+          }
+          &:nth-child(5n + 4) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #84b0e9, #4282d9);
+              }
+            }
+          }
+          &:nth-child(5n + 5) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #a387ea, #7750dc);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.onSaleItem {
+    margin-top: 20px;
+    height: 300px;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    // > div {
+    //   > div {
+    //     > div {
+    //       > div:nth-child(5n + 1) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #f485c3, #cc4d92);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 2) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #fdbe43, #e47915);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 3) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #97ca73, #3e8d18);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 4) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #84b0e9, #4282d9);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 5) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #a387ea, #7750dc);
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less
index edb26760..e9f109e1 100644
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less
@@ -16,6 +16,7 @@
     box-sizing: border-box;
     .focusDropShadow();
   }
+
   .onSaleItemListImg {
     width: 300px;
     height: 300px;
@@ -29,6 +30,7 @@
     box-sizing: border-box;
     padding: 24px;
     display: inline-block;
+
     .onSaleItemListBoxTitle {
       width: 282px;
       height: 30px;
@@ -82,29 +84,4 @@
       }
     }
   }
-  &:nth-child(5n + 1) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #f485c3, #cc4d92);
-    }
-  }
-  &:nth-child(5n + 2) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #fdbe43, #e47915);
-    }
-  }
-  &:nth-child(5n + 3) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #97ca73, #3e8d18);
-    }
-  }
-  &:nth-child(5n + 4) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #84b0e9, #4282d9);
-    }
-  }
-  &:nth-child(5n + 5) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #a387ea, #7750dc);
-    }
-  }
 }