[Hot Picks] 타입 추가

Detail Notes :
1. 모든 페이지 추가
- 포커스 작업 진행중
- 영상 부분 임시 이미지로 노출

com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less

@@ -4,6 +4,7 @@
 .hotPicks {
   height: 100%;
   position: relative;
+
   > div {
     height: 100%;
   }
@@ -19,27 +20,16 @@
   .sectionWrap {
     height: 100%;
     position: relative;
+    padding: 90px 30px;
 
     > div {
       height: 100%;
       .flex();
-      > img {
+      img {
         width: auto;
-        max-width: 100%;
+        max-width: 1740px;
         height: auto;
         position: relative;
-        &:focus-within {
-          &::after {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            border: 4px solid @PRIMARY_COLOR_RED;
-            position: absolute;
-            left: 0;
-            top: 0;
-            content: "";
-          }
-        }
       }
     }
     > ul {
@@ -49,14 +39,7 @@
         position: relative;
         &:focus-within {
           &::after {
-            width: 100%;
+            .focused();
-            height: 100%;
-            box-sizing: border-box;
-            border: 4px solid @PRIMARY_COLOR_RED;
-            position: absolute;
-            left: 0;
-            top: 0;
-            content: "";
           }
         }
       }

com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx

@@ -5,6 +5,7 @@ import React, {
 } from 'react';
 
 import classNames from 'classnames';
+import { data } from 'ilib';
 import {
   useDispatch,
   useSelector,
@@ -16,9 +17,16 @@ import { getThemeCurationInfo } from '../../actions/homeActions';
 import TBody from '../../components/TBody/TBody';
 import TPanel from '../../components/TPanel/TPanel';
 import css from './HotPicks.module.less';
-import TCFI from './Type/TCFI/TCFI'; // Full Image
+import TCAD from './Type/TCAD/TCAD';
-import TCFV_2 from './Type/TCFV_2/TCFV_2'; // Full Image + VOD + Item(2)
+import TCFI from './Type/TCFI/TCFI';
-import TCHH from './Type/TCHH/TCHH'; // Half Image X2
+import TCFI_2 from './Type/TCFI_2/TCFI_2';
+import TCFI_3 from './Type/TCFI_3/TCFI_3';
+import TCFI_4 from './Type/TCFI_4/TCFI_4';
+import TCFV from './Type/TCFV/TCFV';
+import TCFV_2 from './Type/TCFV_2/TCFV_2';
+import TCFV_3 from './Type/TCFV_3/TCFV_3';
+import TCFV_4 from './Type/TCFV_4/TCFV_4';
+import TCHH from './Type/TCHH/TCHH';
 
 const SpottableComponent = Spottable("button");
 
@@ -33,11 +41,11 @@ export default function HotPicksPanel() {
     : [];
 
   const [currentPage, setCurrentPage] = useState(0);
-  const currentType = [...themeCurationType][currentPage];
+  const currentType = themeCurationType[currentPage];
   const currentTypeData =
     themeCurationInfoData &&
     themeCurationInfoData.filter((item) => item.tmpltCd === currentType);
-  console.log("##themeCurationInfoData", themeCurationInfoData);
+
   const handlePrev = useCallback(() => {
     setCurrentPage((prevIndex) =>
       prevIndex === 0 ? themeCurationType.length - 1 : prevIndex - 1
@@ -50,46 +58,59 @@ export default function HotPicksPanel() {
     );
   }, [currentPage]);
 
-  // TCFI  : Full Image
+  console.log("##themeCurationInfoData", themeCurationInfoData);
-  // TCHH : Half Image X2
+
-  // TCFI_2 : Full Image + Item(2)
-  // TCFI_3 : Full Image + Item(3)
-  // TCFI_4 : Full Image + Item(4)
-  // TCFV : Full Image + VOD
-  // TCFV_2 : Full Image + VOD + Item(2)
-  // TCFV_3 : Full Image + VOD + Item(3)
-  // TCFV_4 : Full Image + VOD + Item(4)
-  // TCAD : Theme AD
   let typeComponent;
   switch (currentType) {
-    case "TCFI":
+    case "TCFI": // Full Image
       typeComponent = (
         <TCFI data={currentTypeData} className={css.sectionWrap} />
       );
       break;
-    case "TCFV_2":
+    case "TCHH": // Half Image X2
-      typeComponent = (
-        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
-      );
-      break;
-    case "TCHH":
       typeComponent = (
         <TCHH data={currentTypeData} className={css.sectionWrap} />
       );
       break;
-    case "TCFI_4":
+    case "TCFI_2": // Full Image + Item(2)
+      typeComponent = (
+        <TCFI_2 data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
-    case "TCFI_2":
+    case "TCFI_3": // Full Image + Item(3)
+      typeComponent = (
+        <TCFI_3 data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
-    case "TCFI_3":
+    case "TCFI_4": // Full Image + Item(4)
+      typeComponent = (
+        <TCFI_4 data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
-    case "TCFV":
+    case "TCFV": // Full Image + VOD
+      typeComponent = (
+        <TCFV data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
-    case "TCFV_4":
+    case "TCFV_2": // Full Image + VOD + Item(2)
+      typeComponent = (
+        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
-    case "TCAD":
+    case "TCFV_3": // Full Image + VOD + Item(3)
+      typeComponent = (
+        <TCFV_3 data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
-    case "TCFV_3":
+    case "TCFV_4": // Full Image + VOD + Item(4)
+      typeComponent = (
+        <TCFV_4 data={currentTypeData} className={css.sectionWrap} />
+      );
+      break;
+    case "TCAD": // Theme AD
+      typeComponent = (
+        <TCAD data={currentTypeData} className={css.sectionWrap} />
+      );
       break;
     default:
       typeComponent = (

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCAD.module.less';
+
+const SpottableComponent = Spottable("div");
+
+export default function TCAD({ className, data }) {
+  console.log("##data", data);
+  return <>Full 영상</>;
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import classNames from 'classnames';
 
+import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';
 
 import css from './TCFI.module.less';
@@ -9,18 +10,27 @@ import css from './TCFI.module.less';
 const SpottableComponent = Spottable("div");
 
 export default function TCFI({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    Spotlight.focus("spotData");
+    // if (data) {
+    //   const showInfos = data[0]?.showInfos[0];
+    //   const id = showInfos.showId;
+    //   Spotlight.focus("spotlight" + id);
+    // }
+  }, [data]);
   return (
     <>
       {data &&
         data.map(({ bgImgPath, curationNm, tmpltCd }) => {
           return (
-            <div
+            <div key={tmpltCd} className={classNames(className && className)}>
-              key={tmpltCd}
+              <SpottableComponent
-              className={classNames(className ? className : "")}
+                className={css.fullImg}
+                spotlightId="spotData"
               >
-              <SpottableComponent className={css.fullImg}>
+                <p>
                   <img src={bgImgPath} alt={curationNm} />
+                </p>
               </SpottableComponent>
             </div>
           );

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less

@@ -0,0 +1,13 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.fullImg {
+  &:focus-within {
+    > p {
+      position: relative;
+      &::after {
+        .focused();
+      }
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI_2.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFI_2({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less

@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 100%;
+  justify-content: center;
+  left: 0;
+  bottom: 190px;
+  > li {
+    margin: 0 20px;
+    > img {
+      .size(@w:340px, @h:340px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI_3.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFI_3({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 3).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less

@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 100%;
+  justify-content: center;
+  left: 0;
+  bottom: 190px;
+  > li {
+    margin: 0 20px;
+    > img {
+      .size(@w:340px, @h:340px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+
+import classNames from 'classnames';
+
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI_4.module.less';
+
+const SpottableComponent = Spottable("li");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
+
+export default function TCFI_4({ className, data }) {
+  useEffect(() => {
+    if (data) {
+      const productInfos = data[0]?.productInfos[0];
+      const id = productInfos.prdtId;
+      Spotlight.focus("spotlight" + id);
+    }
+  }, [data]);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <Container className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent
+                        key={prdtId}
+                        spotlightId={"spotlight" + prdtId}
+                      >
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </Container>
+              <Container className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(2, 4).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </Container>
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less

@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 524px;
+  right: 120px;
+  bottom: 180px;
+  flex-wrap: wrap;
+  > li {
+    margin: 10px;
+    > img {
+      .size(@w:242px, @h:242px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, showInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {showInfos &&
+                  showInfos
+                    .slice(0, 1)
+                    .map(
+                      ({
+                        dfltThumbnailImgPath,
+                        showId,
+                        showNm,
+                        showUrl,
+                        thumbnailUrl,
+                      }) => {
+                        // @@@ 영상 출력 처리
+                        return (
+                          <SpottableComponent key={showId}>
+                            <img src={thumbnailUrl} alt={showNm} />
+                            {/* <video src={showUrl}></video> */}
+                          </SpottableComponent>
+                        );
+                      }
+                    )}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less

@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  right: 180px;
+  bottom: 298px;
+  > li {
+    > img {
+      .size(@w:860px, @h:484px);
+    }
+    > video {
+      .size(@w:860px, @h:484px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx

@@ -1,40 +1,82 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import classNames from 'classnames';
 
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
 import css from './TCFV_2.module.less';
 
 const SpottableComponent = Spottable("li");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
 
 export default function TCFV_2({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      const showInfos = data[0]?.showInfos[0];
+      const id = showInfos.showId;
+      Spotlight.focus("spotlight" + id);
+    }
+  }, [data]);
   return (
     <>
       {data &&
-        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+        data.map(
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
             return (
-            <div
+              <div key={tmpltCd} className={classNames(className && className)}>
-              key={tmpltCd}
-              className={classNames(className ? className : "")}
-            >
                 <div className={css.fullImg}>
                   <img src={bgImgPath} alt={curationNm} />
                 </div>
-              <ul className={css.itemList}>
+                <Container className={css.itemList}>
+                  {showInfos &&
+                    showInfos
+                      .slice(0, 1)
+                      .map(
+                        ({
+                          dfltThumbnailImgPath,
+                          showId,
+                          showNm,
+                          showUrl,
+                          thumbnailUrl,
+                        }) => {
+                          // @@@ 영상 출력 처리
+                          return (
+                            <SpottableComponent
+                              key={showId}
+                              spotlightId={"spotlight" + showId}
+                            >
+                              <img
+                                src={thumbnailUrl}
+                                alt={showNm}
+                                className={css.video}
+                              />
+                              {/* <video src={showUrl}></video> */}
+                            </SpottableComponent>
+                          );
+                        }
+                      )}
+
                   {productInfos &&
-                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    productInfos
+                      .slice(0, 2)
+                      .map(({ imgUrl, prdtNm, prdtId }) => {
                         return (
                           <SpottableComponent key={prdtId}>
                             <img src={imgUrl} alt={prdtNm} />
                           </SpottableComponent>
                         );
                       })}
-              </ul>
+                </Container>
               </div>
             );
-        })}
+          }
+        )}
     </>
   );
 }

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less

@@ -9,5 +9,9 @@
     > img {
       .size(@w:242px, @h:242px);
     }
+    > video,
+    .video {
+      .size(@w:430px, @h:242px);
+    }
   }
 }

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV_3.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV_3({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
+            return (
+              <div
+                key={tmpltCd}
+                className={classNames(className && className, css.flexCont)}
+              >
+                <div className={css.fullImg}>
+                  {showInfos &&
+                    showInfos
+                      .slice(0, 1)
+                      .map(
+                        ({
+                          dfltThumbnailImgPath,
+                          showId,
+                          showNm,
+                          showUrl,
+                          thumbnailUrl,
+                        }) => {
+                          // @@@ 영상 출력 처리
+                          return (
+                            <SpottableComponent key={showId}>
+                              <img
+                                src={thumbnailUrl}
+                                alt={showNm}
+                                className={css.video}
+                              />
+                              {/* <video src={showUrl}></video> */}
+                            </SpottableComponent>
+                          );
+                        }
+                      )}
+                </div>
+                <ul className={css.itemList}>
+                  {productInfos &&
+                    productInfos
+                      .slice(0, 4)
+                      .map(({ imgUrl, prdtNm, prdtId }) => {
+                        return (
+                          <SpottableComponent key={prdtId}>
+                            <img src={imgUrl} alt={prdtNm} />
+                          </SpottableComponent>
+                        );
+                      })}
+                </ul>
+              </div>
+            );
+          }
+        )}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less

@@ -0,0 +1,22 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.flexCont {
+  padding: 135px 50px;
+  display: flex;
+  justify-content: space-between;
+  > div {
+    width: 1414px;
+  }
+}
+.itemList {
+  width: 240px;
+  position: relative !important;
+  flex-direction: column;
+  justify-content: space-between;
+  > li {
+    > img {
+      .size(@w:240px, @h:240px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV_4.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV_4({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
+            return (
+              <div key={tmpltCd} className={classNames(className && className)}>
+                <div className={css.fullImg}>
+                  <img src={bgImgPath} alt={curationNm} />
+                </div>
+                <ul className={css.itemList}>
+                  {showInfos &&
+                    showInfos
+                      .slice(0, 1)
+                      .map(
+                        ({
+                          dfltThumbnailImgPath,
+                          showId,
+                          showNm,
+                          showUrl,
+                          thumbnailUrl,
+                        }) => {
+                          // @@@ 영상 출력 처리
+                          return (
+                            <SpottableComponent key={showId}>
+                              <img
+                                src={thumbnailUrl}
+                                alt={showNm}
+                                className={css.video}
+                              />
+                              {/* <video src={showUrl}></video> */}
+                            </SpottableComponent>
+                          );
+                        }
+                      )}
+
+                  {productInfos &&
+                    productInfos
+                      .slice(0, 4)
+                      .map(({ imgUrl, prdtNm, prdtId }) => {
+                        return (
+                          <SpottableComponent key={prdtId}>
+                            <img src={imgUrl} alt={prdtNm} />
+                          </SpottableComponent>
+                        );
+                      })}
+                </ul>
+              </div>
+            );
+          }
+        )}
+    </>
+  );
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less

@@ -0,0 +1,19 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 100%;
+  justify-content: center;
+  left: 0;
+  bottom: 200px;
+  > li {
+    margin: 10px;
+    > img {
+      .size(@w:242px, @h:242px);
+    }
+    > video,
+    .video {
+      .size(@w:430px, @h:242px);
+    }
+  }
+}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx

@@ -1,15 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import classNames from 'classnames';
 
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
 import css from './TCHH.module.less';
 
 const SpottableComponent = Spottable("div");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "div"
+);
 
 export default function TCHH({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      Spotlight.focus("spotlight0");
+    }
+  }, [data]);
   return (
     <>
       {data &&
@@ -17,16 +28,23 @@ export default function TCHH({ className, data }) {
           return (
             <div
               key={tmpltCd}
-              className={classNames(className ? className : "", css.halfWrap)}
+              className={classNames(className && className, css.halfWrap)}
             >
+              <Container>
                 {bgImgPath &&
                   bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
                     return (
-                    <SpottableComponent key={idx}>
+                      <SpottableComponent
+                        key={idx}
+                        spotlightId={"spotlight" + idx}
+                      >
+                        <p>
                           <img src={bgImgPath} alt={curationNm} />
+                        </p>
                       </SpottableComponent>
                     );
                   })}
+              </Container>
             </div>
           );
         })}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less

@@ -2,8 +2,20 @@
 @import "../../../../style/utils.module.less";
 
 .halfWrap {
+  > div {
     display: flex;
     > div {
+      display: flex;
+      justify-content: center;
       flex: 1;
+      &:focus-within {
+        > p {
+          position: relative;
+          &::after {
+            .focused();
+          }
+        }
+      }
+    }
   }
 }