From c415887e26633b81a0f2c8e01fd2c7f12b9a3734 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Thu, 2 Oct 2025 17:30:50 +0900 Subject: [PATCH] =?UTF-8?q?[search]=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=20-=20=EC=A4=91=EA=B0=84=EB=B6=80?= =?UTF-8?q?=EB=B6=84=EC=97=90=20=EC=B2=98=EB=A6=AC=ED=95=A0=EC=88=98?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=EB=B6=80=EB=B6=84=EC=9D=B4=EC=9E=88?= =?UTF-8?q?=EC=96=B4=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC=ED=95=B4?= =?UTF-8?q?=EB=91=90=EC=97=88=EC=8A=B5=EB=8B=88=EB=8B=A4.=20=20-=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=EB=AA=85=20(=EA=B2=80=EC=83=89=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=EC=9D=B4=20=EC=A1=B4=EC=9E=AC=ED=95=98=EA=B3=A0,=20?= =?UTF-8?q?=EC=9D=B8=ED=92=8B=EC=B0=BD=EC=97=90=20=ED=8F=AC=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=EA=B0=80=20=EA=B0=80=EC=84=9C=20=EB=85=B8=EC=B6=9C=20?= =?UTF-8?q?=EC=8B=9C=EC=9E=91)=20=20-=20=EB=82=98=EB=A8=B8=EC=A7=80=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=A7=9E=EC=B6=B0=EC=84=9C=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=95=B4=EB=91=90=EC=97=88=EC=8A=B5=EB=8B=88?= =?UTF-8?q?=EB=8B=A4.=20-=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=8B=A4?= =?UTF-8?q?=EB=A5=B8=EB=8D=B0=EC=84=9C=20=EA=B0=80=EC=A0=B8=EC=99=80?= =?UTF-8?q?=EC=84=9C=20=EB=84=A3=EC=96=B4=EB=91=90=EC=97=88=EC=8A=B5?= =?UTF-8?q?=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/btn/search_btn_down_arrow.png | Bin 0 -> 846 bytes .../assets/images/btn/search_btn_up_arrow.png | Bin 0 -> 989 bytes .../src/utils/SpotlightIds.js | 1 + .../src/views/SearchPanel/SearchPanel.new.jsx | 64 ++- .../SearchPanel/SearchPanel.new.module.less | 70 ++- .../views/SearchPanel/SearchResults.new.jsx | 146 ++++- .../SearchPanel/SearchResults.new.module.less | 69 +++ .../SearchPanel/SearchResultsNew/ItemCard.jsx | 504 ++++++++++++++++++ .../SearchResultsNew/ItemCard.module.less | 15 + .../SearchPanel/SearchResultsNew/ShowCard.jsx | 369 +++++++++++++ .../SearchResultsNew/ShowCard.module.less | 12 + 11 files changed, 1210 insertions(+), 40 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/btn/search_btn_down_arrow.png create mode 100644 com.twin.app.shoptime/assets/images/btn/search_btn_up_arrow.png create mode 100644 com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx create mode 100644 com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.module.less create mode 100644 com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx create mode 100644 com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.module.less diff --git a/com.twin.app.shoptime/assets/images/btn/search_btn_down_arrow.png b/com.twin.app.shoptime/assets/images/btn/search_btn_down_arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..59f3859cefdb91b51d8858df3cce40c518bfab61 GIT binary patch literal 846 zcmeAS@N?(olHy`uVBq!ia0vp^4M1GW!3HF=jIw!v6lZ})WHAGSq6G*ux=u4p017e| z2e~^jtUD+363Agmcl32+VA$Bt{U?!?fr06@VhH*;@0NVq&4c?*-+zIA}^v`r>_BZgOKg zOEybFAHx~J21_ObcZO#i2V@v$C^Hn(P4Fo5gfAvC_l3)(&)qMz*thha&*T5|{xv^S?SDq}8}~Ett-bckI1-ll9~F&IRoZ?|S6zn_53Qy9n4ew0?Z-wxQ_H zGeH-=gr`3Yl_lm~=-!qozIKBjZYG&Zp;*xY9ye1Stmfnjd#pP5W<3yv|KNc}Uj$#p>+9To#;S?D%*;=rKo#A%o$+-&YKnLb)7z{u`QhIfya|JYK(; zO>jj4L(-qz5KAUe9*3U&{aS7doPc`z1DA4yC@>h-$*mG-G-6jccHX;HIp7$>ksqlU z@hp$ag~azOFZTf|JRP)vGv|Fl`k{`73OLrv)qzwkl3%A+T~yk zwC(r;9>I)cpluN)228me4n6Xd`CK-9s(bu6ekr4I$uKCIOdGofHMSr|s&G{F* zs-EX~a@O)K`cG;kqN~m!UX3_8A z2PR=KIQQazzw>f_=Y47sKfk>CCUL;@;3?-OQ}m=~-gM?K>uQVNXJ_tw@(!fY)78&q Iol`;+0460!4*&oF literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/images/btn/search_btn_up_arrow.png b/com.twin.app.shoptime/assets/images/btn/search_btn_up_arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..23493317252ec57ece05c9afb7f459bbe757193c GIT binary patch literal 989 zcmeAS@N?(olHy`uVBq!ia0vp^4M1GW!3HF=jIw!v6lZ})WHAGSq6G*ux=u4p017e| z2e~^jtUD+363Agmcl32+VA$Bt{U?!?fq}Wm)5S5Qg7NL0x4FWO0_`6S7d1@Tpt^+B zY5_~Rlh*>4U{9|GzG-|5nh!4bS(0${$6+2>AB;kMD+}y1za7 zZH}Hg`+s%YyC^(K`sv5wv`%L}hsd1>JHa=RML%6OxGPWhXQ?(S1Txvn_2zR_nO*+W zxxn36AIRKv0mx+M1~Q|zT>>&)wL#2H7eAE?9z1AeuJixT!=Hb&w$0uD{QC664?mo? zy8Ly0yMN5T4NLBKe*e2+PkUnDy!}EY>5r!WeW+e9H|ad@bNinbe`Y7})*b)!_~)#O z`p)k{j^2OHJv}aI`q8KIbDdH~nu)9R%P>wM>gPf8a&IH%^})8n$Hg=vz7a)M_LhDX%h2^M}nZDP96LED<8 zPmjl%7M5+CIEQ1|N73o>->)9|c~q@HN#b~TT-}{W;c}7LCps05n*%jP3x5~c-7I|Y zc+KLc$M2dJhHtdC6x?&(Jf`kWyzqC?*^R;n|JOWzdYs3!Fn!}p3&A}f*rv%BUpcb( zXxfukf)&cA`y;a+y-PAKzRIy@;nU+briJwzS$9OS+`I89dD*NP3vW2Zs50dj{4@;r zJrkJYxbHj1o{LY9=a?FLZ*2V;r~IL9y8P#>M{JIUJ*e(JARS+KCPLU)G`jP>D%1Of zpN8qaXF_va_qB8UdCG2d+~OwNo`VcY>of&zBDBvPwmBAXR?q&~n$DkHxd|yO?%BRZ zO_Ot1JY`7Q=L6(j?d9;>w(%NshvfWSG5=O;3(i@?Xv-o{Y*)JTPq;XcC%BizU`NM; zjJ=&4`=XtzxDo^eWq3co&}~pH{p-G{z#b)CvMBU196?X4G!y*G{CdM2qarKTSWr&z MboFyt=akR{0M?+V!~g&Q literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/src/utils/SpotlightIds.js b/com.twin.app.shoptime/src/utils/SpotlightIds.js index 2624bcc0..da7fcd6e 100644 --- a/com.twin.app.shoptime/src/utils/SpotlightIds.js +++ b/com.twin.app.shoptime/src/utils/SpotlightIds.js @@ -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", diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx index ce1916e8..b9fbfe50 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx @@ -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} > + {/* 검색 내용있을때 검색 부분 */} {/* 검색 입력 영역 */} */} - {/* 결과갑 부분 작업중 */} - - {/* //결과갑 부분 작업중 */} - {/* 검색 결과 표시 영역 + + {/* 검색내용이 존재하고, 인풋창에 포커스가 가서 노출 시작 */} + {/* 피그마 기준 첫번째 줄 마지막 이미지 */} + {/*
+
+ {recentResultSearches.map((keyword, index) => ( + handleKeywordClick(keyword)} + spotlightId={`recent-Resultkeyword-${index}`} + > + {keyword} + + ))} +
*/} + {/* 검색내용이 존재하고, 인풋창에 포커스가 가서 노출 끝! */} + + {/* 결과갑 부분 작업중 시작! */} + + {/* 결과갑 부분 작업중 끝! */} + {/* 검색 결과 표시 영역 */} {searchPerformed && searchQuery !== null ? ( - Object.keys(searchDatas).length > 0 ? ( - - ) : ( - - ) + ) : ( - {/* 노출 조건 변경 필요. 포커스 블러만으로는 안됌.(가상 키보드 노출시가 맞을듯) + {/* 노출 조건 변경 필요. 포커스 블러만으로는 안됌.(가상 키보드 노출시가 맞을듯) */} {inputFocus === false ? ( <> - {/* 최근 검색어 섹션 + {/* 최근 검색어 섹션 */} - {/* 인기 검색어 섹션 + {/* 인기 검색어 섹션 */} - {/* 인기 브랜드 섹션 + {/* 인기 브랜드 섹션 */} - {/* Hot Picks for You 섹션 + {/* Hot Picks for You 섹션 */} )} - */} )} diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less index f6d34495..32d7554f 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less @@ -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; } } } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx index 8902a292..486efe52 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx @@ -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 (
@@ -97,16 +172,16 @@ const SearchResultsNew = () => { ); }, []); return ( - - +
+
How about these?
    Puppy food Dog toy Fitness
- - +
{ /> )}
- - + {/* item, show 부분 작성해야함. */} +
+
+
+ + + {filterMethods} + +
+ {tab === 0 && } + {tab === 1 && } +
+
+ + + + + + +
+
); }; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.module.less index 68612bc5..fb35a546 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.module.less @@ -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; + } + } + } } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx new file mode 100644 index 00000000..a1209203 --- /dev/null +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx @@ -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 ( + <> +
+ {itemList.map((item, index) => { + const { imgUrl, offerInfo, patnrId, prdtId, prdtNm, priceInfo } = + item; + return ( + = 5} + /> + ); + })} +
+ + ); +}; + +export default ItemCard; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.module.less new file mode 100644 index 00000000..b4e6f099 --- /dev/null +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.module.less @@ -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; + } + } +} diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx new file mode 100644 index 00000000..0c38f203 --- /dev/null +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx @@ -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 ( + + {showItem.map((item, index) => { + const { + showId, + thumbnailUrl, + showNm, + vtctpYn, + showUrl, + patnrId, + hstNm, + patncLogoPath, + } = item; + return ( + + ); + })} + + ); +}; + +export default ShowCard; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.module.less new file mode 100644 index 00000000..f4f3f80e --- /dev/null +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.module.less @@ -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; + } +}