[HOT PICKS] 포커스 기능 추가

Detail Notes :
 
1. 전체 타입에 포커스 기능 추가
2. 추후 진행 예정 작업
> 클릭 이벤트
> 영상

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

@@ -58,8 +58,6 @@ export default function HotPicksPanel() {
     );
   }, [currentPage]);
 
-  console.log("##themeCurationInfoData", themeCurationInfoData);
-
   let typeComponent;
   switch (currentType) {
     case "TCFI": // Full Image
@@ -125,7 +123,6 @@ export default function HotPicksPanel() {
   return (
     <TPanel>
       <TBody className={css.hotPicks}>
-        <h2>Type : {currentType}</h2>
         {currentPage > 0 && (
           <p className={classNames(css.arrow, css.arrowPrev)}>
             <SpottableComponent onClick={handlePrev}>이전</SpottableComponent>

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

@@ -12,11 +12,6 @@ const SpottableComponent = Spottable("div");
 export default function TCFI({ className, data }) {
   useEffect(() => {
     Spotlight.focus("spotData");
-    // if (data) {
-    //   const showInfos = data[0]?.showInfos[0];
-    //   const id = showInfos.showId;
-    //   Spotlight.focus("spotlight" + id);
-    // }
   }, [data]);
   return (
     <>
@@ -28,9 +23,7 @@ export default function TCFI({ className, data }) {
                 className={css.fullImg}
                 spotlightId="spotData"
               >
-                <p>
                 <img src={bgImgPath} alt={curationNm} />
-                </p>
               </SpottableComponent>
             </div>
           );

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

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

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

@@ -1,15 +1,29 @@
-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 './TCFI_2.module.less';
 
 const SpottableComponent = Spottable("li");
 
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
+
 export default function TCFI_2({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      const productInfos = data[0].productInfos[0];
+      const id = productInfos.prdtId;
+      Spotlight.focus("spotlight" + id);
+    }
+  }, [data]);
   return (
     <>
       {data &&
@@ -19,16 +33,19 @@ export default function TCFI_2({ className, data }) {
               <div className={css.fullImg}>
                 <img src={bgImgPath} alt={curationNm} />
               </div>
-              <ul className={css.itemList}>
+              <Container className={css.itemList}>
                 {productInfos &&
                   productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
                     return (
-                      <SpottableComponent key={prdtId}>
+                      <SpottableComponent
+                        key={prdtId}
+                        spotlightId={"spotlight" + prdtId}
+                      >
                         <img src={imgUrl} alt={prdtNm} />
                       </SpottableComponent>
                     );
                   })}
-              </ul>
+              </Container>
             </div>
           );
         })}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.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 './TCFI_3.module.less';
 
 const SpottableComponent = Spottable("li");
-
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
 export default function TCFI_3({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      const productInfos = data[0].productInfos[0].prdtId;
+      Spotlight.focus("spotlight" + productInfos);
+    }
+  }, [data]);
   return (
     <>
       {data &&
@@ -19,16 +30,19 @@ export default function TCFI_3({ className, data }) {
               <div className={css.fullImg}>
                 <img src={bgImgPath} alt={curationNm} />
               </div>
-              <ul className={css.itemList}>
+              <Container className={css.itemList}>
                 {productInfos &&
                   productInfos.slice(0, 3).map(({ imgUrl, prdtNm, prdtId }) => {
                     return (
-                      <SpottableComponent key={prdtId}>
+                      <SpottableComponent
+                        key={prdtId}
+                        spotlightId={"spotlight" + prdtId}
+                      >
                         <img src={imgUrl} alt={prdtNm} />
                       </SpottableComponent>
                     );
                   })}
-              </ul>
+              </Container>
             </div>
           );
         })}

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

@@ -1,3 +1,4 @@
+// @@@ 포커스 처리 남음
 import React, { useEffect } from 'react';
 
 import classNames from 'classnames';
@@ -10,17 +11,16 @@ 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 productInfos = data[0].productInfos[0].prdtId;
-      const id = productInfos.prdtId;
+      Spotlight.focus("spotlight" + productInfos);
-      Spotlight.focus("spotlight" + id);
     }
   }, [data]);
   return (
@@ -34,7 +34,7 @@ export default function TCFI_4({ className, data }) {
               </div>
               <Container className={css.itemList}>
                 {productInfos &&
-                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                  productInfos.slice(0, 4).map(({ imgUrl, prdtNm, prdtId }) => {
                     return (
                       <SpottableComponent
                         key={prdtId}
@@ -45,16 +45,6 @@ export default function TCFI_4({ className, data }) {
                     );
                   })}
               </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

@@ -2,10 +2,11 @@
 @import "../../../../style/utils.module.less";
 
 .itemList {
-  width: 524px;
+  width: 50%;
-  right: 120px;
-  bottom: 180px;
   flex-wrap: wrap;
+  padding: 0 120px 0 256px;
+  right: 0;
+  bottom: 190px;
   > li {
     margin: 10px;
     > img {

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

@@ -1,26 +1,37 @@
-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 './TCFV.module.less';
 
 const SpottableComponent = Spottable("li");
+const SpottableComponentDiv = Spottable("div");
 
 export default function TCFV({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    Spotlight.focus("spotData");
+  }, [data]);
   return (
     <>
       {data &&
         data.map(({ bgImgPath, curationNm, tmpltCd, showInfos }) => {
           return (
             <div key={tmpltCd} className={classNames(className && className)}>
-              <div className={css.fullImg}>
+              <SpottableComponentDiv
+                className={css.fullImg}
+                spotlightId="spotData"
+              >
                 <img src={bgImgPath} alt={curationNm} />
-              </div>
+              </SpottableComponentDiv>
               <ul className={css.itemList}>
-                {showInfos &&
+                <SpottableComponent>
+                  <img src={bgImgPath} alt={curationNm} />
+                  {/* <video src={showUrl}></video> */}
+                </SpottableComponent>
+                {/* {showInfos &&
                   showInfos
                     .slice(0, 1)
                     .map(
@@ -34,12 +45,11 @@ export default function TCFV({ className, data }) {
                         // @@@ 영상 출력 처리
                         return (
                           <SpottableComponent key={showId}>
-                            <img src={thumbnailUrl} alt={showNm} />
+                            <video src={showUrl}></video>
-                            {/* <video src={showUrl}></video> */}
                           </SpottableComponent>
                         );
                       }
-                    )}
+                    )} */}
               </ul>
             </div>
           );

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

@@ -1,6 +1,15 @@
 @import "../../../../style/CommonStyle.module.less";
 @import "../../../../style/utils.module.less";
 
+.fullImg {
+  position: relative;
+  &:focus-within {
+    &::after {
+      .focused();
+    }
+  }
+}
+
 .itemList {
   right: 180px;
   bottom: 298px;

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

@@ -18,9 +18,8 @@ const Container = SpotlightContainerDecorator(
 export default function TCFV_2({ className, data }) {
   useEffect(() => {
     if (data) {
-      const showInfos = data[0]?.showInfos[0];
+      const showInfos = data[0].showInfos[0].showId;
-      const id = showInfos.showId;
+      Spotlight.focus("spotlight" + showInfos);
-      Spotlight.focus("spotlight" + id);
     }
   }, [data]);
   return (

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

@@ -1,15 +1,28 @@
-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_3.module.less';
 
 const SpottableComponent = Spottable("li");
-
+const SpottableComponentDiv = Spottable("div");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
+const ContainerDiv = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "div"
+);
 export default function TCFV_3({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    Spotlight.focus("spotData");
+  }, [data]);
   return (
     <>
       {data &&
@@ -20,7 +33,7 @@ export default function TCFV_3({ className, data }) {
                 key={tmpltCd}
                 className={classNames(className && className, css.flexCont)}
               >
-                <div className={css.fullImg}>
+                <ContainerDiv className={css.fullImg}>
                   {showInfos &&
                     showInfos
                       .slice(0, 1)
@@ -34,19 +47,22 @@ export default function TCFV_3({ className, data }) {
                         }) => {
                           // @@@ 영상 출력 처리
                           return (
-                            <SpottableComponent key={showId}>
+                            <SpottableComponentDiv
+                              key={showId}
+                              spotlightId="spotData"
+                            >
                               <img
                                 src={thumbnailUrl}
                                 alt={showNm}
                                 className={css.video}
                               />
                               {/* <video src={showUrl}></video> */}
-                            </SpottableComponent>
+                            </SpottableComponentDiv>
                           );
                         }
                       )}
-                </div>
+                </ContainerDiv>
-                <ul className={css.itemList}>
+                <Container className={css.itemList}>
                   {productInfos &&
                     productInfos
                       .slice(0, 4)
@@ -57,7 +73,7 @@ export default function TCFV_3({ className, data }) {
                           </SpottableComponent>
                         );
                       })}
-                </ul>
+                </Container>
               </div>
             );
           }

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

@@ -7,6 +7,12 @@
   justify-content: space-between;
   > div {
     width: 1414px;
+    position: relative;
+    &:focus-within {
+      &::after {
+        .focused();
+      }
+    }
   }
 }
 .itemList {

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

@@ -1,15 +1,27 @@
-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_4.module.less';
 
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
+
 const SpottableComponent = Spottable("li");
 
 export default function TCFV_4({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      Spotlight.focus("spotData");
+    }
+  }, [data]);
   return (
     <>
       {data &&
@@ -20,8 +32,8 @@ export default function TCFV_4({ className, data }) {
                 <div className={css.fullImg}>
                   <img src={bgImgPath} alt={curationNm} />
                 </div>
-                <ul className={css.itemList}>
+                <Container className={css.itemList}>
-                  {showInfos &&
+                  {/* {showInfos &&
                     showInfos
                       .slice(0, 1)
                       .map(
@@ -34,18 +46,28 @@ export default function TCFV_4({ className, data }) {
                         }) => {
                           // @@@ 영상 출력 처리
                           return (
-                            <SpottableComponent key={showId}>
+                            <SpottableComponent
+                              key={showId}
+                              spotlightId="spotData"
+                            >
                               <img
-                                src={thumbnailUrl}
+                                src={bgImgPath}
-                                alt={showNm}
+                                alt={curationNm}
                                 className={css.video}
                               />
-                              {/* <video src={showUrl}></video> */}
+                              
                             </SpottableComponent>
                           );
                         }
                       )}
-
+                       */}
+                  <SpottableComponent spotlightId="spotData">
+                    <img
+                      src={bgImgPath}
+                      alt={curationNm}
+                      className={css.video}
+                    />
+                  </SpottableComponent>
                   {productInfos &&
                     productInfos
                       .slice(0, 4)
@@ -56,7 +78,7 @@ export default function TCFV_4({ className, data }) {
                           </SpottableComponent>
                         );
                       })}
-                </ul>
+                </Container>
               </div>
             );
           }

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

@@ -38,9 +38,7 @@ export default function TCHH({ className, data }) {
                         key={idx}
                         spotlightId={"spotlight" + idx}
                       >
-                        <p>
                         <img src={bgImgPath} alt={curationNm} />
-                        </p>
                       </SpottableComponent>
                     );
                   })}

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

@@ -4,13 +4,15 @@
 .halfWrap {
   > div {
     display: flex;
+    justify-content: space-between !important;
     > div {
-      display: flex;
+      width: 855px;
-      justify-content: center;
+      height: 900px;
-      flex: 1;
-      &:focus-within {
-        > p {
       position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:focus-within {
         &::after {
           .focused();
         }
@@ -18,4 +20,3 @@
     }
   }
 }
-}