[search] 디자인 작업

- 중간부분에 처리할수없는 부분이있어 주석처리해두었습니다.
 - 주석명 (검색내용이 존재하고, 인풋창에 포커스가 가서 노출 시작)
 - 나머지 디자인 맞춰서 작업해두었습니다.
- 데이터 다른데서 가져와서 넣어두었습니다.

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",

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}
             >
+              {/* 검색 내용있을때 검색 부분 */}
               {/* 검색 입력 영역 */}
               <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 ? (
+                <SearchResultsNew />
-                  <SearchResults
-                    panelInfo={panelInfoFall}
-                    searchQueryRef={searchQueryRef}
-                    isRecommendedSearchRef={isRecommendedSearchRef}
-                  />
-                ) : (
-                  <NoSearchResults />
-                )
               ) : (
                 <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>

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

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 getButtonTabList = () => {
-  const SectionContainer = SpotlightContainerDecorator("div");
+    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,
+        // brandLogo: hotPicksBrandImage,
-        brandName: "Product Name",
+        brandName: "#Air, #home",
         title: "New Shark Vacuum! Your pet Hair Solution!",
         isForYou: false,
+        showBrandLogo: false,
       },
       {
         id: 2,
         image: hotPicksImage,
-        brandLogo: hotPicksBrandImage,
+        // brandLogo: hotPicksBrandImage,
-        brandName: "Product Name",
+        brandName: "#Air, #home",
         title: "New Shark Vacuum! Your pet Hair Solution!",
         isForYou: false,
+        showBrandLogo: false,
       },
       {
         id: 3,
         image: hotPicksImage,
-        brandLogo: hotPicksBrandImage,
+        // brandLogo: hotPicksBrandImage,
-        brandName: "Product Name",
+        brandName: "#Air, #home",
         title: "New Shark Vacuum! Your pet Hair Solution!",
         isForYou: false,
+        showBrandLogo: false,
       },
       {
         id: 4,
         image: hotPicksImage,
-        brandLogo: hotPicksBrandImage,
+        // brandLogo: hotPicksBrandImage,
-        brandName: "Product Name",
+        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}>
+    <div className={css.searchBox}>
-      <SectionContainer className={css.topBox}>
+      <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>
+      </div>
-      <SectionContainer
+      <div
         className={css.hotpicksSection}
         data-wheel-point={true}
         spotlightId={"hot-picks-section"}
@@ -127,8 +202,43 @@ const SearchResultsNew = () => {
             />
           )}
         </div>
-      </SectionContainer>
+        {/* item, show 부분 작성해야함. */}
-    </Container>
+      </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>
   );
 };
 

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;
+      }
+    }
+  }
 }

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 (
+    <>
+      <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;

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;
+    }
+  }
+}

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 (
+    <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;

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;
+  }
+}