optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Reminders]

Browse Source 
- 방송 종료시 comingSoon,남은 시간  비노출 처리
- live 방송시 live 태그,progressBar 노출 작업 (thumbnailUrl 교체필요)
This commit is contained in:
jiwon93.son
2024-06-11 18:18:58 +09:00
parent dc6739557d
commit 9de5f6cfce
3 changed files with 101 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
View File

@@ -261,7 +261,7 @@ export default function Reminders({ title, cbScrollTo }) {
showId={listItem.showId}
showNm={listItem.showNm}
strtDt={listItem.strtDt}
thumbnailUrl={listItem.thumbnailUrl}
thumbnailUrl={listItem.dfltThumbnailImgPath} // TODO(jw) : thumbnailUrl 로 교체
activeDelete={activeDelete}
selected={selectedItems[listItem.showId]}
onToggle={handleItemToggle(listItem.showId)}

80
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.jsx
View File

@@ -32,6 +32,8 @@ export default memo(function RemindersCard({
onBlur,
index,
length,
endDt,
thumbnailUrl,
}) {
const [focus, setFocus] = useState(false);
@@ -52,9 +54,15 @@ export default memo(function RemindersCard({
const dDay = strtDt.split(" ")[0];
const dDayTime = strtDt.split(" ")[1];
const endDay = endDt.split(" ")[0];
const endTime = endDt.split(" ")[1];
const [lessDay, setlessDay] = useState("");
const [lessTime, setlessTime] = useState("");
const [dayOver, setDayOver] = useState(false);
const [isEndTime, setIsEndTime] = useState(false);
const [liveTime, setLiveTime] = useState(false);
const [progressPercent, setProgressPercent] = useState();
const hostText = hstNm !== null && hstNm !== "" ? hstNm : "";
const ariaLabel =
HelperMethods.convertToTimeFormat(strtDt, true) +
@@ -74,6 +82,13 @@ export default memo(function RemindersCard({
const dDayDate = new Date(`${dDay}T${dDayTime}`);
const differenceInTime = dDayDate.getTime() - today.getTime();
const days = Math.floor(differenceInTime / (1000 * 60 * 60 * 24));
const endDayDate = new Date(`${endDay}T${endTime}`);
const diffEndTime = endDayDate.getTime() - today.getTime();
const elapsed = today.getTime() - dDayDate.getTime();
const duration = endDayDate.getTime() - dDayDate.getTime();
const percent = (elapsed / duration) * 100;
setProgressPercent(percent);
// 시간
const hours = Math.floor(
@@ -98,6 +113,14 @@ export default memo(function RemindersCard({
setDayOver(true);
}
if (diffEndTime <= 0) {
setIsEndTime(true);
}
if (dDayDate <= today && today <= endDayDate) {
setLiveTime(true);
}
setlessDay(days);
setlessTime(`${hours}:${minutes}:${seconds}`);
};
@@ -108,7 +131,13 @@ export default memo(function RemindersCard({
}, [focus]);
return (
<div className={classNames(css.container, patncNm && css[partnerName])}>
<div
className={classNames(
css.container,
patncNm && css[partnerName],
liveTime && css.liveTimeContainer
)}
>
<RemindersItem
className={css.itemContainer}
onFocus={() => {
@@ -119,23 +148,42 @@ export default memo(function RemindersCard({
spotlightDisabled={activeDelete}
aria-label={ariaLabel}
>
<p className={css.strtDt}>
{HelperMethods.convertToTimeFormat(strtDt, true)}
</p>
<h2 className={css.showNm}>{showNm}</h2>
{!liveTime ? (
<>
<p className={css.strtDt}>
{HelperMethods.convertToTimeFormat(strtDt, true)}
</p>
<h2 className={css.showNm}>{showNm}</h2>
{hstNm !== null && hstNm !== "" && (
<span className={css.hstNm}>With Host {hstNm}</span>
{hstNm !== null && hstNm !== "" && (
<span className={css.hstNm}>With Host {hstNm}</span>
)}
<CustomImage
src={patncLogoPath}
delay={0}
alt={showId}
className={css.patncLogo}
/>
</>
) : (
<div className={css.live}>
<CustomImage
src={thumbnailUrl}
delay={0}
alt={showId}
className={css.thumbnail}
/>
<div className={css.liveBox}>LIVE</div>
<div className={css.progressBarContainer}>
<div
className={css.progressBar}
style={{ width: `${progressPercent}%` }}
/>
</div>
</div>
)}
<CustomImage
src={patncLogoPath}
delay={0}
alt={showId}
className={css.patncLogo}
/>
{dayOver === false && focus && activeDelete === false && (
{!liveTime && !isEndTime && focus && activeDelete === false && (
<div className={css.timeOvelay}>
<div>
<p>{"Comming Soon"}</p>

36
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.module.less
View File

@@ -7,6 +7,7 @@
border: 1px solid #0077c8;
background-color: #eef6fb;
position: relative;
box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
&.QVC {
background-color: #fef6f5;
@@ -29,6 +30,10 @@
background-color: #eef6fb;
border: 1px solid #0077c8;
}
&.liveTimeContainer {
padding: 0;
border: none;
}
.itemContainer {
.strtDt {
@@ -64,6 +69,37 @@
top: 13px;
right: 13px;
}
.live {
.size(@w: 315px, @h: 175px);
.thumbnail {
.size(@w: 315px, @h: 175px);
width: 100%;
height: 100%;
}
.liveBox {
background-color: @PRIMARY_COLOR_RED;
color: @COLOR_WHITE;
width: 53px;
height: 22px;
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
text-align: center;
.flex();
}
.progressBarContainer {
position: absolute;
width: 100%;
height: 3px;
background-color: @COLOR_WHITE;
bottom: 0;
.progressBar {
height: 3px;
background-color: @PRIMARY_COLOR_RED;
}
}
}
&:focus {
&::after {