From 8a4e54c83427bda7f834bec7df4ec863b7127237 Mon Sep 17 00:00:00 2001 From: jangheon Pyo Date: Mon, 5 Feb 2024 20:55:18 +0900 Subject: [PATCH] =?UTF-8?q?[Hot=20Picks]=C2=A0=ED=83=80=EC=9E=85=203?= =?UTF-8?q?=EA=B0=9C=20=EC=B6=94=EA=B0=80=20=C2=A0=C2=A0=20=C2=A0=20Detail?= =?UTF-8?q?=20Notes=20:=201.=2010=EA=B0=9C=20=ED=83=80=EC=9E=85=EC=A4=91?= =?UTF-8?q?=203=EA=B0=9C=20=EC=B6=94=EA=B0=80=E2=80=A8-=20TCFI=20:=20Full?= =?UTF-8?q?=20Image=E2=80=A8-=20TCFV=5F2=20:=20Full=20Image=20+=20VOD=20+?= =?UTF-8?q?=20Item(2)=E2=80=A8-=20TCHH=20:=20Half=20Image=20X2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/hotPicks/ic-scrolldown-foc@3x.png | Bin 0 -> 4223 bytes .../images/hotPicks/ic-scrolldown-nor@3x.png | Bin 0 -> 4262 bytes .../images/hotPicks/ic-scrollup-foc@3x.png | Bin 0 -> 4262 bytes .../images/hotPicks/ic-scrollup-nor@3x.png | Bin 0 -> 4367 bytes .../views/HotPicksPanel/HotPicks.module.less | 101 +++++++++++++++ .../src/views/HotPicksPanel/HotPicksPanel.jsx | 121 +++++++++++++++++- .../views/HotPicksPanel/Type/TCFI/TCFI.jsx | 30 +++++ .../HotPicksPanel/Type/TCFI/TCFI.module.less | 0 .../HotPicksPanel/Type/TCFV_2/TCFV_2.jsx | 40 ++++++ .../Type/TCFV_2/TCFV_2.module.less | 13 ++ .../views/HotPicksPanel/Type/TCHH/TCHH.jsx | 35 +++++ .../HotPicksPanel/Type/TCHH/TCHH.module.less | 9 ++ 12 files changed, 346 insertions(+), 3 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-foc@3x.png create mode 100644 com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-nor@3x.png create mode 100644 com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-foc@3x.png create mode 100644 com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-nor@3x.png create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx create mode 100644 com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less diff --git a/com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-foc@3x.png b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-foc@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..8597cbdc6396ee2515593eec1ae40b79edfdc156 GIT binary patch literal 4223 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 R1^#$|Ae=ppR6Cu$`Y+aP>KFh3 literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-foc@3x.png b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-foc@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..296356522ef461b20f6d07834576764acbf5894a GIT binary patch literal 4262 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 div { + height: 100%; + } +} +h2 { + position: absolute; + left: 0; + top: 0; + font-size: 40px; + color: #000; + z-index: 100; +} + +.sectionWrap { + height: 100%; + position: relative; + + > div { + height: 100%; + .flex(); + > img { + width: auto; + max-width: 100%; + 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 { + position: absolute; + display: flex; + > li { + 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: ""; + } + } + } + } +} + +.arrow { + width: 100%; + text-align: center; + position: absolute; + z-index: 2; + > button { + width: 120px; + height: 55px; + background-size: 120px 120px; + background-repeat: no-repeat; + font-size: 0; + line-height: 0; + display: inline-block; + cursor: pointer; + } + &.arrowPrev { + top: 0; + > button { + background-image: url(../../../assets/images/hotPicks/ic-scrollup-nor@3x.png); + &:focus { + background-image: url(../../../assets/images/hotPicks/ic-scrollup-foc@3x.png); + } + } + } + &.arrowNext { + bottom: 0; + > button { + background-image: url(../../../assets/images/hotPicks/ic-scrolldown-nor@3x.png); + background-position: 0 -65px; + &:focus { + background-image: url(../../../assets/images/hotPicks/ic-scrolldown-foc@3x.png); + } + } + } +} diff --git a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx index 1711f75d..c4ec087f 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx @@ -1,7 +1,122 @@ -import React from "react"; +import React, { + useCallback, + useEffect, + useState, +} from 'react'; -import TPanel from "../../components/TPanel/TPanel"; +import classNames from 'classnames'; +import { + useDispatch, + useSelector, +} from 'react-redux'; + +import Spottable from '@enact/spotlight/Spottable'; + +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 + +const SpottableComponent = Spottable("button"); export default function HotPicksPanel() { - return Hot Picks; + const dispatch = useDispatch(); + const themeCurationInfoData = useSelector( + (state) => state.home.themeCurationInfoData.themeInfos + ); + + const themeCurationType = themeCurationInfoData + ? themeCurationInfoData.map((item) => item.tmpltCd) + : []; + + const [currentPage, setCurrentPage] = useState(0); + 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 + ); + }, [currentPage]); + + const handleNext = useCallback(() => { + setCurrentPage((prevIndex) => + prevIndex === themeCurationType.length - 1 ? 0 : prevIndex + 1 + ); + }, [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 + let typeComponent; + switch (currentType) { + case "TCFI": + typeComponent = ( + + ); + break; + case "TCFV_2": + typeComponent = ( + + ); + break; + case "TCHH": + typeComponent = ( + + ); + break; + case "TCFI_4": + break; + case "TCFI_2": + break; + case "TCFI_3": + break; + case "TCFV": + break; + case "TCFV_4": + break; + case "TCAD": + break; + case "TCFV_3": + break; + default: + typeComponent = ( + + ); + } + + useEffect(() => { + dispatch(getThemeCurationInfo()); + }, [dispatch]); + + return ( + + +

Type : {currentType}

+ {currentPage > 0 && ( +

+ 이전 +

+ )} + {typeComponent} + {currentPage < themeCurationType.length - 1 && ( +

+ 다음 +

+ )} + + + ); } 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 new file mode 100644 index 00000000..a439b978 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import classNames from 'classnames'; + +import Spottable from '@enact/spotlight/Spottable'; + +import css from './TCFI.module.less'; + +const SpottableComponent = Spottable("div"); + +export default function TCFI({ className, data }) { + console.log("##data", data); + return ( + <> + {data && + data.map(({ bgImgPath, curationNm, tmpltCd }) => { + return ( +
+ + {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 new file mode 100644 index 00000000..e69de29b 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 new file mode 100644 index 00000000..1c44ee7f --- /dev/null +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import classNames from 'classnames'; + +import Spottable from '@enact/spotlight/Spottable'; + +import css from './TCFV_2.module.less'; + +const SpottableComponent = Spottable("li"); + +export default function TCFV_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/TCFV_2/TCFV_2.module.less b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less new file mode 100644 index 00000000..dc21135c --- /dev/null +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less @@ -0,0 +1,13 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.itemList { + left: 150px; + bottom: 210px; + > li { + margin-right: 20px; + > img { + .size(@w:242px, @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 new file mode 100644 index 00000000..265e9ea6 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import classNames from 'classnames'; + +import Spottable from '@enact/spotlight/Spottable'; + +import css from './TCHH.module.less'; + +const SpottableComponent = Spottable("div"); + +export default function TCHH({ className, data }) { + console.log("##data", data); + return ( + <> + {data && + data.map(({ bgImgPath, curationNm, tmpltCd }) => { + return ( +
+ {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 new file mode 100644 index 00000000..8072f2c0 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less @@ -0,0 +1,9 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.halfWrap { + display: flex; + > div { + flex: 1; + } +}