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

[Hot Picks] 타입 추가

Browse Source 
Detail Notes :
1. 모든 페이지 추가
- 포커스 작업 진행중
- 영상 부분 임시 이미지로 노출
This commit is contained in:
jangheon Pyo
2024-02-06 18:27:56 +09:00
parent 79feded12f
commit 364cf7ce23
22 changed files with 632 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less
View File

@@ -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();
}
}
}

79
com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
View File

@@ -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 = (
<TCFI data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFV_2":
typeComponent = (
<TCFV_2 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCHH":
case "TCHH": // Half Image X2
typeComponent = (
<TCHH data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFI_4":
case "TCFI_2": // Full Image + Item(2)
typeComponent = (
<TCFI_2 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFI_2":
case "TCFI_3": // Full Image + Item(3)
typeComponent = (
<TCFI_3 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFI_3":
case "TCFI_4": // Full Image + Item(4)
typeComponent = (
<TCFI_4 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFV":
case "TCFV": // Full Image + VOD
typeComponent = (
<TCFV data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFV_4":
case "TCFV_2": // Full Image + VOD + Item(2)
typeComponent = (
<TCFV_2 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCAD":
case "TCFV_3": // Full Image + VOD + Item(3)
typeComponent = (
<TCFV_3 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCFV_3":
case "TCFV_4": // Full Image + VOD + Item(4)
typeComponent = (
<TCFV_4 data={currentTypeData} className={css.sectionWrap} />
);
break;
case "TCAD": // Theme AD
typeComponent = (
<TCAD data={currentTypeData} className={css.sectionWrap} />
);
break;
default:
typeComponent = (

14
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx Normal file
View File

@@ -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 영상</>;
}

0
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.module.less Normal file
View File

26
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx
View File

@@ -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 (
<div
key={tmpltCd}
className={classNames(className ? className : "")}
>
<SpottableComponent className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
<div key={tmpltCd} className={classNames(className && className)}>
<SpottableComponent
className={css.fullImg}
spotlightId="spotData"
>
<p>
<img src={bgImgPath} alt={curationNm} />
</p>
</SpottableComponent>
</div>
);

13
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less
View File

@@ -0,0 +1,13 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.fullImg {
&:focus-within {
> p {
position: relative;
&::after {
.focused();
}
}
}
}

37
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx Normal file
View File

@@ -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 (
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
</div>
<ul className={css.itemList}>
{productInfos &&
productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</ul>
</div>
);
})}
</>
);
}

15
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less Normal file
View File

@@ -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);
}
}
}

37
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx Normal file
View File

@@ -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 (
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
</div>
<ul className={css.itemList}>
{productInfos &&
productInfos.slice(0, 3).map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</ul>
</div>
);
})}
</>
);
}

15
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less Normal file
View File

@@ -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);
}
}
}

63
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx Normal file
View File

@@ -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 (
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
</div>
<Container className={css.itemList}>
{productInfos &&
productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent
key={prdtId}
spotlightId={"spotlight" + prdtId}
>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</Container>
<Container className={css.itemList}>
{productInfos &&
productInfos.slice(2, 4).map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</Container>
</div>
);
})}
</>
);
}

15
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less Normal file
View File

@@ -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);
}
}
}

49
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx Normal file
View File

@@ -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 (
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
</div>
<ul className={css.itemList}>
{showInfos &&
showInfos
.slice(0, 1)
.map(
({
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent key={showId}>
<img src={thumbnailUrl} alt={showNm} />
{/* <video src={showUrl}></video> */}
</SpottableComponent>
);
}
)}
</ul>
</div>
);
})}
</>
);
}

15
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less Normal file
View File

@@ -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);
}
}
}

88
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
View File

@@ -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 (
<div
key={tmpltCd}
className={classNames(className ? className : "")}
>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
data.map(
({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
return (
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
</div>
<Container className={css.itemList}>
{showInfos &&
showInfos
.slice(0, 1)
.map(
({
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent
key={showId}
spotlightId={"spotlight" + showId}
>
<img
src={thumbnailUrl}
alt={showNm}
className={css.video}
/>
{/* <video src={showUrl}></video> */}
</SpottableComponent>
);
}
)}
{productInfos &&
productInfos
.slice(0, 2)
.map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</Container>
</div>
<ul className={css.itemList}>
{productInfos &&
productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</ul>
</div>
);
})}
);
}
)}
</>
);
}

4
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less
View File

@@ -9,5 +9,9 @@
> img {
.size(@w:242px, @h:242px);
}
> video,
.video {
.size(@w:430px, @h:242px);
}
}
}

67
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx Normal file
View File

@@ -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 (
<div
key={tmpltCd}
className={classNames(className && className, css.flexCont)}
>
<div className={css.fullImg}>
{showInfos &&
showInfos
.slice(0, 1)
.map(
({
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent key={showId}>
<img
src={thumbnailUrl}
alt={showNm}
className={css.video}
/>
{/* <video src={showUrl}></video> */}
</SpottableComponent>
);
}
)}
</div>
<ul className={css.itemList}>
{productInfos &&
productInfos
.slice(0, 4)
.map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</ul>
</div>
);
}
)}
</>
);
}

22
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less Normal file
View File

@@ -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);
}
}
}

66
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx Normal file
View File

@@ -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 (
<div key={tmpltCd} className={classNames(className && className)}>
<div className={css.fullImg}>
<img src={bgImgPath} alt={curationNm} />
</div>
<ul className={css.itemList}>
{showInfos &&
showInfos
.slice(0, 1)
.map(
({
dfltThumbnailImgPath,
showId,
showNm,
showUrl,
thumbnailUrl,
}) => {
// @@@ 영상 출력 처리
return (
<SpottableComponent key={showId}>
<img
src={thumbnailUrl}
alt={showNm}
className={css.video}
/>
{/* <video src={showUrl}></video> */}
</SpottableComponent>
);
}
)}
{productInfos &&
productInfos
.slice(0, 4)
.map(({ imgUrl, prdtNm, prdtId }) => {
return (
<SpottableComponent key={prdtId}>
<img src={imgUrl} alt={prdtNm} />
</SpottableComponent>
);
})}
</ul>
</div>
);
}
)}
</>
);
}

19
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less Normal file
View File

@@ -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);
}
}
}

40
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx
View File

@@ -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 (
<div
key={tmpltCd}
className={classNames(className ? className : "", css.halfWrap)}
className={classNames(className && className, css.halfWrap)}
>
{bgImgPath &&
bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
return (
<SpottableComponent key={idx}>
<img src={bgImgPath} alt={curationNm} />
</SpottableComponent>
);
})}
<Container>
{bgImgPath &&
bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
return (
<SpottableComponent
key={idx}
spotlightId={"spotlight" + idx}
>
<p>
<img src={bgImgPath} alt={curationNm} />
</p>
</SpottableComponent>
);
})}
</Container>
</div>
);
})}

16
com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less
View File

@@ -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();
}
}
}
}
}
}