[FeaturedBrandsPanel] import React

Detail Notes :

1. React 부재로 인한 오류로 인한 React import

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import Scroller from "@enact/sandstone/Scroller";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from "react";
+import React, { memo, useCallback, useState } from "react";
 
 import Spottable from "@enact/spotlight/Spottable";
 
@@ -54,7 +54,13 @@ export default memo(function LiveVideoCard({
 
       <div>
         <div>
-          <img src={IcLiveShow} alt={LIVE_SHOW_STRING} />
+          <img
+            src={IcLiveShow}
+            alt={
+              // @@pyh Todo, alt 값 언어처리 유무
+              LIVE_SHOW_STRING
+            }
+          />
           <div>
             <h3>{title}</h3>
             <time>
@@ -64,7 +70,13 @@ export default memo(function LiveVideoCard({
         </div>
         {liveChannelCount && liveChannelCount === 1 && (
           <div>
-            <img src={IcWarning} alt={WARNING_STRING} />
+            <img
+              src={IcWarning}
+              alt={
+                // @@pyh Todo, alt 값 언어처리 유무
+                WARNING_STRING
+              }
+            />
             <span>{$L(WARNING_MESSAGE)}</span>
           </div>
         )}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx

@@ -1,11 +1,12 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
 
-import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import { $L } from "../../../utils/helperMethods";
-import css from "./QuickMenu.module.less";
+import { $L } from '../../../utils/helperMethods';
+import css from './QuickMenu.module.less';
 
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -14,7 +15,12 @@ const Container = SpotlightContainerDecorator(
 
 const SpottableComponent = Spottable("li");
 
-export default function QuickMenu({ brandInfo, selectedPatnrId, onQuickMenuClick, ...rest }) {
+export default function QuickMenu({
+  brandInfo,
+  selectedPatnrId,
+  onQuickMenuClick,
+  ...rest
+}) {
   const handleClick = (patnrId) => {
     if (selectedPatnrId === patnrId) {
       return;
@@ -24,9 +30,11 @@ export default function QuickMenu({ brandInfo, selectedPatnrId, onQuickMenuClick
   };
 
   useEffect(() => {
-    const element = document.getElementById(selectedPatnrId);
+    console.log("@@ brandInfo", brandInfo);
+    // @@pyh Todo, change to logic
+    // const element = document.getElementById(selectedPatnrId);
 
-    Spotlight.focus(element);
+    Spotlight.focus("spotlight" + selectedPatnrId);
   }, []);
 
   return (
@@ -40,8 +48,11 @@ export default function QuickMenu({ brandInfo, selectedPatnrId, onQuickMenuClick
                 id={patnrId}
                 key={patnrId}
                 onClick={() => handleClick(patnrId)}
+                spotlightId={"spotlight" + patnrId}
               >
-                {newFlag === "Y" && <span className={css.newBagde}>{$L("NEW")}</span>}
+                {newFlag === "Y" && (
+                  <span className={css.newBagde}>{$L("NEW")}</span>
+                )}
                 <span className={css.outline} />
                 <img src={logoImgPath} alt={logoImgAlt} />
               </SpottableComponent>