From bf4562b12a4970c6d844b0eedc3f2ae192c7e28a Mon Sep 17 00:00:00 2001
From: "hyunwoo93.cha" <hyunwoo93.cha@lgepartners.com>
Date: Tue, 13 Feb 2024 22:02:00 +0900
Subject: [PATCH] =?UTF-8?q?[TDropDown]=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20-=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TDropDown/TDropDown.jsx    |  28 +++++
 .../TDropDown/TDropDown.module.less           | 114 ++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100644 com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
 create mode 100644 com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less

diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
new file mode 100644
index 00000000..cf24a5f3
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import DropDown from "@enact/sandstone/Dropdown";
+
+import css from "./TDropDown.module.less";
+
+export default function TDropDown({
+  className,
+  children,
+  direction = "below",
+  size,
+  color,
+  selectedIndex,
+  ...rest
+}) {
+  return (
+    <DropDown
+      className={classNames(css.tDropdown, css[size], css[color], className)}
+      direction={direction}
+      selected={selectedIndex}
+      {...rest}
+    >
+      {children}
+    </DropDown>
+  );
+}
diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
new file mode 100644
index 00000000..07a11304
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less
@@ -0,0 +1,114 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.tDropdown {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+
+  [role="button"] {
+    height: 60px !important;
+    border-radius: 6px !important;
+    padding: 20px 19px !important;
+    font-family: @baseFontBold !important;
+    font-size: 24px !important;
+    background-color: @COLOR_GRAY03 !important;
+    color: @COLOR_WHITE !important;
+    margin: 0 !important;
+
+    > div:first-child {
+      background-color: transparent !important;
+      box-shadow: none !important;
+    }
+
+    > div:nth-child(2) > div:nth-child(1) {
+      margin-right: 0 !important;
+      margin-left: 10px !important;
+      font-size: 24px !important;
+      width: 24px !important;
+      color: @COLOR_WHITE !important;
+    }
+
+    &:focus {
+      background-color: @PRIMARY_COLOR_RED !important;
+    }
+  }
+}
+
+[id="floatLayer"] {
+  --list-background-color: @COLOR_GRAY03;
+  --list-item-font-color: @COLOR_WHITE;
+  --list-item-focus-background-color: @PRIMARY_COLOR_RED;
+  --list-item-focus-font-color: @COLOR_WHITE;
+  --list-item-select-border-color: @PRIMARY_COLOR_RED;
+  --scroll-track-color: @COLOR_GRAY03;
+  --scroll-bar-color: @COLOR_GRAY04;
+
+  > div > div[id] > div:nth-child(2) {
+    bottom: unset !important;
+    transform: unset !important;
+
+    > div:nth-child(1) {
+      //list layout
+      padding: 0 !important;
+      margin-top: 4px !important;
+      box-shadow: none !important;
+      background-color: var(--list-background-color) !important;
+      border-radius: 6px !important;
+
+      > div {
+        padding: 0 !important;
+        padding-top: 14px !important;
+        height: auto !important;
+
+        > div > div {
+          > div {
+            padding: 0 15px !important;
+
+            &:focus-within {
+              background-color: var(
+                --list-item-focus-background-color
+              ) !important;
+            }
+
+            > div:nth-child(1) {
+              font-family: @baseFontBold !important;
+              color: var(--list-item-font-color) !important;
+              font-size: 24px !important;
+              margin: 0 !important;
+              padding: 0 !important;
+              height: 60px !important;
+              line-height: 60px !important;
+              -webkit-margin-start: 0 !important;
+              -webkit-inline-start: 0 !important;
+
+              > div:first-child {
+                //list item shadow
+                background-color: transparent !important;
+                box-shadow: none !important;
+              }
+
+              > div:nth-child(3) {
+                //check icon
+                display: none !important;
+              }
+            }
+          }
+        }
+
+        > div:nth-child(2) > div {
+          // scroll track
+          background-color: var(--scroll-track-color) !important;
+          width: 4px !important;
+          border-radius: 20px !important;
+
+          > div {
+            //scroll bar
+            background: var(--scroll-bar-color) !important;
+            width: 100% !important;
+            border-radius: inherit !important;
+          }
+        }
+      }
+    }
+  }
+}