From 55df85e912e7517ba9a1c400a6d78dd8532fd3f9 Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Thu, 8 Feb 2024 13:33:56 +0900 Subject: [PATCH] =?UTF-8?q?[FeaturedBrandsPanel]=20UpComing=20UI=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Detail Notes : 1. UpComing, UpComingList, UpComingCard, UI 구현 --- .../FeaturedBrandsPanel.jsx | 10 +- .../FeaturedBrandsPanel.module.less | 12 ++- .../FeaturedBrandsPanel/UpComing/UpComing.jsx | 17 ++++ .../UpComing/UpComing.module.less | 8 ++ .../UpComingCard/UpComingCard.jsx | 91 +++++++++++++++++++ .../UpComingCard/UpComingCard.module.less | 85 +++++++++++++++++ .../UpComingList/UpComingCard/package.json | 6 ++ .../UpComing/UpComingList/UpComingList.jsx | 55 +++++++++++ .../UpComingList/UpComingList.module.less | 14 +++ .../UpComing/UpComingList/package.json | 6 ++ .../FeaturedBrandsPanel/UpComing/package.json | 6 ++ 11 files changed, 306 insertions(+), 4 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/package.json create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.module.less create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/package.json create mode 100644 com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/package.json diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx index a6cfa9da..44653429 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx @@ -15,6 +15,7 @@ import Banner from "./Banner/Banner"; import css from "./FeaturedBrandsPanel.module.less"; import LiveChannels from "./LiveChannels/LiveChannels"; import QuickMenu from "./QuickMenu/QuickMenu"; +import UpComing from "./UpComing/UpComing"; const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => { return brandInfo.find((brand) => brand?.patnrId === selectedPatnrId); @@ -34,6 +35,9 @@ export default function FeaturedBrandsPanel() { const brandChannelCnt = useSelector( (state) => state.brand.brandLiveChannelInfoData.brandChannelCnt ); + const brandLiveChannelUpcoming = useSelector( + (state) => state.brand.brandLiveChannelInfoData.brandLiveChannelUpcoming + ); const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo)); const [selectedBrandInfo, setSelectedBrandInfo] = useState(); @@ -73,7 +77,7 @@ export default function FeaturedBrandsPanel() { return ( /* scenario page 98 */ - + {brandInfo && brandInfo.length > 1 && ( )} + + {brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && ( + + )} 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 b487e69b..5dd9959f 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less @@ -1,8 +1,14 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + .container { + background-color: @BG_COLOR_01; + .tBody { height: 1080px; - } - .sectionContainer { - padding-left: 60px; + + .sectionContainer { + padding-left: 60px; + } } } diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.jsx new file mode 100644 index 00000000..ff06b2e2 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +import SectionTitle from "../../../components/SectionTitle/SectionTitle"; +import { $L } from "../../../utils/helperMethods"; +import css from "./UpComing.module.less"; +import UpComingList from "./UpComingList/UpComingList"; + +const UPCOMING_STRING = "UPCOMING"; + +export default function UpComing({ brandLiveChannelUpcoming }) { + return ( +
+ + +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less new file mode 100644 index 00000000..41d35ece --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComing.module.less @@ -0,0 +1,8 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + h2 { + margin-bottom: 24px; + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.jsx new file mode 100644 index 00000000..4ddf4e96 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.jsx @@ -0,0 +1,91 @@ +import React, { memo, useCallback, useState } from "react"; + +import classNames from "classnames"; + +import Spottable from "@enact/spotlight/Spottable"; + +import IcUpComingsNormal from "../../../../../../assets/icon/badge/ic-upcomings-nor@3x.png"; +import IcUpComingsSelected from "../../../../../../assets/icon/badge/ic-upcomings-sel@3x.png"; +import { $L } from "../../../../../utils/helperMethods"; +import css from "./UpComingCard.module.less"; + +const STRING_CONF = { + REMINDER_SETTED: $L("Reminder Setted"), + REMOVE_REMINDER: $L("Remove Reminder"), + SET_REMINDER: $L("Set Reminder"), + WITH_HOST: $L("With Host"), +}; + +const SpottableComponent = Spottable("div"); + +export default memo(function UpComingCard({ + hostName, + onUpComingCardBlur, + onUpComingCardClick, + onUpComingCardFocus, + showName, + startTime, + ...rest +}) { + const [isFocused, setIsFocused] = useState(false); + const [isSelected, setIsSelected] = useState(false); + + const handleBlur = useCallback(() => { + setIsFocused(false); + onUpComingCardBlur && onUpComingCardBlur(); + }, [onUpComingCardBlur]); + + const handleClick = useCallback(() => { + if (isSelected) { + setIsSelected(false); + // @@pyh, Todo toast popup and action + console.log( + "@@\nReminder Notification is turned off.\nSelect Yes to turn on reminders." + ); + } else { + setIsSelected(true); + } + + onUpComingCardClick && onUpComingCardClick(); + }, [isSelected, onUpComingCardClick]); + + const handleFocus = useCallback(() => { + setIsFocused(true); + onUpComingCardFocus && onUpComingCardFocus(); + }, [onUpComingCardFocus]); + + return ( + + {!isFocused && ( +
+ + {isSelected && {STRING_CONF.REMINDER_SETTED}} +
+ )} + + +

{showName}

+

{STRING_CONF.WITH_HOST + " " + hostName}

+ + {isFocused && ( + + )} + + ); +}); diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less new file mode 100644 index 00000000..2b183f3a --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.module.less @@ -0,0 +1,85 @@ +@import "../../../../../style/CommonStyle.module.less"; +@import "../../../../../style/utils.module.less"; + +.item { + /* normal */ + position: relative; + .size(@w: 480px, @h: 344px); + padding: 30px; + border: solid 1px @COLOR_GRAY02; + border-radius: 12px; + background-color: @COLOR_WHITE; + + > div:nth-child(1) { + .flex(@justifyCenter: flex-start); + margin-bottom: 30px; + + img { + .size(@w: 72px, @h: 72px); + margin-right: 18px; + } + + span { + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + color: @COLOR_WHITE; + } + } + + time { + display: inline-block; + min-height: 42px; + margin-bottom: 20px; + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + color: @PRIMARY_COLOR_RED; + } + + h3 { + margin-bottom: 15px; + .font(@fontFamily: @baseFontBold, @fontSize: 30px); + color: @COLOR_GRAY06; + .elip(@clamp:2); + word-break: break-all; + overflow: hidden; + } + + p { + margin-bottom: 18px; + .font(@fontFamily: @baseFont, @fontSize: 24px); + color: @COLOR_GRAY04; + .elip(@clamp:1); + word-break: break-all; + overflow: hidden; + } + + button { + .position(@position: absolute, @right: 30px, @bottom: 30px, @left: 30px); + .flex(); + .size(@w: 420px, @h: 84px); + border-radius: 10px; + background-color: @PRIMARY_COLOR_RED; + .font(@fontFamily: @baseFontBold, @fontSize: 30px); + color: @COLOR_WHITE; + } + + /* normal focused */ + &:focus-within { + &::after { + .focused(@boxShadow:50px, @borderRadius:12px); + } + } +} + +/* selected */ +.selected { + background-color: rgba(0, 0, 0, 0.5); + + time { + color: @SELECTED_COLOR_RED; + } + + p { + color: @COLOR_GRAY05; + } + + /* selected focused */ +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/package.json new file mode 100644 index 00000000..28383134 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/package.json @@ -0,0 +1,6 @@ +{ + "main": "UpComingCard.jsx", + "styles": [ + "UpComingCard.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx new file mode 100644 index 00000000..25c67fbe --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.jsx @@ -0,0 +1,55 @@ +import React, { useCallback } from "react"; + +import { VirtualGridList } from "@enact/sandstone/VirtualList"; + +import { scaleH, scaleW } from "../../../../utils/helperMethods"; +import UpComingCard from "./UpComingCard/UpComingCard"; +import css from "./UpComingList.module.less"; + +const LIST_ITEM_CONF = { + ITEM_WIDTH: 480, + ITEM_HEIGHT: 344, + SAPCING: 18, +}; + +export default function UpComingList({ brandLiveChannelUpcoming }) { + const renderItem = useCallback( + ({ index, ...rest }) => { + const { + hstNm: hostName, + showNm: showName, + strtDt: startTime, + } = brandLiveChannelUpcoming[index]; + return ( + + ); + }, + [brandLiveChannelUpcoming] + ); + + return ( +
+ {brandLiveChannelUpcoming && ( + + )} +
+ ); +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.module.less new file mode 100644 index 00000000..0d5e64fc --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingList.module.less @@ -0,0 +1,14 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.container { + .size(@w: 100%, @h: 344px); + + .virtualGridList { + overflow: unset; + + > div { + overflow: unset !important; + } + } +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/package.json new file mode 100644 index 00000000..fbfd35cb --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/package.json @@ -0,0 +1,6 @@ +{ + "main": "UpComingList.jsx", + "styles": [ + "UpComingList.module.less" + ] +} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/package.json new file mode 100644 index 00000000..d52cecf1 --- /dev/null +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/package.json @@ -0,0 +1,6 @@ +{ + "main": "UpComming.jsx", + "styles": [ + "UpComming.module.less" + ] +}