diff --git a/com.twin.app.shoptime/src/App/App.js b/com.twin.app.shoptime/src/App/App.js index 6b0ccb7f..c59fa3ac 100644 --- a/com.twin.app.shoptime/src/App/App.js +++ b/com.twin.app.shoptime/src/App/App.js @@ -6,7 +6,6 @@ import platform from "@enact/core/platform"; import ThemeDecorator from "@enact/sandstone/ThemeDecorator"; import appinfo from "../../webos-meta/appinfo.json"; -import { getBrandList } from "../actions/brandActions"; import { changeAppStatus } from "../actions/commonActions"; import { getAuthenticationCode } from "../actions/deviceActions"; import { @@ -59,7 +58,6 @@ function AppBase(props) { dispatch(getHomeMenu()); dispatch(getHomeLayout()); dispatch(getHomeMainContents()); - dispatch(getBrandList()); dispatch(getMyRecommandedKeyword()); dispatch(getBestSeller()); dispatch( diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx index 6e228563..cb546196 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx @@ -1,10 +1,4 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from "react"; +import React, { useCallback, useRef, useState } from "react"; import classNames from "classnames"; import compose from "ramda/src/compose"; @@ -25,17 +19,15 @@ const TabItemBase = ({ target, deActivateTab, onClick, - lgCatCd, isSubItem, onFocus, - path, - isArrow = false, + showSubTab = false, + temp, + setTemp, ...rest }) => { const [focused, setFocused] = useState(false); - const [pressed, setPressed] = useState(false); - const itemRef = useRef(); - + const [fixed, setFixed] = useState(false); const clearPressedJob = useRef( new Job((func) => { setTimeout(func, 100); @@ -43,7 +35,6 @@ const TabItemBase = ({ ); const _onClick = useCallback( (ev) => { - setPressed(true); clearPressedJob.current.start(() => { if (onClick) { onClick({ index, target }); @@ -53,26 +44,17 @@ const TabItemBase = ({ [target, index, onClick] ); - useEffect(() => {}, [pressed]); - const _onFocus = useCallback(() => { setFocused(true); + if (onFocus) { onFocus(index); } - }, [index, isArrow]); + }, [index, showSubTab, onFocus]); const _onBlur = useCallback(() => { setFocused(false); - setPressed(false); - }, []); - - const isDivider = useMemo(() => { - if (!title || !path) { - return false; - } - return true; - }, []); + }, [showSubTab]); const onKeyDown = useCallback( (event) => { @@ -83,30 +65,6 @@ const TabItemBase = ({ [deActivateTab] ); - const ImageComponent = useCallback(() => { - return ( - <> - - - - ); - }, [path]); - - const TextComponent = useCallback(() => { - return ( - <> - {expanded && ( - - {title} - - )} - - ); - }, [title]); - const renderIcon = useCallback(() => { if (icons) { const Component = icons; @@ -126,36 +84,35 @@ const TabItemBase = ({ } else { return null; } - }, [focused, expanded, selected]); + }, [focused, expanded, selected, fixed]); delete rest.hasChildren; delete rest.getChildren; return ( -
+
{icons &&
{renderIcon()}
} -
- - - {path ? : } -
+ {expanded && title && ( + + {title} + + )} + {/* */}
); diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less index 457f5f42..0c9ff8e8 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -3,11 +3,6 @@ @ICON_SIZE: 48px; -.spottable-next-left { - display:none; -} - - .tabItem{ font-size: 36px; display: flex; @@ -18,9 +13,6 @@ padding-left: 42px; padding-right: 24px; - // .spottable-next-left { - // background-color: red; - // } &.focused { color: #eee; @@ -38,72 +30,41 @@ .position(@position: absolute, @top: 24px, @right: 18px); background-image: url('../../../assets/icons/ic-lnb-right-arrow.png'); background-size: 36px 36px; - } } - > div{ - margin-left:-30px; - } - + } + } } - &.selected { color: #eee; } - &.subDepth{ - width: 386px; - height: 78px; - padding-left: 42px; - - &.focused { - background: rgba(255, 255, 255, .1); - border-radius: 0px; - border-right: 6px solid #c70850; - margin-left: 0px; - > div { - padding-left: 30px; - } - } - &.path { - padding-left: 0px; - margin-bottom: 70px; - } - .outline { - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 138px, @h:138px); + &.fixed { + color: #eee; + background: linear-gradient(to right, #cb1253, #e15ba1); + border-radius: 42px; + width: 402px; + z-index: 1; + margin-left: 30px; + position:relative; + + &.arrow { + &::after { + content: ""; + .size(@w:36px, @h:36px); + .position(@position: absolute, @top: 24px, @right: 18px); + background-image: url('../../../assets/icons/ic-lnb-right-arrow.png'); + background-size: 36px 36px; + } + } - background-position: center; - background-size: cover; - } - img { - .size(@w: 120px, @h: 120px); - } - - &.ImgFocus { - .outline { - border-radius: 60px; - z-index: 99; - // box-shadow: -3px 0px 30px 0 #c70850; - // border: solid 1px #dadada; - background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png"); +.itemWrap { + display: flex; + &.focused { + margin-left : -30px; } - img { - .size(@w: 138px, @h: 138px); - - } - } - - &.ImgSelect { - img { - .size(@w: 138px, @h: 138px); - } - .outline { - background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png"); - } - } - } + } .icon { position: relative; @@ -135,86 +96,13 @@ width: 245px; } } -.layout { - display: flex; -} + .marqueeWrap { width: 100%; } } -.subWrap{ - .flex(); - - span { - .size(@w: 40px, @h:40px); - background-size: cover; - &.category-icon-1017 { - // LG Electronics - background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png"); - } - - // Garden and Outdoors - &.category-icon-1008 { - background-image: url("../../../assets/icons/ic-category-garden-nor.png"); - } - - // Fashion - &.category-icon-1000 { - background-image: url("../../../assets/icons/ic-category-fashion-nor.png"); - } - - // Beauty - &.category-icon-1003 { - background-image: url("../../../assets/icons/ic-category-beauty-nor.png"); - } - - // Jewelry - &.category-icon-1004 { - background-image: url("../../../assets/icons/ic-category-jewelry-nor.png"); - } - - // Home - &.category-icon-1006 { - background-image: url("../../../assets/icons/ic-category-home-nor.png"); - } - - // Kitchen & Food - &.category-icon-1007 { - background-image: url("../../../assets/icons/ic-category-kitchen-nor.png"); - } - - // Accessories - &.category-icon-1014 { - background-image: url("../../../assets/icons/ic-category-accessories-nor.png"); - } - - // Heaclth & Fitness - &.category-icon-1009 { - background-image: url("../../../assets/icons/ic-category-health-nor.png"); - } - - // Entertainment - &.category-icon-1012 { - background-image: url("../../../assets/icons/ic-category-enter-nor.png"); - } - - // Crafts & Sewing - &.category-icon-1011 { - background-image: url("../../../assets/icons/ic-category-cw-nor.png"); - } - - // Electronics - &.category-icon-1010 { - background-image: url("../../../assets/icons/ic-category-electronics-nor.png"); - } - - // Clearance - &.category-icon-1013 { - background-image: url("../../../assets/icons/ic-category-clearance-nor.png"); - } -} -} + diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx new file mode 100644 index 00000000..1250174f --- /dev/null +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx @@ -0,0 +1,126 @@ +import React, { useCallback, useRef, useState } from "react"; + +import classNames from "classnames"; +import compose from "ramda/src/compose"; + +import { Job } from "@enact/core/util"; +import { Marquee, MarqueeController } from "@enact/sandstone/Marquee"; +import Spottable from "@enact/spotlight/Spottable"; + +import css from "./TabItemSub.module.less"; + +const SpottableComponent = Spottable("div"); +const TabItemBase = ({ + title, + expanded = false, + selected = false, + index = 0, + target, + deActivateTab, + onClick, + lgCatCd, + isSubItem, + onFocus, + onBlur, + path, + subTitle, + ...rest +}) => { + const [focused, setFocused] = useState(false); + const itemRef = useRef(); + + const clearPressedJob = useRef( + new Job((func) => { + setTimeout(func, 100); + }, 100) + ); + const _onClick = useCallback( + (ev) => { + clearPressedJob.current.start(() => { + if (onClick) { + onClick({ index, target }); + } + }); + }, + [target, index, onClick] + ); + + const _onFocus = useCallback(() => { + setFocused(true); + if (onFocus) { + onFocus(index); + } + }, [index]); + + const _onBlur = useCallback(() => { + setFocused(false); + + if (onBlur) { + onBlur(index); + } + }, [index]); + + const onKeyDown = useCallback( + (event) => { + if (event.key === "ArrowRight") { + _onClick(); + } + }, + [deActivateTab] + ); + + const ImageComponent = useCallback(() => { + return ( +
+ + +
+ ); + }, [path]); + + const TextComponent = useCallback(() => { + return ( + <> + {expanded && ( + + {title} + + )} + + ); + }, [title]); + + delete rest.hasChildren; + delete rest.getChildren; + return ( + +
+
+ {!path && } + {path ? : } +
+
+ + ); +}; +const ItemDecorator = compose(MarqueeController({ marqueeOnFocus: true })); +const TabItemSub = ItemDecorator(TabItemBase); + +export default TabItemSub; diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less new file mode 100644 index 00000000..5720225f --- /dev/null +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less @@ -0,0 +1,166 @@ +@import "../../style/utils.module.less"; +@import "../../style/CommonStyle.module.less"; + +@ICON_SIZE: 48px; + +.tabItem{ + font-size: 36px; + display: flex; + color: #606060; + align-items: center; + height: 84px; + position: relative; + padding-left: 42px; + padding-right: 24px; + + + &.focused { + background: rgba(255, 255, 255, .1); + border-radius: 0px; + border-right: 6px solid #c70850; + margin-left: 0px; + color: #eee; + + } + &.path { + padding-left: 0px; + margin-bottom: 70px; + } + + + &.selected { + color: #eee; + } + + +.imageLayout { + &.outline { + .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); + .size(@w: 138px, @h:138px); + background-position: center; + background-size: cover; + + > img { + .size(@w: 120px, @h: 120px); + } + } + &.imageFocus { + .outline { + .focusDropShadow(); + border-radius: 60px; + z-index: 99; + background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png"); + + // box-shadow: -3px 0px 30px 0 #c70850; + // border: solid 1px #dadada; + > img { + .size(@w: 138px, @h: 138px); + } + } + } + // &.ImgSelect { + // img { + // .size(@w: 138px, @h: 138px); + // } + // .outline { + // background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png"); + // } + // } + + } + + +.text { + line-height: 1.2; + padding-left: 11px; + .font(@fontFamily:@baseFontBold, @fontSize:36px); + + &.subItem { + .font (@fontFamily:@baseFontBold, @fontSize:30px); + width: 245px; + } +} + +.subWrap{ +.flex(); + + span { + .size(@w: 40px, @h:40px); + background-size: cover; + &.category-icon-1017 { + // LG Electronics + background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png"); + } + + // Garden and Outdoors + &.category-icon-1008 { + background-image: url("../../../assets/icons/ic-category-garden-nor.png"); + } + + // Fashion + &.category-icon-1000 { + background-image: url("../../../assets/icons/ic-category-fashion-nor.png"); + } + + // Beauty + &.category-icon-1003 { + background-image: url("../../../assets/icons/ic-category-beauty-nor.png"); + } + + // Jewelry + &.category-icon-1004 { + background-image: url("../../../assets/icons/ic-category-jewelry-nor.png"); + } + + // Home + &.category-icon-1006 { + background-image: url("../../../assets/icons/ic-category-home-nor.png"); + } + + // Kitchen & Food + &.category-icon-1007 { + background-image: url("../../../assets/icons/ic-category-kitchen-nor.png"); + } + + // Accessories + &.category-icon-1014 { + background-image: url("../../../assets/icons/ic-category-accessories-nor.png"); + } + + // Heaclth & Fitness + &.category-icon-1009 { + background-image: url("../../../assets/icons/ic-category-health-nor.png"); + } + + // Entertainment + &.category-icon-1012 { + background-image: url("../../../assets/icons/ic-category-enter-nor.png"); + } + + // Crafts & Sewing + &.category-icon-1011 { + background-image: url("../../../assets/icons/ic-category-cw-nor.png"); + } + + // Electronics + &.category-icon-1010 { + background-image: url("../../../assets/icons/ic-category-electronics-nor.png"); + } + + // Clearance + &.category-icon-1013 { + background-image: url("../../../assets/icons/ic-category-clearance-nor.png"); + } +} + +} + +.layout { + display: flex; + } + + .marqueeWrap { + width: 100%; + } + } + diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index 1b5a1aa1..c36bf2c6 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -32,6 +32,7 @@ import OnSaleIcon from "./iconComponents/OnSaleIcon"; import SearchIcon from "./iconComponents/SearchIcon"; import TrendingNowIcon from "./iconComponents/TrendingNowIcon"; import TabItem from "./TabItem"; +import TabItemSub from "./TabItemSub"; import css from "./TabLayout.module.less"; const Container = SpotlightContainerDecorator( @@ -113,7 +114,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const [mainExpanded, setMainExpanded] = useState(false); const [mainSelectedIndex, setMainSelectedIndex] = useState(-1); const [secondDepthReduce, setSecondDepthReduce] = useState(false); - const [focused, setFocused] = useState(false); + const [temp, setTemp] = useState(false); const [tabs, setTabs] = useState([]); const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB const panelSwitching = useRef(null); @@ -167,6 +168,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) { result = data?.homeCategory.map((item) => ({ id: item.lgCatCd, title: item.lgCatNm, + target: [ + { + name: panel_names.CATEGORY_PANEL, + panelInfo: { + lgCatNm: item.lgCatNm, + lgCatCd: item.lgCatCd, + COUNT: item.COUNT, + }, + }, + ], })); break; case "GNB": @@ -179,7 +190,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) { result = data?.shortFeaturedBrands.map((item) => ({ Id: item.patnrId, path: item.patncLogoPath, - target: [{ name: panel_names.FEATURED_BRANDS_PANEL }], + target: [ + { + name: panel_names.FEATURED_BRANDS_PANEL, + panelInfo: item.patnrId, + }, + ], })); break; case "My Page": @@ -309,9 +325,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { switch (type) { case ACTIVATED_MAIN: { if (!cursorVisible) { - // setMainExpanded(false); } - break; } case ACTIVATED_SUB: { @@ -336,16 +350,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) { ); const onFocus = (index) => { - setFocused(true); setMainSelectedIndex(index); + setTemp(false); if (showSubTab) { setSecondDepthReduce((prev) => !prev); } }; - const onBlur = () => { - setFocused(false); - }; + const onBlur = useCallback(() => { + setTemp(true); + }, []); const handleNavigation = useCallback( ({ index, target }) => { @@ -365,6 +379,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { ({ index, target }) => { if (target) { dispatch(resetPanels(target)); + deActivateTab(); panelSwitching.current = true; panelSwitchingJob.start(panelSwitching); @@ -376,7 +391,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { ({ index, target }) => { deActivateTabJob.startAfter(100, deActivateTab); }, - [dispatch, deActivateTab] + [deActivateTab] ); const tabActivated = useMemo(() => { @@ -433,7 +448,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { } }); } - }, [secondDepthReduce, showSubTab, focused]); + }, [secondDepthReduce, showSubTab]); if (!showTab) { return null; @@ -485,13 +500,14 @@ export default function TabLayout({ topPanelName, onTabActivated }) { { return ( - img { @@ -47,13 +48,15 @@ margin: -40px 24px 84px 42px; } + &.expanded { width: 402px; - + > img { width: 234px; height: 54px; } + } &.secondDepthLayout { diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx index e2ded512..93b71a80 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx @@ -2,9 +2,9 @@ import React from "react"; import css from "./Banner.module.less"; -export default function Banner({ selectedBrandInfo, brandTopImgInfo }) { - const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo; +export default function Banner({ brandTopImgInfo, selectedBrandInfo }) { const { topImgAlt, topImgPath } = brandTopImgInfo; + const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo; return (
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index bc69cc93..a6cfa9da 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -1,11 +1,15 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import Spotlight from "@enact/spotlight"; + import { getBrandLayoutInfo, + getBrandList, getBrandLiveChannelInfo, } from "../../actions/brandActions"; +import TBody from "../../components/TBody/TBody"; import TPanel from "../../components/TPanel/TPanel"; import Banner from "./Banner/Banner"; import css from "./FeaturedBrandsPanel.module.less"; @@ -19,12 +23,11 @@ const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => { export default function FeaturedBrandsPanel() { const dispatch = useDispatch(); + const panelInfo = useSelector((state) => state.panels.panels[0].panelInfo); const brandInfo = useSelector((state) => state.brand.brandInfoData.brandInfo); - const brandTopImgInfo = useSelector( (state) => state.brand.brandLayoutInfoData.brandTopImgInfo ); - const brandChanInfo = useSelector( (state) => state.brand.brandLiveChannelInfoData.brandChanInfo ); @@ -32,50 +35,69 @@ export default function FeaturedBrandsPanel() { (state) => state.brand.brandLiveChannelInfoData.brandChannelCnt ); + const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo)); const [selectedBrandInfo, setSelectedBrandInfo] = useState(); - // @@pyh Todo, provided by GNB as props or global state - const [selectedPatnrId, setSelectedPatnrId] = useState("1"); + const handleQuickMenuClick = useCallback( + (patnrId) => { + if (selectedPatnrId === patnrId) { + return; + } - const handleQuickMenu = (patnrId) => { - setSelectedPatnrId(patnrId); - }; + setSelectedPatnrId(patnrId); + }, + [selectedPatnrId] + ); useEffect(() => { - if (brandInfo) { - setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId)); + if (!brandInfo) { + dispatch(getBrandList()); } + }, [brandInfo, dispatch]); - dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId })); - dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId })); + useEffect(() => { + if (brandInfo && selectedPatnrId) { + setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId)); + dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId })); + dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId })); + } + }, [brandInfo, dispatch, selectedPatnrId]); + + useEffect(() => { + // @@pyh Todo, loading 적용 이후 loading으로 조건 추가 + if (selectedPatnrId) { + Spotlight.focus("spotlight" + selectedPatnrId); + } }, [selectedPatnrId]); return ( /* scenario page 98 */ - {brandInfo && brandInfo.length > 1 && ( - - )} - - {selectedBrandInfo && ( - - )} - -
- {brandChanInfo && ( - + {brandInfo && brandInfo.length > 1 && ( + )} -
+ + {brandTopImgInfo && selectedBrandInfo && ( + + )} + +
+ {brandChanInfo && ( + + )} +
+ ); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less index 668b849f..b487e69b 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less @@ -1,4 +1,7 @@ .container { + .tBody { + height: 1080px; + } .sectionContainer { padding-left: 60px; } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx index ea105f81..a1d2e713 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx @@ -1,6 +1,7 @@ -import React from "react"; +import React, { useEffect } from "react"; -import Scroller from "@enact/sandstone/Scroller"; +import { VirtualGridList } from "@enact/sandstone/VirtualList"; +import ri from "@enact/ui/resolution"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import TItemCard from "../../../components/TItemCard/TItemCard"; @@ -8,8 +9,39 @@ import { $L } from "../../../utils/helperMethods"; import LiveVideoCard from "../LiveVideoCard/LiveVideoCard"; import css from "./LiveChannels.module.less"; +// getBrandLiveChannelInfo → brandChanInfo → brandProductInfo +// brandProductInfo = { +// freeShippingFlag = null, // 무료배송 여부 +// offerInfo = "", // 제공 정보 +// prdtId, +// prdtImgUrl, +// prdtNm, +// priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %) +// revwGrd = null, 리뷰 등급 (별점) +// soldoutFlag, +// } + +/* + +*/ + const LIVE_CHANNELS_STRING = "LIVE CHANNELS"; +const LIST_ITEM_CONF = { + ITEM_WIDTH: 660 * 2, + ITEM_HEIGHT: 236 * 2, + SAPCING: 12 * 2, +}; + export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { const { alamDispFlag, @@ -33,30 +65,27 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { vtctpYn, // 영상 세로 여부 } = brandChanInfo; - // getOnSaleInfos → saleInfos → saleProductInfos - // saleProductInfos = { - // imgUrl, - // lgCatCd, - // lgCatNm, - // OfferInfo = null, - // patncNm, - // patnrId, - // prdtNm, - // priceInfo - // } - // 현재 OnSalePanel 실사용 = imgUrl, prdtId, prdtNm, priceInfo + console.log(); - // getBrandLiveChannelInfo → brandChanInfo → brandProductInfo - // brandProductInfo = { - // freeShippingFlag = null, // 무료배송 여부 - // offerInfo = "", // 제공 정보 - // prdtId, - // prdtImgUrl, - // prdtNm, - // priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %) - // revwGrd = null, 리뷰 등급 (별점) - // soldoutFlag, - // } + const renderItem = ({ index, ...rest }) => { + const { prdtImgUrl, prdtId, prdtNm, priceInfo, soldoutFlag } = + brandProductInfo[index]; + return ( + <> + + + ); + }; return ( <> @@ -73,69 +102,31 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { thumbnailSource={thumbnailImgPath} title={showNm} /> - -
    - {brandProductInfo && - brandProductInfo.map( - ({ - prdtId, - prdtImgUrl, - prdtNm, - priceInfo, - soldoutFlag, - }) => { - return ( - - ); - } - )} -
- + +
+ {brandProductInfo && ( + + )} +
)} {brandChannelCnt > 1 && (
{"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"} -
    - {brandProductInfo && - brandProductInfo.map( - ({ - prdtId, - prdtImgUrl, - prdtNm, - priceInfo, - soldoutFlag, - }) => { - return ( - - ); - } - )} -
)}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less index 5a033925..56cc4a02 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less @@ -2,25 +2,25 @@ @import "../../../style/utils.module.less"; .container { + margin-bottom: 58px; + h2 { - margin: 60px 0 24px; + margin: 58px 0 24px; } - /* normal */ > div { position: relative; - display: flex; - width: @globalWidth; + .flex(@justifyCenter: flex-start); + width: 100%; - // product scroll container - > .scroller { - width: 720px; + .tempContainer { + .size(@w: 660px, @h: 564px); + .virtualGridList { + // overflow: unset; - ul { - display: flex; - flex-direction: column; - gap: 12px; - height: 564px; + > div { + // overflow: unset !important; + } } } } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx index ad923f74..e8c4c339 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx @@ -54,13 +54,7 @@ export default memo(function LiveVideoCard({
- { + {$L(LIVE_SHOW_STRING)}

{title}

+ {liveChannelCount && liveChannelCount === 1 && ( + // @@pyh, live 방송이라는 조건으로 변경
- { + {$L(WARNING_STRING)} {$L(WARNING_MESSAGE)}
)} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less index 30cefa5a..4adcd85d 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less @@ -7,7 +7,6 @@ z-index: 10; .size(@w: 1002px, @h: 564px); margin-right: 18px; - border: 4px solid transparent; border-radius: 12px; overflow: hidden; @@ -23,7 +22,7 @@ .size(@w: 100%, @h: 100%); background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK); - // top part of video + // top part (live info) > div:nth-child(1) { .flex(@justifyCenter: flex-start); gap: 12px; @@ -48,7 +47,7 @@ } } - // bottom part of video + // bottom part (warning message) > div:nth-child(2) { .flex(@justifyCenter: flex-start); gap: 12px; @@ -66,7 +65,9 @@ /* focused */ &:focus-within { - border: 4px solid @PRIMARY_COLOR_RED; + &::after { + .focused(@borderRadius: 12px); + } .focusDropShadow(); } } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx index 0884bc77..4e14ce4d 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx @@ -1,64 +1,61 @@ -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect } from "react"; -import Spotlight from '@enact/spotlight'; -import SpotlightContainerDecorator - from '@enact/spotlight/SpotlightContainerDecorator'; -import Spottable from '@enact/spotlight/Spottable'; +import { VirtualGridList } from "@enact/sandstone/VirtualList"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import ri from "@enact/ui/resolution"; -import { $L } from '../../../utils/helperMethods'; -import css from './QuickMenu.module.less'; +import QuickMenuItem from "../QuickMenuItem/QuickMenuItem"; +import css from "./QuickMenu.module.less"; + +const LIST_ITEM_CONF = { + ITEM_WIDTH: 138 * 2, + ITEM_HEIGHT: 138 * 2, +}; const Container = SpotlightContainerDecorator( { leaveFor: { right: "" }, enterTo: "last-focused" }, "nav" ); -const SpottableComponent = Spottable("li"); - export default function QuickMenu({ brandInfo, selectedPatnrId, onQuickMenuClick, ...rest }) { - const handleClick = (patnrId) => { - if (selectedPatnrId === patnrId) { - return; - } - - onQuickMenuClick(patnrId); - }; - - useEffect(() => { - console.log("@@ brandInfo", brandInfo); - // @@pyh Todo, change to logic - // const element = document.getElementById(selectedPatnrId); - - Spotlight.focus("spotlight" + selectedPatnrId); - }, []); + const renderItem = useCallback( + ({ index, ...rest }) => { + return ( + + ); + }, + [brandInfo, selectedPatnrId, onQuickMenuClick] + ); return ( - -
    - {brandInfo && - brandInfo.map(({ logoImgAlt, logoImgPath, newFlag, patnrId }) => { - return ( - handleClick(patnrId)} - spotlightId={"spotlight" + patnrId} - > - {newFlag === "Y" && ( - {$L("NEW")} - )} - - {logoImgAlt} - - ); - })} -
+ + {brandInfo && ( + + )} ); } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less index 08ddf19e..32c4b75e 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less @@ -2,66 +2,15 @@ @import "../../../style/utils.module.less"; .container { - .flex(@justifyCenter:flex start); .size(@w: 100%, @h: 180px); - padding: 30px 60px; + padding: 18px 60px; background-color: #e7e7e7; - ul { - .flex(@justifyCenter: flex-start); - gap: 18px; + .virtualGridList { + overflow: unset; - /* normal */ - li { - position: relative; - - .newBagde { - .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: auto); - z-index: 10; - .size(@w: 60px, @h: 30px); - background-color: #f00; - color: #fff; - border-radius: 6px; - font-family: Arial; - font-weight: 600; - font-size: 18px; - text-align: center; - } - - .outline { - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 138px, @h:138px); - background-position: center; - background-size: cover; - } - - img { - .size(@w: 120px, @h: 120px); - } - - /* focused */ - &:focus { - border-radius: 60px; - .focusDropShadow(); - - .outline { - background-image: url("../../../../assets/images/partners/ic-tab-partners-focus@3x.png"); - } - - img { - .size(@w: 138px, @h: 138px); - } - } - - /* selected */ - &.selected { - img { - .size(@w: 138px, @h: 138px); - } - .outline { - background-image: url("../../../../assets/images/partners/ic-tab-partners-selected@3x.png"); - } - } + > div { + overflow: unset !important; } } } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.jsx new file mode 100644 index 00000000..14c474ca --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.jsx @@ -0,0 +1,45 @@ +import React, { memo, useCallback } from "react"; + +import classNames from "classnames"; + +import Spottable from "@enact/spotlight/Spottable"; + +import { $L } from "../../../utils/helperMethods"; +import css from "./QuickMenuItem.module.less"; + +const SpottableComponent = Spottable("div"); + +export default memo(function QuickMenuItem({ + brandInfo, + index, + onQuickMenuClick, + selectedPatnrId, + ...rest +}) { + const { logoImgAlt, logoImgPath, newFlag, patnrId } = brandInfo[index]; + + const handleClick = useCallback( + (patnrId) => { + onQuickMenuClick && onQuickMenuClick(patnrId); + }, + [selectedPatnrId] + ); + + return ( + handleClick(patnrId)} + {...rest} + spotlightId={"spotlight" + patnrId} + > + {logoImgAlt} + {newFlag === "Y" &&
{$L("NEW")}
} + + + ); +}); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.module.less new file mode 100644 index 00000000..810028cd --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.module.less @@ -0,0 +1,73 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.item { + /* normal */ + position: relative; + .size(@w: 138px, @h: 138px); + .flex(); + + // partner logo + img { + .size(@w: 120px, @h: 120px); + } + + // newBadge + > div { + .position(@position: absolute, @top: 0, @right: 18px); + z-index: 10; + .size(@w: 60px, @h: 30px); + border-radius: 6px; + background-color: #f00; + .font(@fontFamily: @arialFontBold, @fontSize: 18px); + color: @COLOR_WHITE; + text-align: center; + } + + // outline + > span { + .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0); + .size(@w: 138px, @h:138px); + background-position: center; + background-size: cover; + } + + /* focused */ + &:focus-within { + border-radius: 100%; + .focusDropShadow(); + + // partner logo + img { + .size(@w: 138px, @h: 138px); + } + + // newBadge + > div { + right: 0; + } + + // outline + > span { + background-image: url("../../../../assets/images/partners/ic-tab-partners-focus@3x.png"); + } + } + + /* selected */ + &.selected { + // partner logo + img { + .size(@w: 138px, @h: 138px); + } + + // newBadge + > div { + right: 0; + } + + // outline + > span { + background-image: url("../../../../assets/images/partners/ic-tab-partners-selected@3x.png"); + } + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/package.json new file mode 100644 index 00000000..6ba12e64 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/package.json @@ -0,0 +1,6 @@ +{ + "main": "QuickMenuItem.jsx", + "styles": [ + "QuickMenuItem.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index 1cfe8488..f6795653 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx @@ -48,7 +48,7 @@ const HomeOnSale = ({ ...rest }) => {

{$L("ON SALE")}

- +
{homeOnSaleInfos && homeOnSaleInfos.length > 0 && ( { spacing={ri.scale(SALE_ITEM_CONF.SPACING)} /> )} - +
); diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less index 1d512055..d5357920 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less @@ -16,5 +16,85 @@ .grid { height: 300px; + > div { + > div { + > div { + &:nth-child(5n + 1) { + > div { + > div { + background: linear-gradient(to top, #f485c3, #cc4d92); + } + } + } + &:nth-child(5n + 2) { + > div { + > div { + background: linear-gradient(to top, #fdbe43, #e47915); + } + } + } + &:nth-child(5n + 3) { + > div { + > div { + background: linear-gradient(to top, #97ca73, #3e8d18); + } + } + } + &:nth-child(5n + 4) { + > div { + > div { + background: linear-gradient(to top, #84b0e9, #4282d9); + } + } + } + &:nth-child(5n + 5) { + > div { + > div { + background: linear-gradient(to top, #a387ea, #7750dc); + } + } + } + } + } + } + } + + &.onSaleItem { + margin-top: 20px; + height: 300px; + display: flex; + flex-wrap: nowrap; + overflow: hidden; + // > div { + // > div { + // > div { + // > div:nth-child(5n + 1) { + // .onSaleItemListBox { + // background-image: linear-gradient(to top, #f485c3, #cc4d92); + // } + // } + // > div:nth-child(5n + 2) { + // .onSaleItemListBox { + // background-image: linear-gradient(to top, #fdbe43, #e47915); + // } + // } + // > div:nth-child(5n + 3) { + // .onSaleItemListBox { + // background-image: linear-gradient(to top, #97ca73, #3e8d18); + // } + // } + // > div:nth-child(5n + 4) { + // .onSaleItemListBox { + // background-image: linear-gradient(to top, #84b0e9, #4282d9); + // } + // } + // > div:nth-child(5n + 5) { + // .onSaleItemListBox { + // background-image: linear-gradient(to top, #a387ea, #7750dc); + // } + // } + // } + // } + // } } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less index edb26760..e9f109e1 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less @@ -16,6 +16,7 @@ box-sizing: border-box; .focusDropShadow(); } + .onSaleItemListImg { width: 300px; height: 300px; @@ -29,6 +30,7 @@ box-sizing: border-box; padding: 24px; display: inline-block; + .onSaleItemListBoxTitle { width: 282px; height: 30px; @@ -82,29 +84,4 @@ } } } - &:nth-child(5n + 1) { - .onSaleItemListBox { - background-image: linear-gradient(to top, #f485c3, #cc4d92); - } - } - &:nth-child(5n + 2) { - .onSaleItemListBox { - background-image: linear-gradient(to top, #fdbe43, #e47915); - } - } - &:nth-child(5n + 3) { - .onSaleItemListBox { - background-image: linear-gradient(to top, #97ca73, #3e8d18); - } - } - &:nth-child(5n + 4) { - .onSaleItemListBox { - background-image: linear-gradient(to top, #84b0e9, #4282d9); - } - } - &:nth-child(5n + 5) { - .onSaleItemListBox { - background-image: linear-gradient(to top, #a387ea, #7750dc); - } - } } 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(); + } + } + } + } } } diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx index 15f819e2..f9dbcce6 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx @@ -45,8 +45,6 @@ export default function OnSalePanel() { dispatch( getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentCategoryCode }) ); - } else { - dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" })); } }, [currentCategoryCode, dispatch]);