[TDropDown] 공통 컴포넌트 - 드롭다운 메뉴 추가

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>
+  );
+}

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;
+          }
+        }
+      }
+    }
+  }
+}