From 364cf7ce2361346324b5526079461b517da779ae Mon Sep 17 00:00:00 2001 From: jangheon Pyo Date: Tue, 6 Feb 2024 18:27:56 +0900 Subject: [PATCH] =?UTF-8?q?[Hot=20Picks]=C2=A0=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=C2=A0=C2=A0=20=C2=A0=20Detail=20Notes=20:?= =?UTF-8?q?=201.=20=EB=AA=A8=EB=93=A0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=E2=80=A8-=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=A7=84=ED=96=89=EC=A4=91=E2=80=A8-=20?= =?UTF-8?q?=EC=98=81=EC=83=81=20=EB=B6=80=EB=B6=84=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A1=9C=20=EB=85=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HotPicksPanel/HotPicks.module.less | 27 ++---- .../src/views/HotPicksPanel/HotPicksPanel.jsx | 79 +++++++++++------ .../views/HotPicksPanel/Type/TCAD/TCAD.jsx | 14 +++ .../HotPicksPanel/Type/TCAD/TCAD.module.less | 0 .../views/HotPicksPanel/Type/TCFI/TCFI.jsx | 26 ++++-- .../HotPicksPanel/Type/TCFI/TCFI.module.less | 13 +++ .../HotPicksPanel/Type/TCFI_2/TCFI_2.jsx | 37 ++++++++ .../Type/TCFI_2/TCFI_2.module.less | 15 ++++ .../HotPicksPanel/Type/TCFI_3/TCFI_3.jsx | 37 ++++++++ .../Type/TCFI_3/TCFI_3.module.less | 15 ++++ .../HotPicksPanel/Type/TCFI_4/TCFI_4.jsx | 63 +++++++++++++ .../Type/TCFI_4/TCFI_4.module.less | 15 ++++ .../views/HotPicksPanel/Type/TCFV/TCFV.jsx | 49 +++++++++++ .../HotPicksPanel/Type/TCFV/TCFV.module.less | 15 ++++ .../HotPicksPanel/Type/TCFV_2/TCFV_2.jsx | 88 ++++++++++++++----- .../Type/TCFV_2/TCFV_2.module.less | 4 + .../HotPicksPanel/Type/TCFV_3/TCFV_3.jsx | 67 ++++++++++++++ .../Type/TCFV_3/TCFV_3.module.less | 22 +++++ .../HotPicksPanel/Type/TCFV_4/TCFV_4.jsx | 66 ++++++++++++++ .../Type/TCFV_4/TCFV_4.module.less | 19 ++++ .../views/HotPicksPanel/Type/TCHH/TCHH.jsx | 40 ++++++--- .../HotPicksPanel/Type/TCHH/TCHH.module.less | 16 +++- 22 files changed, 632 insertions(+), 95 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less index 6280ea9d..795cf1db 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less +++ b/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%; - height: 100%; - box-sizing: border-box; - border: 4px solid @PRIMARY_COLOR_RED; - position: absolute; - left: 0; - top: 0; - content: ""; + .focused(); } } } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx index c4ec087f..342f904d 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx +++ b/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 TCFV_2 from './Type/TCFV_2/TCFV_2'; // Full Image + VOD + Item(2) -import TCHH from './Type/TCHH/TCHH'; // Half Image X2 +import TCAD from './Type/TCAD/TCAD'; +import TCFI from './Type/TCFI/TCFI'; +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 - // 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 + console.log("##themeCurationInfoData", themeCurationInfoData); + let typeComponent; switch (currentType) { - case "TCFI": + case "TCFI": // Full Image typeComponent = ( ); break; - case "TCFV_2": - typeComponent = ( - - ); - break; - case "TCHH": + case "TCHH": // Half Image X2 typeComponent = ( ); break; - case "TCFI_4": + case "TCFI_2": // Full Image + Item(2) + typeComponent = ( + + ); break; - case "TCFI_2": + case "TCFI_3": // Full Image + Item(3) + typeComponent = ( + + ); break; - case "TCFI_3": + case "TCFI_4": // Full Image + Item(4) + typeComponent = ( + + ); break; - case "TCFV": + case "TCFV": // Full Image + VOD + typeComponent = ( + + ); break; - case "TCFV_4": + case "TCFV_2": // Full Image + VOD + Item(2) + typeComponent = ( + + ); break; - case "TCAD": + case "TCFV_3": // Full Image + VOD + Item(3) + typeComponent = ( + + ); break; - case "TCFV_3": + case "TCFV_4": // Full Image + VOD + Item(4) + typeComponent = ( + + ); + break; + case "TCAD": // Theme AD + typeComponent = ( + + ); break; default: typeComponent = ( diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx new file mode 100644 index 00000000..4a289f98 --- /dev/null +++ b/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 영상; +} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.module.less new file mode 100644 index 00000000..e69de29b 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 a439b978..7843ac4e 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 @@ -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 ( -
- - {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 e69de29b..40c5df11 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 @@ -0,0 +1,13 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.fullImg { + &:focus-within { + > p { + position: relative; + &::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 new file mode 100644 index 00000000..cc9bef41 --- /dev/null +++ b/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 ( +
+
+ {curationNm} +
+
    + {productInfos && + productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => { + return ( + + {prdtNm} + + ); + })} +
+
+ ); + })} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less new file mode 100644 index 00000000..ffdd5f1f --- /dev/null +++ b/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); + } + } +} 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 new file mode 100644 index 00000000..e747d758 --- /dev/null +++ b/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 ( +
+
+ {curationNm} +
+
    + {productInfos && + productInfos.slice(0, 3).map(({ imgUrl, prdtNm, prdtId }) => { + return ( + + {prdtNm} + + ); + })} +
+
+ ); + })} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less new file mode 100644 index 00000000..ffdd5f1f --- /dev/null +++ b/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); + } + } +} 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 new file mode 100644 index 00000000..b86ad88b --- /dev/null +++ b/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 ( +
+
+ {curationNm} +
+ + {productInfos && + productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => { + return ( + + {prdtNm} + + ); + })} + + + {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 new file mode 100644 index 00000000..5ba276cf --- /dev/null +++ b/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); + } + } +} 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 new file mode 100644 index 00000000..8fc8bbd7 --- /dev/null +++ b/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 ( +
+
+ {curationNm} +
+
    + {showInfos && + showInfos + .slice(0, 1) + .map( + ({ + dfltThumbnailImgPath, + showId, + showNm, + showUrl, + thumbnailUrl, + }) => { + // @@@ 영상 출력 처리 + 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 new file mode 100644 index 00000000..2446475e --- /dev/null +++ b/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); + } + } +} 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 1c44ee7f..81bb6ac4 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 @@ -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 }) => { - return ( -
-
- {curationNm} + data.map( + ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => { + return ( +
+
+ {curationNm} +
+ + {showInfos && + showInfos + .slice(0, 1) + .map( + ({ + dfltThumbnailImgPath, + showId, + showNm, + showUrl, + thumbnailUrl, + }) => { + // @@@ 영상 출력 처리 + return ( + + {showNm} + {/* */} + + ); + } + )} + + {productInfos && + productInfos + .slice(0, 2) + .map(({ imgUrl, prdtNm, prdtId }) => { + return ( + + {prdtNm} + + ); + })} +
-
    - {productInfos && - productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => { - return ( - - {prdtNm} - - ); - })} -
-
- ); - })} + ); + } + )} ); } diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less index dc21135c..b474cb9d 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less +++ b/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); + } } } 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 new file mode 100644 index 00000000..ec2f9100 --- /dev/null +++ b/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 ( +
+
+ {showInfos && + showInfos + .slice(0, 1) + .map( + ({ + dfltThumbnailImgPath, + showId, + showNm, + showUrl, + thumbnailUrl, + }) => { + // @@@ 영상 출력 처리 + return ( + + {showNm} + {/* */} + + ); + } + )} +
+
    + {productInfos && + productInfos + .slice(0, 4) + .map(({ imgUrl, prdtNm, prdtId }) => { + return ( + + {prdtNm} + + ); + })} +
+
+ ); + } + )} + + ); +} 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 new file mode 100644 index 00000000..c69e5764 --- /dev/null +++ b/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); + } + } +} 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 new file mode 100644 index 00000000..9dc60b2e --- /dev/null +++ b/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 ( +
+
+ {curationNm} +
+
    + {showInfos && + showInfos + .slice(0, 1) + .map( + ({ + dfltThumbnailImgPath, + showId, + showNm, + showUrl, + thumbnailUrl, + }) => { + // @@@ 영상 출력 처리 + return ( + + {showNm} + {/* */} + + ); + } + )} + + {productInfos && + productInfos + .slice(0, 4) + .map(({ imgUrl, prdtNm, prdtId }) => { + return ( + + {prdtNm} + + ); + })} +
+
+ ); + } + )} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less new file mode 100644 index 00000000..a6419632 --- /dev/null +++ b/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); + } + } +} 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 265e9ea6..10106c9e 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 @@ -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 (
- {bgImgPath && - bgImgPath.slice(0, 2).map((bgImgPath, idx) => { - return ( - - {curationNm} - - ); - })} + + {bgImgPath && + bgImgPath.slice(0, 2).map((bgImgPath, idx) => { + return ( + +

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