TButton 컴포넌트 스타일 추가 및 변경

com.twin.app.shoptime/src/components/TButton/TButton.jsx

@@ -10,17 +10,24 @@ import { Marquee, MarqueeController } from "@enact/ui/Marquee";
 
 const SIZES = {
   small: "small",
-  medium: "medium",
   large: "large",
+  full: "full",
 };
 
 const TYPES = {
   normal: "normal",
-  withIcon: "withIcon",
+  // withIcon: "withIcon", // 추후 추가 예정
   terms: "terms",
   agree: "agree",
+  popup: "popup",
 };
 
+const COLOR = {
+  basic: "basic",
+  white: "white",
+  gray: "gray",
+}; // white: default color
+
 const SpottableComponent = Spottable("div");
 
 function TButtonBase({
@@ -33,6 +40,7 @@ function TButtonBase({
   disabled,
   selected,
   type = "normal",
+  color = "basic",
   size = "large",
   withMarquee = false,
   isIntro = false,
@@ -80,8 +88,10 @@ function TButtonBase({
         css.tButton,
         css[type],
         css[size],
+        css[color],
         isFocused && css.focused,
         selected && css.selected,
+        disabled ? css.disabled : null,
         className ? className : null
       )}
       spotlightId={spotlightId}
@@ -105,4 +115,4 @@ const TButton = ButtonDecorator(TButtonBase);
 
 export default TButton;
 
-export { TYPES, SIZES };
+export { TYPES, SIZES, COLOR };

com.twin.app.shoptime/src/components/TButton/TButton.module.less

@@ -3,17 +3,16 @@
 
 .tButton {
   // common style
-  display: flex;
+  width: auto;
-  justify-content: center;
+  height: 78px;
-  align-items: center;
+  line-height: 78px;
-  box-sizing: border-box;
+  display: inline-block;
-  background-size: contain;
+  background-color: #7a808d;
-  background-color: @BTN_MAIN_GREY;
   color: @COLOR_WHITE;
-  font-family: @baseFont;
+  border-radius: 12px;
-  border-radius: @btnRadius;
+  .font (@baseFontBold, 30px);
-  padding: 0 12px;
   transition: all 0.1s ease;
+  padding: 0 12px;
 
   .text {
     white-space: nowrap;
@@ -29,11 +28,66 @@
     }
   }
 
+  &.small {
+    min-width: 180px;
+    max-width: 300px;
+    height: 60px;
+    line-height: 60px;
+    font-size: 24px;
+    border-radius: 6px;
+  }
+  &.large {
+    min-width: 324px;
+    max-width: 650px;
+    letter-spacing: -0.75px;
+  }
+  &.full {
+    width: 100%;
+  }
+  &.basic {
+    &.disabled {
+      background-color: #7a808d;
+    }
+  }
+  &.gray {
+    background-color: @COLOR_GRAY03;
+    &.disabled {
+      color: #fff;
+      background-color: @COLOR_GRAY03;
+    }
+  }
+  &.white {
+    color: @COLOR_GRAY03;
+    background-color: @COLOR_WHITE;
+    &:hover,
+    &:active,
+    &:focus-within,
+    &:focus {
+      box-shadow: 0px 18px 28.2px 1.8px rgba(62, 59, 59, 0.4);
+      background-color: @PRIMARY_COLOR_RED;
+      color: @COLOR_WHITE;
+    }
+    &.disabled {
+      color: @COLOR_GRAY02;
+      background-color: @COLOR_WHITE;
+      border: 1px solid #dadada;
+    }
+  }
+
+  &.popup {
+    min-width: 240px;
+    max-width: 340px;
+  }
+
   &.focused {
     background-color: @PRIMARY_COLOR_RED;
     .focusDropShadow();
   }
 
+  &.disabled {
+    opacity: 0.3;
+  }
+
   &.terms {
     background-color: @COLOR_WHITE;
     .flex(@justifyCenter: space-between);
@@ -96,7 +150,7 @@
       box-shadow: 0px 18px 28.2px 1.8px rgba(0, 0, 0, 0.4);
       font-size: 40px;
       // line-height: normal;
-      background: @PRIMARY_COLOR_RED;
+      background-color: @PRIMARY_COLOR_RED;
       color: @COLOR_WHITE;
     }
   }

com.twin.app.shoptime/src/style/CommonStyle.module.less

@@ -47,21 +47,8 @@
 @COLOR_NAVY: #2c343f;
 @COLOR_SKYBLUE: #e7ebef;
 
-/* BUTTON */
-@BTN_MAIN_GREY: #7a808d;
-@BTN_SUB_GREY: @COLOR_GRAY03;
-
 /* ----- 추가 CommonStyles (chw) ----- */
 
-/* Button */
-@btnRadius: 12px;
-@btnPadding: 12px;
-
 .focusDropShadow() {
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
 }
-
-/* Text Button */
-@LargeTextBtnHeight: 78px;
-@SmallTextBtnHeight: 60px;
-@cateTabTwoFixWidth: 240px;