[components] TopButton 구현, TItemCard props 추가

Detail Notes :

1. TopButton, UI/UX 구현
2. TIemCard props추가 (spolightId)

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

@@ -1,11 +1,15 @@
-import React, { memo, useCallback } from "react";
+import React, {
+  memo,
+  useCallback,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';
 
-import { $L } from "../../utils/helperMethods";
+import { $L } from '../../utils/helperMethods';
-import css from "./TItemCard.module.less";
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import css from './TItemCard.module.less';
 
 const SpottableComponent = Spottable("li");
 
@@ -71,6 +75,7 @@ export default memo(function TItemCard({
         type === TYPE_VERTICAL && css.vertical
       )}
       onClick={() => handleClick(productId)}
+      spotlightId={SpotlightIds.TITEM_CARD + productId}
     >
       <div>
         <img src={imageSource} alt={imageAlt} />

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

@@ -8,6 +8,7 @@
   left: 0;
   top: 0;
   display: flex;
+  // display: none;
 
   &.hide {
     width: auto;
@@ -22,12 +23,10 @@
   left: 0;
   z-index: 1;
 
-
   &.hide {
     width: auto;
     z-index: 0;
   }
-  
 }
 
 .tabWrap {
@@ -46,8 +45,7 @@
   > img {
     width: 54px;
     height: 54px;
-    margin: -40px 24px 84px 42px
+    margin: -40px 24px 84px 42px;
-
   }
 
   &.expanded {
@@ -57,7 +55,6 @@
       width: 234px;
       height: 54px;
     }
-  
   }
 
   &.secondDepthLayout {
@@ -68,9 +65,7 @@
     padding-bottom: unset;
     padding-top: 71px;
     z-index: 0;
-     justify-content: flex-start;
+    justify-content: flex-start;
-
-
   }
   &.extraArea {
     flex-grow: 1;
@@ -80,9 +75,4 @@
   &.hide {
     width: 0;
   }
-
-
- 
 }
-
-

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

@@ -0,0 +1,27 @@
+import React, {
+  memo,
+  useCallback,
+} from 'react';
+
+import Spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TopButton.module.less';
+
+const SpottableComponent = Spottable("button");
+
+export default memo(function TopButton({ className, targetId, ...rest }) {
+  const handleClick = useCallback(() => {
+    targetId && Spotlight.focus(targetId);
+  }, [targetId]);
+
+  return (
+    <div className={css.container}>
+      <SpottableComponent
+        className={className && className}
+        onClick={handleClick}
+        {...rest}
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,19 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  .flex();
+  width: 100%;
+
+  /* normal */
+  button {
+    .size(@w: 120px, @h: 120px);
+    margin: 60px 0;
+    background-image: url("../../../assets/button/120x120/btn-top-nor.svg");
+
+    /* focuesd */
+    &:focus-within {
+      background-image: url("../../../assets/button/120x120/btn-top-foc.svg");
+    }
+  }
+}

com.twin.app.shoptime/src/components/TopButton/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "TopButton.jsx",
+  "styles": [
+    "TopButton.module.less"
+  ]
+}