THeader 컴포넌트 onBackButton Foucs 추가

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

@@ -3,6 +3,7 @@ import React from "react";
 import classNames from "classnames";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
 import css from "./THeader.module.less";
 
@@ -10,11 +11,13 @@ const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
-
+const SpottableComponent = Spottable("button");
 export default function THeader({ title, className, onBackButton, onClick }) {
   return (
     <Container className={classNames(css.tHeader, className)}>
-      {onBackButton && <button className={css.button} onClick={onClick} />}
+      {onBackButton && (
+        <SpottableComponent className={css.button} onClick={onClick} />
+      )}
       <div className={css.title}>{title}</div>
     </Container>
   );

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

@@ -25,4 +25,11 @@
   background-image: url("../../../assets/images/btn/btn-60-bk-back-nor@3x.png");
   border: none;
   margin-right: -49px;
+  position: relative;
+
+  &:focus {
+    &::after {
+      .focused(@boxShadow: 22px, @borderRadius:0px);
+    }
+  }
 }