From d16433826c6a5880309460c1e07d30c86e7824bf Mon Sep 17 00:00:00 2001 From: jangheon Pyo Date: Tue, 13 Feb 2024 14:24:00 +0900 Subject: [PATCH] =?UTF-8?q?[HOT=20PICKS]=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=C2=A0=20=C2=A0=C2=A0?= =?UTF-8?q?=20=C2=A0=20Detail=20Notes=20:=20=C2=A0=201.=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=20=ED=83=80=EC=9E=85=EC=97=90=20=ED=8F=AC=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=202.=20?= =?UTF-8?q?=EC=B6=94=ED=9B=84=20=EC=A7=84=ED=96=89=20=EC=98=88=EC=A0=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=E2=80=A8>=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=E2=80=A8>=20=EC=98=81=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/HotPicksPanel/HotPicksPanel.jsx | 3 -- .../views/HotPicksPanel/Type/TCFI/TCFI.jsx | 9 +--- .../HotPicksPanel/Type/TCFI/TCFI.module.less | 8 ++-- .../HotPicksPanel/Type/TCFI_2/TCFI_2.jsx | 27 +++++++++--- .../HotPicksPanel/Type/TCFI_3/TCFI_3.jsx | 26 +++++++++--- .../HotPicksPanel/Type/TCFI_4/TCFI_4.jsx | 20 +++------ .../Type/TCFI_4/TCFI_4.module.less | 7 ++-- .../views/HotPicksPanel/Type/TCFV/TCFV.jsx | 26 ++++++++---- .../HotPicksPanel/Type/TCFV/TCFV.module.less | 9 ++++ .../HotPicksPanel/Type/TCFV_2/TCFV_2.jsx | 5 +-- .../HotPicksPanel/Type/TCFV_3/TCFV_3.jsx | 34 +++++++++++---- .../Type/TCFV_3/TCFV_3.module.less | 6 +++ .../HotPicksPanel/Type/TCFV_4/TCFV_4.jsx | 42 ++++++++++++++----- .../views/HotPicksPanel/Type/TCHH/TCHH.jsx | 4 +- .../HotPicksPanel/Type/TCHH/TCHH.module.less | 13 +++--- 15 files changed, 155 insertions(+), 84 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx index 342f904d..654914dc 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx +++ b/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 ( -

Type : {currentType}

{currentPage > 0 && (

이전 diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx index 7843ac4e..ca0106eb 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx +++ b/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" > -

- {curationNm} -

+ {curationNm} ); diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less index 40c5df11..c18dfc60 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less @@ -2,12 +2,10 @@ @import "../../../../style/utils.module.less"; .fullImg { + position: relative; &:focus-within { - > p { - position: relative; - &::after { - .focused(); - } + &::after { + .focused(); } } } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx index cc9bef41..7be0e634 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx +++ b/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 }) {
{curationNm}
- + ); })} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx index e747d758..7b776f1c 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx +++ b/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 }) {
{curationNm}
- + ); })} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx index b86ad88b..0456ea9f 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx +++ b/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 id = productInfos.prdtId; - Spotlight.focus("spotlight" + id); + const productInfos = data[0].productInfos[0].prdtId; + Spotlight.focus("spotlight" + productInfos); } }, [data]); return ( @@ -34,7 +34,7 @@ export default function TCFI_4({ className, data }) { {productInfos && - productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => { + productInfos.slice(0, 4).map(({ imgUrl, prdtNm, prdtId }) => { return ( - - {productInfos && - productInfos.slice(2, 4).map(({ imgUrl, prdtNm, prdtId }) => { - return ( - - {prdtNm} - - ); - })} - ); })} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less index 5ba276cf..043840e2 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less +++ b/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; - right: 120px; - bottom: 180px; + width: 50%; flex-wrap: wrap; + padding: 0 120px 0 256px; + right: 0; + bottom: 190px; > li { margin: 10px; > img { diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx index 8fc8bbd7..6db08757 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx +++ b/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 (
-
+ {curationNm} -
+
    - {showInfos && + + {curationNm} + {/* */} + + {/* {showInfos && showInfos .slice(0, 1) .map( @@ -34,12 +45,11 @@ export default function TCFV({ className, data }) { // @@@ 영상 출력 처리 return ( - {showNm} - {/* */} + ); } - )} + )} */}
); diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less index 2446475e..715bb0e2 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less +++ b/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; diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx index 81bb6ac4..190cd101 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx +++ b/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 id = showInfos.showId; - Spotlight.focus("spotlight" + id); + const showInfos = data[0].showInfos[0].showId; + Spotlight.focus("spotlight" + showInfos); } }, [data]); return ( diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx index ec2f9100..91581d86 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx +++ b/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)} > -
+ {showInfos && showInfos .slice(0, 1) @@ -34,19 +47,22 @@ export default function TCFV_3({ className, data }) { }) => { // @@@ 영상 출력 처리 return ( - + {showNm} {/* */} - + ); } )} -
-
    + + {productInfos && productInfos .slice(0, 4) @@ -57,7 +73,7 @@ export default function TCFV_3({ className, data }) { ); })} -
+ ); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less index c69e5764..50e44984 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less +++ b/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 { diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx index 9dc60b2e..68fcedcd 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx +++ b/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 }) {
{curationNm}
- + ); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx index 10106c9e..5126ac2d 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx +++ b/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} > -

- {curationNm} -

+ {curationNm} ); })} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less index c3acbfa9..d7910a88 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less @@ -4,16 +4,17 @@ .halfWrap { > div { display: flex; + justify-content: space-between !important; > div { + width: 855px; + height: 900px; + position: relative; display: flex; + align-items: center; justify-content: center; - flex: 1; &:focus-within { - > p { - position: relative; - &::after { - .focused(); - } + &::after { + .focused(); } } }