[search] 디자인 작업
- 중간부분에 처리할수없는 부분이있어 주석처리해두었습니다. - 주석명 (검색내용이 존재하고, 인풋창에 포커스가 가서 노출 시작) - 나머지 디자인 맞춰서 작업해두었습니다. - 데이터 다른데서 가져와서 넣어두었습니다.
This commit is contained in:
junghoon86.park
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
BIN
com.twin.app.shoptime/assets/images/btn/search_btn_up_arrow.png
Normal file
BIN
com.twin.app.shoptime/assets/images/btn/search_btn_up_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
@@ -48,6 +48,7 @@ export const SpotlightIds = {
|
||||
SEARCH_SHOW: "search_show",
|
||||
SEARCH_ITEM: "search_item",
|
||||
SEARCH_BESTSELLER: "search_bestseller",
|
||||
SEARCH_TAB_CONTAINER: "searchtabContainer",
|
||||
|
||||
// pin Code Popup
|
||||
PINCODE_CONTAINER: "pincodeContainer",
|
||||
|
||||
@@ -69,7 +69,6 @@ import NoSearchResults from './NoSearchResults/NoSearchResults';
|
||||
import RecommendedKeywords from './RecommendedKeywords/RecommendedKeywords';
|
||||
import css from './SearchPanel.new.module.less';
|
||||
import SearchResultsNew from './SearchResults.new';
|
||||
import SearchResults from './SearchResults/SearchResults';
|
||||
|
||||
const ContainerBasic = SpotlightContainerDecorator(
|
||||
{ enterTo: "last-focused" },
|
||||
@@ -92,6 +91,7 @@ const SectionContainer = SpotlightContainerDecorator(
|
||||
const SpottableMicButton = Spottable("div");
|
||||
const SpottableKeyword = Spottable("div");
|
||||
const SpottableProduct = Spottable("div");
|
||||
const SpottableLi = Spottable("li");
|
||||
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
@@ -165,6 +165,20 @@ export default function SearchPanel({
|
||||
() => ["Puppy food", "Dog toy", "Fitness"],
|
||||
[]
|
||||
);
|
||||
|
||||
const recentResultSearches = useMemo(
|
||||
() => [
|
||||
"Puppy food",
|
||||
"Dog toy",
|
||||
"Mather's Day",
|
||||
"Gift",
|
||||
"Easter Day",
|
||||
"Royal Canin puppy food",
|
||||
"Shark",
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const topSearches = useMemo(
|
||||
() => [
|
||||
"Mather's Day",
|
||||
@@ -580,6 +594,7 @@ export default function SearchPanel({
|
||||
topMargin={36}
|
||||
scrollable={true}
|
||||
>
|
||||
{/* 검색 내용있을때 검색 부분 */}
|
||||
{/* 검색 입력 영역 */}
|
||||
<InputContainer
|
||||
className={classNames(
|
||||
@@ -638,26 +653,36 @@ export default function SearchPanel({
|
||||
</SpottableMicButton> */}
|
||||
</div>
|
||||
</InputContainer>
|
||||
{/* 결과갑 부분 작업중 */}
|
||||
<SearchResultsNew />
|
||||
{/* //결과갑 부분 작업중 */}
|
||||
{/* 검색 결과 표시 영역
|
||||
|
||||
{/* 검색내용이 존재하고, 인풋창에 포커스가 가서 노출 시작 */}
|
||||
{/* 피그마 기준 첫번째 줄 마지막 이미지 */}
|
||||
{/* <div className={css.overLay}></div>
|
||||
<div className={css.overLayRecent}>
|
||||
{recentResultSearches.map((keyword, index) => (
|
||||
<SpottableKeyword
|
||||
key={`recentResult-${index}`}
|
||||
className={css.keywordButton}
|
||||
onClick={() => handleKeywordClick(keyword)}
|
||||
spotlightId={`recent-Resultkeyword-${index}`}
|
||||
>
|
||||
{keyword}
|
||||
</SpottableKeyword>
|
||||
))}
|
||||
</div> */}
|
||||
{/* 검색내용이 존재하고, 인풋창에 포커스가 가서 노출 끝! */}
|
||||
|
||||
{/* 결과갑 부분 작업중 시작! */}
|
||||
|
||||
{/* 결과갑 부분 작업중 끝! */}
|
||||
{/* 검색 결과 표시 영역 */}
|
||||
{searchPerformed && searchQuery !== null ? (
|
||||
Object.keys(searchDatas).length > 0 ? (
|
||||
<SearchResults
|
||||
panelInfo={panelInfoFall}
|
||||
searchQueryRef={searchQueryRef}
|
||||
isRecommendedSearchRef={isRecommendedSearchRef}
|
||||
/>
|
||||
) : (
|
||||
<NoSearchResults />
|
||||
)
|
||||
<SearchResultsNew />
|
||||
) : (
|
||||
<ContainerBasic className={css.contentContainer}>
|
||||
{/* 노출 조건 변경 필요. 포커스 블러만으로는 안됌.(가상 키보드 노출시가 맞을듯)
|
||||
{/* 노출 조건 변경 필요. 포커스 블러만으로는 안됌.(가상 키보드 노출시가 맞을듯) */}
|
||||
{inputFocus === false ? (
|
||||
<>
|
||||
{/* 최근 검색어 섹션
|
||||
{/* 최근 검색어 섹션 */}
|
||||
<SectionContainer
|
||||
className={css.section}
|
||||
data-wheel-point={true}
|
||||
@@ -683,7 +708,7 @@ export default function SearchPanel({
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
{/* 인기 검색어 섹션
|
||||
{/* 인기 검색어 섹션 */}
|
||||
<SectionContainer
|
||||
className={css.section}
|
||||
data-wheel-point={true}
|
||||
@@ -707,7 +732,7 @@ export default function SearchPanel({
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
{/* 인기 브랜드 섹션
|
||||
{/* 인기 브랜드 섹션 */}
|
||||
<SectionContainer
|
||||
className={css.section}
|
||||
data-wheel-point={true}
|
||||
@@ -731,7 +756,7 @@ export default function SearchPanel({
|
||||
</div>
|
||||
</SectionContainer>
|
||||
|
||||
{/* Hot Picks for You 섹션
|
||||
{/* Hot Picks for You 섹션 */}
|
||||
<SectionContainer
|
||||
className={css.hotpicksSection}
|
||||
data-wheel-point={true}
|
||||
@@ -776,7 +801,6 @@ export default function SearchPanel({
|
||||
)}
|
||||
</ContainerBasic>
|
||||
)}
|
||||
*/}
|
||||
</TVerticalPagenator>
|
||||
)}
|
||||
</ContainerBasic>
|
||||
|
||||
@@ -26,6 +26,8 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
&.inputFocus {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@@ -614,7 +616,7 @@
|
||||
-ms-overflow-style: none;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -635,7 +637,71 @@
|
||||
// Spotlight 포커스 스타일
|
||||
[data-spotlight-id] {
|
||||
&:focus {
|
||||
outline: 2px solid @PRIMARY_COLOR_RED;
|
||||
// outline: 2px solid @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overLay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.overLayRecent {
|
||||
position: absolute;
|
||||
left: 403px;
|
||||
top: 172px;
|
||||
width: 995px;
|
||||
height: 488px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
* {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.keywordButton {
|
||||
height: 64px;
|
||||
background: white;
|
||||
border-radius: 100px;
|
||||
border: 5px solid #dadada;
|
||||
padding: 0 20px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
width: fit-content;
|
||||
> * {
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
font-family: "LG Smart UI";
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
border-color: @PRIMARY_COLOR_RED;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 5px solid @PRIMARY_COLOR_RED;
|
||||
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,134 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
import Spottable from '@enact/spotlight/Spottable';
|
||||
|
||||
import downBtnImg from '../../../assets/images/btn/search_btn_down_arrow.png';
|
||||
import upBtnImg from '../../../assets/images/btn/search_btn_up_arrow.png';
|
||||
import hotPicksImage from '../../../assets/images/searchpanel/img-hotpicks.png';
|
||||
import hotPicksBrandImage
|
||||
from '../../../assets/images/searchpanel/img-search-hotpicks.png';
|
||||
import CustomImage from '../../components/CustomImage/CustomImage';
|
||||
import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
|
||||
import TDropDown from '../../components/TDropDown/TDropDown';
|
||||
import TVirtualGridList
|
||||
from '../../components/TVirtualGridList/TVirtualGridList';
|
||||
import { $L } from '../../utils/helperMethods';
|
||||
import { SpotlightIds } from '../../utils/SpotlightIds';
|
||||
import css from './SearchResults.new.module.less';
|
||||
import ItemCard from './SearchResultsNew/ItemCard';
|
||||
import ShowCard from './SearchResultsNew/ShowCard';
|
||||
|
||||
const SearchResultsNew = () => {
|
||||
const Container = SpotlightContainerDecorator("div");
|
||||
const SectionContainer = SpotlightContainerDecorator("div");
|
||||
const getButtonTabList = () => {
|
||||
return [$L("ITEM (#)"), $L("SHOWS (#)")];
|
||||
};
|
||||
|
||||
let buttonTabList = null;
|
||||
|
||||
//탭
|
||||
const [tab, setTab] = useState(0);
|
||||
//드롭다운
|
||||
const [dropDownTab, setDropDownTab] = useState(0);
|
||||
|
||||
const [styleChange, setStyleChange] = useState(false);
|
||||
const [filterMethods, setFilterMethods] = useState([]);
|
||||
const cbChangePageRef = useRef(null);
|
||||
if (!buttonTabList) {
|
||||
buttonTabList = getButtonTabList();
|
||||
}
|
||||
|
||||
const handleStyle = useCallback(() => {
|
||||
setStyleChange(true);
|
||||
}, []);
|
||||
|
||||
const handleStyleOut = useCallback(() => {
|
||||
setStyleChange(false);
|
||||
}, []);
|
||||
|
||||
//탭 클릭
|
||||
const handleButtonTabClick = useCallback(
|
||||
({ index }) => {
|
||||
if (index === tab) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTab(index);
|
||||
if (cbChangePageRef.current) {
|
||||
cbChangePageRef.current(0, false, false);
|
||||
}
|
||||
},
|
||||
[tab]
|
||||
);
|
||||
|
||||
//필터선택
|
||||
const handleSelectFilter = useCallback(
|
||||
({ selected }) => {
|
||||
if (selected === dropDownTab) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDropDownTab(selected);
|
||||
},
|
||||
[dropDownTab]
|
||||
);
|
||||
|
||||
const SpottableLi = Spottable("li");
|
||||
const SpottableDiv = Spottable("div");
|
||||
|
||||
const upBtnClick = useCallback(() => {
|
||||
console.log("##upbtn 누름");
|
||||
}, []);
|
||||
const downBtnClick = useCallback(() => {
|
||||
console.log("##downbtn 누름");
|
||||
}, []);
|
||||
|
||||
const hotPicks = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 1,
|
||||
image: hotPicksImage,
|
||||
brandLogo: hotPicksBrandImage,
|
||||
brandName: "Product Name",
|
||||
// brandLogo: hotPicksBrandImage,
|
||||
brandName: "#Air, #home",
|
||||
title: "New Shark Vacuum! Your pet Hair Solution!",
|
||||
isForYou: false,
|
||||
showBrandLogo: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: hotPicksImage,
|
||||
brandLogo: hotPicksBrandImage,
|
||||
brandName: "Product Name",
|
||||
// brandLogo: hotPicksBrandImage,
|
||||
brandName: "#Air, #home",
|
||||
title: "New Shark Vacuum! Your pet Hair Solution!",
|
||||
isForYou: false,
|
||||
showBrandLogo: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: hotPicksImage,
|
||||
brandLogo: hotPicksBrandImage,
|
||||
brandName: "Product Name",
|
||||
// brandLogo: hotPicksBrandImage,
|
||||
brandName: "#Air, #home",
|
||||
title: "New Shark Vacuum! Your pet Hair Solution!",
|
||||
isForYou: false,
|
||||
showBrandLogo: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: hotPicksImage,
|
||||
brandLogo: hotPicksBrandImage,
|
||||
brandName: "Product Name",
|
||||
// brandLogo: hotPicksBrandImage,
|
||||
brandName: "#Air, #home",
|
||||
title: "New Shark Vacuum! Your pet Hair Solution!",
|
||||
isForYou: true,
|
||||
showBrandLogo: false,
|
||||
},
|
||||
],
|
||||
[]
|
||||
@@ -72,9 +147,9 @@ const SearchResultsNew = () => {
|
||||
} = hotPicks[index];
|
||||
return (
|
||||
<SpottableDiv
|
||||
key={`product-${index}`}
|
||||
key={`searchProduct-${index}`}
|
||||
className={css.productCard}
|
||||
spotlightId={`product-${index}`}
|
||||
spotlightId={`searchProduct-${index}`}
|
||||
{...rest}
|
||||
>
|
||||
<div className={css.productImageWrapper}>
|
||||
@@ -97,16 +172,16 @@ const SearchResultsNew = () => {
|
||||
);
|
||||
}, []);
|
||||
return (
|
||||
<Container className={css.searchBox}>
|
||||
<SectionContainer className={css.topBox}>
|
||||
<div className={css.searchBox}>
|
||||
<div className={css.topBox}>
|
||||
<span className={css.topBoxTitle}>How about these?</span>
|
||||
<ul className={css.topBoxList}>
|
||||
<SpottableLi className={css.topBoxListItem}>Puppy food</SpottableLi>
|
||||
<SpottableLi className={css.topBoxListItem}>Dog toy</SpottableLi>
|
||||
<SpottableLi className={css.topBoxListItem}>Fitness</SpottableLi>
|
||||
</ul>
|
||||
</SectionContainer>
|
||||
<SectionContainer
|
||||
</div>
|
||||
<div
|
||||
className={css.hotpicksSection}
|
||||
data-wheel-point={true}
|
||||
spotlightId={"hot-picks-section"}
|
||||
@@ -127,8 +202,43 @@ const SearchResultsNew = () => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</SectionContainer>
|
||||
</Container>
|
||||
{/* item, show 부분 작성해야함. */}
|
||||
</div>
|
||||
<div className={css.itemBox} cbChangePageRef={cbChangePageRef}>
|
||||
<div className={css.tabContainer}>
|
||||
<TButtonTab
|
||||
contents={buttonTabList}
|
||||
onItemClick={handleButtonTabClick}
|
||||
selectedIndex={tab}
|
||||
listType={LIST_TYPE.medium}
|
||||
spotlightId={SpotlightIds.SEARCH_TAB_CONTAINER}
|
||||
/>
|
||||
<TDropDown
|
||||
className={classNames(
|
||||
css.dropdown,
|
||||
styleChange === true ? css.categoryDropdown : null
|
||||
)}
|
||||
onSelect={handleSelectFilter}
|
||||
onOpen={handleStyle}
|
||||
onClose={handleStyleOut}
|
||||
selectedIndex={dropDownTab}
|
||||
width="small"
|
||||
>
|
||||
{filterMethods}
|
||||
</TDropDown>
|
||||
</div>
|
||||
{tab === 0 && <ItemCard />}
|
||||
{tab === 1 && <ShowCard />}
|
||||
</div>
|
||||
<div className={css.buttonContainer}>
|
||||
<SpottableDiv onClick={downBtnClick} className={css.downBtn}>
|
||||
<CustomImage className={css.btnImg} src={downBtnImg} />
|
||||
</SpottableDiv>
|
||||
<SpottableDiv onClick={upBtnClick} className={css.upBtn}>
|
||||
<CustomImage className={css.btnImg} src={upBtnImg} />
|
||||
</SpottableDiv>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -200,4 +200,73 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemBox {
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
padding-left: 60px;
|
||||
overflow: unset;
|
||||
.title {
|
||||
padding: 38px 0 33px 0;
|
||||
}
|
||||
|
||||
.tabContainer {
|
||||
width: -webkit-fit-content;
|
||||
height: auto;
|
||||
position: relative;
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
&.categoryDropdown {
|
||||
> div {
|
||||
> div {
|
||||
border-radius: 6px 6px 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30px 0;
|
||||
.downBtn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #4f172c;
|
||||
margin-right: 10px;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 4px solid #4f172c;
|
||||
.btnImg {
|
||||
width: 42px;
|
||||
}
|
||||
&:focus {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
.upBtn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #4f172c;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 4px solid #4f172c;
|
||||
.btnImg {
|
||||
width: 42px;
|
||||
}
|
||||
&:focus {
|
||||
border: 4px solid @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,504 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
|
||||
import { pushPanel } from '../../../actions/panelActions';
|
||||
import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
|
||||
import { panel_names } from '../../../utils/Config';
|
||||
import { SpotlightIds } from '../../../utils/SpotlightIds';
|
||||
import css from './ItemCard.module.less';
|
||||
|
||||
const ItemCard = ({ onClick }) => {
|
||||
const dispatch = useDispatch();
|
||||
const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
|
||||
|
||||
// const itemListDatas = useSelector(
|
||||
// (state) => state.main.subCategoryData?.categoryItemInfos
|
||||
// );
|
||||
|
||||
// const itemListDatasItem = useSelector(
|
||||
// (state) => state.main.subCategoryData?.categoryItemInfos?.subCatItemList
|
||||
// );
|
||||
|
||||
const [itemList, setItemList] = useState([]);
|
||||
useEffect(() => {
|
||||
setItemList([
|
||||
{
|
||||
patnrId: "19",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/us_square_shoptime.png",
|
||||
prdtId: "B0DGW9P21M",
|
||||
prdtNm: 'Pinkfong Offical Hogi Plush Toy, 12" Stuffed Animal Toys',
|
||||
rankOrd: 1,
|
||||
priceInfo: "$ 39.99|$ 35.99|N|$ 4.00|10%||",
|
||||
imgUrl:
|
||||
"https://m.media-amazon.com/images/I/51NbpZWASfL._AC_US300_.jpg",
|
||||
revwGrd: "4.8",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "Y",
|
||||
offerInfo: "",
|
||||
brndNm: null,
|
||||
patncNm: "Pinkfong",
|
||||
lgCatNm: "Baby & Kids",
|
||||
forYouFlag: "Y",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A670390",
|
||||
prdtNm: "MUK LUKS Men's 12 Days of Christmas Socks",
|
||||
rankOrd: 2,
|
||||
priceInfo: "$ 32.00|$ 22.98|N|$ 9.02|28%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/90/a670390.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "4.5",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Muk Luks",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "Y",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A670393",
|
||||
prdtNm: "MUK LUKS Kid's 12 Day's of Christmas Socks",
|
||||
rankOrd: 3,
|
||||
priceInfo: "$ 32.00|$ 22.98|N|$ 9.02|28%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/93/a670393.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "4.5",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Muk Luks",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "Y",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A670389",
|
||||
prdtNm: "MUK LUKS Women's 12 Days of Christmas Socks",
|
||||
rankOrd: 4,
|
||||
priceInfo: "$ 32.00|$ 22.98|N|$ 9.02|28%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/89/a670389.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "4.5",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Muk Luks",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A637480",
|
||||
prdtNm: "Women with Control Tummy Control Ruffle One-Piece Swimsuit",
|
||||
rankOrd: 5,
|
||||
priceInfo: "$ 76.00|$ 41.99|N|$ 34.01|45%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/80/a637480.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "3.7",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Women with Control",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: "Fashion",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
prdtId: "23694260",
|
||||
prdtNm:
|
||||
"Connie Craig Carroll Jewelry Juliette Bicolor Quartz Doublet Earrings",
|
||||
rankOrd: 6,
|
||||
priceInfo: "$ 99.95|$ 79.98|N|$ 19.97|20%||",
|
||||
imgUrl:
|
||||
"https://dyn-images.hsni.com/is/image/HomeShoppingNetwork/917248?$pd300$",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Connie Craig Carroll Jewelry",
|
||||
patncNm: "HSN",
|
||||
lgCatNm: "Jewelry",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A702390",
|
||||
prdtNm: "AnyBody Regular Cozy Knit French Terry Top & Pants Set",
|
||||
rankOrd: 7,
|
||||
priceInfo: "$ 64.00|$ 64.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/90/a702390.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "3.9",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Anybody",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: "Beauty",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "H494173",
|
||||
prdtNm: "Home Reflections S/3 Lit Metal Stackable Skeleton Pumpkn",
|
||||
rankOrd: 8,
|
||||
priceInfo: "$ 87.00|$ 69.98|N|$ 17.02|20%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/h/73/h494173.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "5.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Home Reflections",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: "Home",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A707607",
|
||||
prdtNm: "Dooney & Bourke Coated Cotton Gretta Zip Around Wristlet",
|
||||
rankOrd: 9,
|
||||
priceInfo: "$ 149.00|$ 149.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/07/a707607.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Dooney & Bourke",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A705429",
|
||||
prdtNm: "Dooney & Bourke Coated Cotton NFL Belt Bag",
|
||||
rankOrd: 10,
|
||||
priceInfo: "$ 178.00|$ 178.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/29/a705429.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "5.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Dooney & Bourke",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
prdtId: "23648262",
|
||||
prdtNm: "Benefit Cosmetics Rollin with Benetint Lip and Cheek Gift Set",
|
||||
rankOrd: 11,
|
||||
priceInfo: "$ 36.00|$ 36.00|N||||",
|
||||
imgUrl:
|
||||
"https://dyn-images.hsni.com/is/image/HomeShoppingNetwork/911583?$pd300$",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "Y",
|
||||
offerInfo: "",
|
||||
brndNm: "Benefit Cosmetics",
|
||||
patncNm: "HSN",
|
||||
lgCatNm: "Beauty",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A707623",
|
||||
prdtNm: "Dooney & Bourke Suede Dixon Crossbody",
|
||||
rankOrd: 12,
|
||||
priceInfo: "$ 498.00|$ 466.98|N|$ 31.02|6%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/23/a707623.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Dooney & Bourke",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A707628",
|
||||
prdtNm: "Dooney & Bourke Coated Cotton Sutherland Daphne Crossbody",
|
||||
rankOrd: 13,
|
||||
priceInfo: "$ 192.00|$ 174.98|N|$ 17.02|9%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/28/a707628.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Dooney & Bourke",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "A707586",
|
||||
prdtNm: "Dooney & Bourke Nylon Large Lexington Crossbody",
|
||||
rankOrd: 14,
|
||||
priceInfo: "$ 150.00|$ 150.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/a/86/a707586.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Dooney & Bourke",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "K314569",
|
||||
prdtNm: "Temp-tations 2-qt Squoval Baker with Dome Lid and Tongs",
|
||||
rankOrd: 15,
|
||||
priceInfo: "$ 29.00|$ 29.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/k/69/k314569.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Temp-tations",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "K310615",
|
||||
prdtNm: "Temp-tations Special Edition 3-Piece Salt & Pepper Set",
|
||||
rankOrd: 16,
|
||||
priceInfo: "$ 23.00|$ 19.98|N|$ 3.02|13%||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/k/15/k310615.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "4.1",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Temp-tations",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "K314555",
|
||||
prdtNm: "Temp-tations Special Edition 2.5-qt Teapot",
|
||||
rankOrd: 17,
|
||||
priceInfo: "$ 35.00|$ 35.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/k/55/k314555.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Temp-tations",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
prdtId: "H495464",
|
||||
prdtNm: "Temp-tations Holiday Hurricane Centerpiece with Greens",
|
||||
rankOrd: 18,
|
||||
priceInfo: "$ 40.00|$ 40.00|N||||",
|
||||
imgUrl:
|
||||
"http://qvc.scene7.com/is/image/QVC/h/64/h495464.001?wid=300&hei=300&fmt=jpg&qlt=85,1&op_sharpen=1",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "N",
|
||||
offerInfo: "",
|
||||
brndNm: "Temp-tations",
|
||||
patncNm: "QVC",
|
||||
lgCatNm: null,
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
{
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
prdtId: "23648209",
|
||||
prdtNm: "Benefit Cosmetics Mighty Fine Waterproof Brow Pen",
|
||||
rankOrd: 19,
|
||||
priceInfo: "$ 28.00|$ 16.50|N|$ 11.50|41%||",
|
||||
imgUrl:
|
||||
"https://dyn-images.hsni.com/is/image/HomeShoppingNetwork/911573_D0K?$pd300$",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "Y",
|
||||
offerInfo: "",
|
||||
brndNm: "Benefit Cosmetics",
|
||||
patncNm: "HSN",
|
||||
lgCatNm: "Beauty",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: true,
|
||||
},
|
||||
{
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
prdtId: "23648269",
|
||||
prdtNm: "Benefit Cosmetics Glam Cube Makeup Advent Calendar Gift Set",
|
||||
rankOrd: 20,
|
||||
priceInfo: "$ 149.00|$ 149.00|N||||",
|
||||
imgUrl:
|
||||
"https://dyn-images.hsni.com/is/image/HomeShoppingNetwork/911587?$pd300$",
|
||||
revwGrd: "0.0",
|
||||
todaySpclFlag: "N",
|
||||
freeShippingFlag: "Y",
|
||||
offerInfo: "",
|
||||
brndNm: "Benefit Cosmetics",
|
||||
patncNm: "HSN",
|
||||
lgCatNm: "Beauty",
|
||||
forYouFlag: "N",
|
||||
euEnrgLblInfos: [],
|
||||
foryou: false,
|
||||
},
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const _handleItemClick = useCallback(
|
||||
(patnrId, prdtId) => (ev) => {
|
||||
onClick && onClick(ev);
|
||||
dispatch(
|
||||
pushPanel({
|
||||
name: panel_names.DETAIL_PANEL,
|
||||
panelInfo: {
|
||||
patnrId: patnrId,
|
||||
prdtId: prdtId,
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={css.container} spotlightId={SpotlightIds.SEARCH_ITEM}>
|
||||
{itemList.map((item, index) => {
|
||||
const { imgUrl, offerInfo, patnrId, prdtId, prdtNm, priceInfo } =
|
||||
item;
|
||||
return (
|
||||
<TItemCardNew
|
||||
key={prdtId}
|
||||
imageAlt={prdtId}
|
||||
imageSource={imgUrl}
|
||||
priceInfo={priceInfo}
|
||||
productName={prdtNm}
|
||||
productId={prdtId}
|
||||
onClick={_handleItemClick(patnrId, prdtId)}
|
||||
offerInfo={offerInfo}
|
||||
spotlightId={"categoryItemContents" + index}
|
||||
label={index * 1 + 1 + " of " + itemList.lengt + 1}
|
||||
lastLabel=" go to detail, button"
|
||||
data-wheel-point={index >= 5}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ItemCard;
|
||||
@@ -0,0 +1,15 @@
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
@import "../../../style/utils.module.less";
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 34px;
|
||||
> div {
|
||||
margin: 0 15px 15px 0;
|
||||
&:nth-child(5n + 5) {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from 'react-redux';
|
||||
|
||||
import SpotlightContainerDecorator
|
||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||
|
||||
import { startVideoPlayer } from '../../../actions/playActions';
|
||||
import TItemCardNew, {
|
||||
IMAGETYPES,
|
||||
TYPES,
|
||||
} from '../../../components/TItemCard/TItemCard.new';
|
||||
import { SpotlightIds } from '../../../utils/SpotlightIds';
|
||||
import css from './ShowCard.module.less';
|
||||
|
||||
const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
|
||||
const ShowCard = ({ onClick }) => {
|
||||
const stateChk = useSelector((state) => state);
|
||||
|
||||
// const showListDatas = useSelector(
|
||||
// (state) => state.main.subCategoryData?.categoryShowInfos
|
||||
// ); //카테고리에서 가져옴. 서치들어가면 바꿔야함.
|
||||
// const showListDatasItem = useSelector(
|
||||
// (state) => state.main.subCategoryData?.categoryShowInfos?.subCatShowList
|
||||
// ); //카테고리에서 가져옴. 서치들어가면 바꿔야함.
|
||||
|
||||
const [showItem, setShowItem] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setShowItem([
|
||||
{
|
||||
showId: "68d3b31f426a0673ddabd764",
|
||||
showNm: "Today's Top Tech(R) - featuring Vesla - 9/29",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25092917_2CH/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/68d3b31f426a0673ddabd764/video_content_still_16-9/749149bec/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68d6aa87da8bd0b09918ae4b",
|
||||
showNm: "Electronic Connection - 9/26",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25092616_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/668eaacf8d10b619cf4de8d7/video_content_still_16-9/viuvgcLvZ/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "31a69d5da91f40b4bacd017e0bf344f7",
|
||||
showNm: "OTTO Live mit Google Pixel",
|
||||
patnrId: "14",
|
||||
patncLogoPath:
|
||||
"http://eic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/de_otto_logo_230912.png",
|
||||
showUrl:
|
||||
"https://d2j79ura63kovz.cloudfront.net/ivs/v1/875985125909/c3QZ6D6nWVlk/2023/12/12/17/59/t8yUNOyRWx2h/media/hls/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://d2j79ura63kovz.cloudfront.net/shows/31a69d5da91f40b4bacd017e0bf344f7/images/afterShowImage-277016461.jpg",
|
||||
dfltThumbnailImgPath: null,
|
||||
vtctpYn: "Y",
|
||||
},
|
||||
{
|
||||
showId: "68d19ce3bcaa1f8e73937ddf",
|
||||
showNm:
|
||||
"Today's Top Tech(R) - featuring Vesla - All Sale Prices - 9/23",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://vdqvcus.akamaized.net/6380097542112.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/6682fb9eb03da97f0d6672f4/video_content_still_16-9/5tEOV5jLX/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68d00528426a0673dd708310",
|
||||
showNm: "Electronic Connection - 9/24",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25092423_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/668eaacf8d10b619cf4de8d7/video_content_still_16-9/viuvgcLvZ/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "c473260bf063438cb608669f4de9206e",
|
||||
showNm: "OTTO Live mit Sony",
|
||||
patnrId: "14",
|
||||
patncLogoPath:
|
||||
"http://eic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/de_otto_logo_230912.png",
|
||||
showUrl:
|
||||
"https://d2j79ura63kovz.cloudfront.net/ivs/v1/875985125909/d65c4sfzGMAg/2023/9/26/17/0/Yhk7ocTSB5WY/media/hls/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://d2j79ura63kovz.cloudfront.net/shows/c473260bf063438cb608669f4de9206e/images/afterShowImage-513285432.jpg",
|
||||
dfltThumbnailImgPath: null,
|
||||
vtctpYn: "Y",
|
||||
},
|
||||
{
|
||||
showId: "68cfbea3f7acfa885b05ffc5",
|
||||
showNm: "Today's Top Tech(R) - 9/26",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25092621_2CH/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/6682fb9eb03da97f0d6672f4/video_content_still_16-9/5tEOV5jLX/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68d0050eed167ca742adcb67",
|
||||
showNm: "Electronic Connection - 9/21",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25092122_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/68d0050eed167ca742adcb67/video_content_still_16-9/32e5e9464/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68c83dc8da8bd0b0994d7b27",
|
||||
showNm: "Gift Boss - Now We’re Talkin’ Tech",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://vdqvcus.akamaized.net/6380100634112.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/68c83dc8da8bd0b0994d7b27/video_content_still_16-9/0f4c98e56/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68be9b22ac4a010933be49af",
|
||||
showNm: "Electronic Connection - 9/13",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25091323_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/68be9b22ac4a010933be49af/video_content_still_16-9/3293a8a48/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68c6841bda8bd0b0993cb61b",
|
||||
showNm: "HP Computer Workshop - 9/19",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25091915_2CH/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/667b273f158894e37ccc1d30/video_content_still_16-9/k2I1FiMYO/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68be9b1d426a0673ddb1efff",
|
||||
showNm: "Saturday Shopping with HSN - 9/13",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25091308_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/677efdaeae5d1ccb47a58cbd/video_content_still_16-9/1CqIP6ZZt/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68c28fa071e3f651e38d4a95",
|
||||
showNm: "Today's Top Tech(R) - 9/16",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25091620_2CH/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/6682fb9eb03da97f0d6672f4/video_content_still_16-9/5tEOV5jLX/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68b56096cc879a56578fd56c",
|
||||
showNm: "Saturday Shopping with HSN - 9/6",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25090608_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/677efdaeae5d1ccb47a58cbd/video_content_still_16-9/1CqIP6ZZt/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68c0793fda8bd0b099011f26",
|
||||
showNm: "Today's Top Tech(R) - Featuring 4Patriots - 9/12",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25091220_2CH/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/6682fb9eb03da97f0d6672f4/video_content_still_16-9/5tEOV5jLX/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68b01aa0426a0673dd2df648",
|
||||
showNm: "Electronics Labor Day Sale - 9/2",
|
||||
patnrId: "2",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_hsn.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25090214_HSN/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/68b01aa0426a0673dd2df648/video_content_still_16-9/29c5c10f6/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/a7b8117e-957a-40ad-8cad-f91592c34c28.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "68b98d5c275123d9ebb1bc1d",
|
||||
showNm: "HP Computer Workshop - 9/5",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://qrg-us-events.akamaized.net/25090514_2CH/master.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/667b273f158894e37ccc1d30/video_content_still_16-9/k2I1FiMYO/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "6887cf583d74866dd7dd267a",
|
||||
showNm: "Buzzworthy Buys - Back-to-School Tech",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://vdqvcus.akamaized.net/6376806623112.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/6887cf583d74866dd7dd267a/video_content_still_16-9/ylXYdE7XT/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
{
|
||||
showId: "684b35956f3bfdde147006fe",
|
||||
showNm: "Buzzworthy Buys - Summer Travel Must-Haves",
|
||||
patnrId: "1",
|
||||
patncLogoPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/small_logo_qvc.png",
|
||||
showUrl: "https://vdqvcus.akamaized.net/6375763269112.m3u8",
|
||||
hstNm: "",
|
||||
thumbnailUrl:
|
||||
"https://w2te7br9-qvc-us.asset.cdn.remoco.tv/image/resource/684b35956f3bfdde147006fe/video_content_still_16-9/zy4BDtpZC/320x180.jpeg",
|
||||
dfltThumbnailImgPath:
|
||||
"http://qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=LGSHOPPING&func_code=IMAGE&file_path=/lgshopping/image/44e6527a-6e07-4d0e-a45b-b1308540e93d.jpg",
|
||||
vtctpYn: "N",
|
||||
},
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const _onClick = useCallback(
|
||||
(patnrId, showId, lgCatCd, showUrl) => (ev) => {
|
||||
onClick && onClick(ev);
|
||||
dispatch(
|
||||
startVideoPlayer({
|
||||
showId,
|
||||
patnrId,
|
||||
shptmBanrTpNm: "VOD",
|
||||
lgCatCd,
|
||||
modal: false,
|
||||
})
|
||||
);
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
return (
|
||||
<Container className={css.container} spotlightId={SpotlightIds.SEARCH_SHOW}>
|
||||
{showItem.map((item, index) => {
|
||||
const {
|
||||
showId,
|
||||
thumbnailUrl,
|
||||
showNm,
|
||||
vtctpYn,
|
||||
showUrl,
|
||||
patnrId,
|
||||
hstNm,
|
||||
patncLogoPath,
|
||||
} = item;
|
||||
return (
|
||||
<TItemCardNew
|
||||
type={TYPES.videoShow}
|
||||
key={showId}
|
||||
imageAlt={showId}
|
||||
imageSource={thumbnailUrl}
|
||||
productName={showNm}
|
||||
logo={patncLogoPath}
|
||||
imgType={
|
||||
vtctpYn !== "Y"
|
||||
? IMAGETYPES.imgHorizontal
|
||||
: IMAGETYPES.imgVertical
|
||||
}
|
||||
// catNm={showListDatas.catNm} 추가필요
|
||||
onClick={_onClick(
|
||||
patnrId,
|
||||
showId,
|
||||
// showListDatas.lgCatCd, 추가 필요
|
||||
showUrl
|
||||
)}
|
||||
productId={showId}
|
||||
spotlightId={"categoryShowContents" + index}
|
||||
data-wheel-point="true"
|
||||
hstNm={hstNm}
|
||||
logoDisplay="true"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowCard;
|
||||
@@ -0,0 +1,12 @@
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
@import "../../../style/utils.module.less";
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
> div {
|
||||
margin: 0 25px 25px 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user