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 00000000..8597cbdc Binary files /dev/null and b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-foc@3x.png differ diff --git a/com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-nor@3x.png b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-nor@3x.png new file mode 100644 index 00000000..d07db6a3 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrolldown-nor@3x.png differ 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 00000000..29635652 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-foc@3x.png differ diff --git a/com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-nor@3x.png b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-nor@3x.png new file mode 100644 index 00000000..8af64639 Binary files /dev/null and b/com.twin.app.shoptime/assets/images/hotPicks/ic-scrollup-nor@3x.png differ 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 e69de29b..81ae22b6 100644 --- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less +++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less @@ -0,0 +1,101 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.hotPicks { + height: 100%; + position: relative; + > 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; + } +}