From f9e387bf53716a6e37d1e0410edc175ac5b718d0 Mon Sep 17 00:00:00 2001
From: jangheon Pyo <ifheone@gmail.com>
Date: Thu, 1 Feb 2024 16:14:56 +0900
Subject: [PATCH] =?UTF-8?q?[Chrome=2038=20=EC=9D=B4=EC=8A=88]=C2=A0TPanel,?=
 =?UTF-8?q?=20OnSale=20=C2=A0=C2=A0=20=C2=A0=20Detail=20Notes=20:=201.=20T?=
 =?UTF-8?q?Panel=E2=80=A8-=20=EC=8A=A4=ED=83=80=EC=9D=BC=20section=20?=
 =?UTF-8?q?=EA=B8=80=EB=A1=9C=EB=B2=8C=20=EC=84=A0=ED=83=9D=EC=9E=90?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=9E=90=EC=8B=9D=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EC=9E=90=EB=A1=9C=20=EB=B3=80=EA=B2=BD=202.=20=20OnSale?=
 =?UTF-8?q?=E2=80=A8-=20Scroller=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=EC=9D=84=20display:block;=20=EC=86=8D=EC=84=B1?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=E2=80=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TPanel/TPanel.module.less       |  2 +-
 .../views/OnSalePanel/CategoryNav/CategoryNav.jsx  | 14 ++++++++------
 .../CategoryNav/CategoryNav.module.less            |  3 +++
 .../OnSaleProductsGrid.module.less                 |  6 +++++-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less b/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less
index daaa1eb5..45438bce 100644
--- a/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less
+++ b/com.twin.app.shoptime/src/components/TPanel/TPanel.module.less
@@ -6,7 +6,7 @@
   box-sizing: border-box;
   color: black;
 
-  section {
+  > section {
     font-family: @baseFont;
     color: @COLOR_GRAY03;
     padding: 0 !important;
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
index dee0dd94..fadc7465 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
@@ -1,12 +1,13 @@
-import React from "react";
+import React from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import Scroller from "@enact/sandstone/Scroller";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import Scroller from '@enact/sandstone/Scroller';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import css from "./CategoryNav.module.less";
+import css from './CategoryNav.module.less';
 
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -24,6 +25,7 @@ export default function CategoryNav({
   return (
     <Container className={css.container} {...rest}>
       <Scroller
+        className={css.scroller}
         direction="horizontal"
         horizontalScrollbar="hidden"
         noScrollByWheel={true}
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less
index 53fa1ad2..574e134c 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less
@@ -2,6 +2,9 @@
 @import "../../../style/utils.module.less";
 
 .container {
+  .scroller {
+    display: block;
+  }
   width: 100%;
   z-index: 10;
   background-color: @BG_COLOR_01;
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less
index 41f05d68..f309de02 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less
@@ -5,6 +5,7 @@
   position: relative;
 
   .scroller {
+    display: block;
     padding-left: 60px;
 
     h2 {
@@ -14,7 +15,10 @@
 
     ul {
       .flex(@justifyCenter: flex-start);
-      gap: 18px;
+
+      > li {
+        margin-right: 18px;
+      }
     }
   }
 }