[search] 검색부분 노출 작업#1

- 디자인에 맞춰서 작업 및 변경작업
2025-10-14 20:40:22 +09:00
parent 41b7216af5
commit 9b97e3a621
6 changed files with 231 additions and 941 deletions
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.jsx
@@ -36,6 +36,7 @@ import {
 import {
  getSearch,
  resetSearch,
+  searchMain,
 } from '../../actions/searchActions';
 import {
  showErrorToast,
@@ -140,25 +141,16 @@ export default function SearchPanel({
  const _onBlur = () => {
    setInputFocus(false);
  };
-  useEffect(() => {
-    console.log("###inputFocus", inputFocus);
-  }, [inputFocus]);

  let searchQueryRef = usePrevious(searchQuery);
  let isOnTopRef = usePrevious(isOnTop);

-  const isRecommendedSearchRef = useRef(false);
-
  const firstButtonSpotlightId = "first-keyword-button";
-  const focusJob = useRef(new Job((func) => func(), 100));
  const cbChangePageRef = useRef(null);
  const [focusedContainerId, setFocusedContainerId] = useState(
    panelInfo?.focusedContainerId
  );
  const focusedContainerIdRef = usePrevious(focusedContainerId);
-  const bestSellerDatas = useSelector(
-    (state) => state.product.bestSellerData.bestSeller
-  );

  // 가짜 데이터 - 실제로는 Redux store나 API에서 가져와야 함
  const recentSearches = useMemo(
@@ -571,6 +563,12 @@ export default function SearchPanel({
    []
  );

+  //test
+  useEffect(() => {
+    console.log("###searchDatas", searchDatas);
+    console.log("###panelInfo", panelInfo);
+  }, [searchDatas, panelInfo]);
+
  return (
    <TPanel
      className={css.container}
@@ -600,7 +598,8 @@ export default function SearchPanel({
                className={classNames(
                  css.inputContainer,
                  inputFocus === true && css.inputFocus,
-                  css.searchValue /* 이건 결과값 있을때만. 조건 추가필요 */
+                  searchDatas &&
+                    css.searchValue /* 이건 결과값 있을때만. 조건 추가필요 */
                )}
                data-wheel-point={true}
                spotlightId={SPOTLIGHT_IDS.SEARCH_INPUT_LAYER}
@@ -655,20 +654,25 @@ export default function SearchPanel({
              </InputContainer>

              {/* 검색내용이 존재하고, 인풋창에 포커스가 가서 노출 시작 */}
-              {/* 피그마 기준 첫번째 줄 마지막 이미지 */}
-              {/* <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> */}
+              {inputFocus === true &&
+                (searchDatas?.item?.length > 0 ||
+                  searchDatas?.show?.length > 0) && (
+                  <>
+                    <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>
+                  </>
+                )}
              {/* 검색내용이 존재하고, 인풋창에 포커스가 가서 노출 끝! */}

              {/* 결과갑 부분 작업중 시작! */}
@@ -676,7 +680,11 @@ export default function SearchPanel({
              {/* 결과갑 부분 작업중 끝! */}
              {/* 검색 결과 표시 영역 */}
              {searchPerformed && searchQuery !== null ? (
-                <SearchResultsNew />
+                <SearchResultsNew
+                  themeInfo={searchDatas.theme}
+                  itemInfo={searchDatas.item}
+                  showInfo={searchDatas.show}
+                />
              ) : (
                <ContainerBasic className={css.contentContainer}>
                  {/* 노출 조건 변경 필요. 포커스 블러만으로는 안됌.(가상 키보드 노출시가 맞을듯) */}
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.new.module.less
@@ -62,7 +62,7 @@
      .inputBox {
        width: 880px;
        height: 100px !important;
-        padding-left: 60px;
+        padding-left: 50px;
        padding-right: 40px;
        background: white;
        border-radius: 1000px;
@@ -76,7 +76,7 @@
          margin: 0 !important;
          width: calc(100% - 121px) !important;
          height: 90px !important;
-          padding: 20px 40px 20px 50px !important;
+          padding: 20px 40px 20px 0px !important;
          border: none !important;
          background-color: #fff !important;

@@ -283,7 +283,7 @@
    align-items: flex-start;
    display: inline-flex;
    .inputFocusBox {
-      width: 995px;
+      width: 935px;
      height: 355px;
      margin: 0 auto;
      .keywordList {
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.jsx
@@ -28,9 +28,17 @@ import css from './SearchResults.new.module.less';
 import ItemCard from './SearchResultsNew/ItemCard';
 import ShowCard from './SearchResultsNew/ShowCard';

-const SearchResultsNew = () => {
+const ITEMS_PER_PAGE = 10;
+
+const SearchResultsNew = ({ itemInfo, showInfo, themeInfo }) => {
  const getButtonTabList = () => {
-    return [$L("ITEM (#)"), $L("SHOWS (#)")];
+    const itemLength = itemInfo?.length || 0;
+    const showLength = showInfo?.length || 0;
+
+    return [
+      itemLength && $L(`ITEM (${itemLength})`),
+      showLength && $L(`SHOWS (${showLength})`),
+    ].filter(Boolean);
  };

  let buttonTabList = null;
@@ -39,14 +47,29 @@ const SearchResultsNew = () => {
  const [tab, setTab] = useState(0);
  //드롭다운
  const [dropDownTab, setDropDownTab] = useState(0);
+  //표시할 아이템 개수
+  const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);

  const [styleChange, setStyleChange] = useState(false);
  const [filterMethods, setFilterMethods] = useState([]);
  const cbChangePageRef = useRef(null);
+
  if (!buttonTabList) {
    buttonTabList = getButtonTabList();
  }

+  // 현재 탭의 데이터 가져오기
+  const currentData = tab === 0 ? itemInfo : showInfo;
+
+  // 표시할 데이터 (처음부터 visibleCount 개수만큼)
+  const displayedData = useMemo(() => {
+    if (!currentData) return [];
+    return currentData.slice(0, visibleCount);
+  }, [currentData, visibleCount]);
+
+  // 더 불러올 데이터가 있는지 확인
+  const hasMore = currentData && visibleCount < currentData.length;
+
  const handleStyle = useCallback(() => {
    setStyleChange(true);
  }, []);
@@ -63,6 +86,7 @@ const SearchResultsNew = () => {
      }

      setTab(index);
+      setVisibleCount(ITEMS_PER_PAGE); // 탭 변경시 표시 개수 리셋
      if (cbChangePageRef.current) {
        cbChangePageRef.current(0, false, false);
      }
@@ -78,6 +102,7 @@ const SearchResultsNew = () => {
      }

      setDropDownTab(selected);
+      setVisibleCount(ITEMS_PER_PAGE); // 필터 변경시 표시 개수 리셋
    },
    [dropDownTab]
  );
@@ -85,92 +110,60 @@ const SearchResultsNew = () => {
  const SpottableLi = Spottable("li");
  const SpottableDiv = Spottable("div");

-  const upBtnClick = useCallback(() => {
-    console.log("##upbtn 누름");
-  }, []);
-  const downBtnClick = useCallback(() => {
-    console.log("##downbtn 누름");
-  }, []);
+  // 맨 처음으로 이동 (위 버튼)
+  const upBtnClick = () => {
+    if (cbChangePageRef.current) {
+      cbChangePageRef.current(0, true);
+    }
+  };

-  const hotPicks = useMemo(
-    () => [
-      {
-        id: 1,
-        image: hotPicksImage,
-        // brandLogo: hotPicksBrandImage,
-        brandName: "#Air, #home",
-        title: "New Shark Vacuum! Your pet Hair Solution!",
-        isForYou: false,
-        showBrandLogo: false,
-      },
-      {
-        id: 2,
-        image: hotPicksImage,
-        // brandLogo: hotPicksBrandImage,
-        brandName: "#Air, #home",
-        title: "New Shark Vacuum! Your pet Hair Solution!",
-        isForYou: false,
-        showBrandLogo: false,
-      },
-      {
-        id: 3,
-        image: hotPicksImage,
-        // brandLogo: hotPicksBrandImage,
-        brandName: "#Air, #home",
-        title: "New Shark Vacuum! Your pet Hair Solution!",
-        isForYou: false,
-        showBrandLogo: false,
-      },
-      {
-        id: 4,
-        image: hotPicksImage,
-        // brandLogo: hotPicksBrandImage,
-        brandName: "#Air, #home",
-        title: "New Shark Vacuum! Your pet Hair Solution!",
-        isForYou: true,
-        showBrandLogo: false,
-      },
-    ],
-    []
-  );
+  // 10개씩 추가 로드 (아래 버튼)
+  const downBtnClick = useCallback(() => {
+    if (hasMore) {
+      setVisibleCount((prev) => prev + ITEMS_PER_PAGE);
+    }
+  }, [hasMore]);

  // ProductCard 컴포넌트
-  const renderItem = useCallback(({ index, ...rest }) => {
-    const {
-      showBrandLogo = true,
-      showBrandName = true,
-      showProductTitle = true,
-      image,
-      title,
-      brandLogo,
-      brandName,
-    } = hotPicks[index];
-    return (
-      <SpottableDiv
-        key={`searchProduct-${index}`}
-        className={css.productCard}
-        spotlightId={`searchProduct-${index}`}
-        {...rest}
-      >
-        <div className={css.productImageWrapper}>
-          <img src={image} alt={title} className={css.productImage} />
-        </div>
-        <div className={css.productInfo}>
-          {showBrandLogo && (
-            <div className={css.productBrandWrapper}>
-              <img src={brandLogo} alt={brandName} className={css.brandLogo} />
-            </div>
-          )}
-          <div className={css.productDetails}>
-            {showBrandName && <div className={css.brandName}>{brandName}</div>}
-            {showProductTitle && (
-              <div className={css.productTitle}>{title}</div>
-            )}
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const { bgImagePath, title, partnerLogo, partnerName, keyword } =
+        themeInfo[index];
+      return (
+        <SpottableDiv
+          key={`searchProduct-${index}`}
+          className={css.productCard}
+          spotlightId={`searchProduct-${index}`}
+          {...rest}
+        >
+          <div className={css.productImageWrapper}>
+            <img src={bgImagePath} alt={title} className={css.productImage} />
          </div>
-        </div>
-      </SpottableDiv>
-    );
-  }, []);
+          <div className={css.productInfo}>
+            <div className={css.productBrandWrapper}>
+              <img
+                src={partnerLogo}
+                alt={partnerName}
+                className={css.brandLogo}
+              />
+            </div>
+            <div className={css.productDetails}>
+              {keyword && (
+                <div className={css.brandName}>
+                  {keyword.map((item, index) => (
+                    <span key={index}># {item}</span>
+                  ))}
+                </div>
+              )}
+              <div className={css.productTitle}>{title}</div>
+            </div>
+          </div>
+        </SpottableDiv>
+      );
+    },
+    [themeInfo]
+  );
+
  return (
    <div className={css.searchBox}>
      <div className={css.topBox}>
@@ -181,29 +174,30 @@ const SearchResultsNew = () => {
          <SpottableLi className={css.topBoxListItem}>Fitness</SpottableLi>
        </ul>
      </div>
-      <div
-        className={css.hotpicksSection}
-        data-wheel-point={true}
-        spotlightId={"hot-picks-section"}
-      >
-        <div className={css.sectionHeader}>
-          <div className={css.sectionIndicator}></div>
-          <div className={css.sectionTitle}>Hot Picks (#)</div>
-        </div>
-        <div className={css.productList}>
-          {hotPicks && hotPicks.length > 0 && (
+      {themeInfo && themeInfo?.length > 0 && (
+        <div
+          className={css.hotpicksSection}
+          data-wheel-point={true}
+          spotlightId={"hot-picks-section"}
+        >
+          <div className={css.sectionHeader}>
+            <div className={css.sectionIndicator}></div>
+            <div className={css.sectionTitle}>
+              Hot Picks ({themeInfo?.length})
+            </div>
+          </div>
+          <div className={css.productList}>
            <TVirtualGridList
-              dataSize={hotPicks.length}
+              dataSize={themeInfo?.length}
              direction="horizontal"
              renderItem={renderItem}
              itemWidth={416}
              itemHeight={436}
              spacing={20}
            />
-          )}
+          </div>
        </div>
-        {/* item, show 부분 작성해야함. */}
-      </div>
+      )}
      <div className={css.itemBox} cbChangePageRef={cbChangePageRef}>
        <div className={css.tabContainer}>
          <TButtonTab
@@ -213,27 +207,31 @@ const SearchResultsNew = () => {
            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>
+          {tab === 0 && (
+            <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 />}
+        {tab === 0 && <ItemCard itemInfo={displayedData} />}
+        {tab === 1 && <ShowCard showInfo={displayedData} />}
      </div>
      <div className={css.buttonContainer}>
-        <SpottableDiv onClick={downBtnClick} className={css.downBtn}>
-          <CustomImage className={css.btnImg} src={downBtnImg} />
-        </SpottableDiv>
+        {hasMore && (
+          <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>
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.jsx
@@ -1,461 +1,16 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback } from 'react';

-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
-
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import { useDispatch } from 'react-redux';

 import { pushPanel } from '../../../actions/panelActions';
 import TItemCardNew from '../../../components/TItemCard/TItemCard.new';
+import TScroller from '../../../components/TScroller/TScroller';
 import { panel_names } from '../../../utils/Config';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import css from './ItemCard.module.less';

-const ItemCard = ({ onClick }) => {
+const ItemCard = ({ onClick, itemInfo }) => {
  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) => {
@@ -475,28 +30,33 @@ const ItemCard = ({ onClick }) => {

  return (
    <>
-      <div className={css.container} spotlightId={SpotlightIds.SEARCH_ITEM}>
-        {itemList.map((item, index) => {
-          const { imgUrl, offerInfo, patnrId, prdtId, prdtNm, priceInfo } =
-            item;
+      <TScroller
+        className={css.container}
+        spotlightId={SpotlightIds.SEARCH_ITEM}
+      >
+        {itemInfo.map((item, index) => {
+          const { thumbnail, title, dcPrice, price, soldout, contentId } = item;
+          const tokens = contentId && contentId.split("_");
+          const patnrId = tokens?.[4] || "";
+          const prdtId = tokens?.[5] || "";
          return (
            <TItemCardNew
              key={prdtId}
              imageAlt={prdtId}
-              imageSource={imgUrl}
-              priceInfo={priceInfo}
-              productName={prdtNm}
+              imageSource={thumbnail}
+              productName={title}
              productId={prdtId}
              onClick={_handleItemClick(patnrId, prdtId)}
-              offerInfo={offerInfo}
-              spotlightId={"categoryItemContents" + index}
-              label={index * 1 + 1 + " of " + itemList.lengt + 1}
+              soldoutFlag={soldout}
+              dcPrice={dcPrice}
+              originPrice={price}
+              spotlightId={"searchItemContents" + index}
+              label={index * 1 + 1 + " of " + itemInfo.length + 1}
              lastLabel=" go to detail, button"
-              data-wheel-point={index >= 5}
            />
          );
        })}
-      </div>
+      </TScroller>
    </>
  );
 };
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ItemCard.module.less
@@ -2,14 +2,19 @@
@import "../../../style/utils.module.less";

 .container {
-  width: auto;
-  display: flex;
-  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
  margin-top: 34px;
  > div {
-    margin: 0 15px 15px 0;
-    &:nth-child(5n + 5) {
-      margin: 0 0 15px 0;
+    > div {
+      display: flex;
+      flex-wrap: wrap;
+      > div {
+        margin: 0 15px 15px 0;
+        &:nth-child(5n + 5) {
+          margin: 0 0 15px 0;
+        }
+      }
    }
  }
 }
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchResultsNew/ShowCard.jsx
@@ -1,363 +1,82 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback } from 'react';

-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch } from 'react-redux';

 import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';

-import { startVideoPlayer } from '../../../actions/playActions';
+import { pushPanel } from '../../../actions/panelActions';
 import TItemCardNew, {
  IMAGETYPES,
  TYPES,
 } from '../../../components/TItemCard/TItemCard.new';
+import { panel_names } from '../../../utils/Config';
 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 ShowCard = ({ onClick, showInfo }) => {
  const dispatch = useDispatch();
+
  const _onClick = useCallback(
-    (patnrId, showId, lgCatCd, showUrl) => (ev) => {
-      onClick && onClick(ev);
+    (contentId, thumbnail, liveFlag) => {
+      const tokens = contentId && contentId.split("_");
+
+      const linkTpCd = tokens[1] || "";
+      const patnrId = tokens[4] || "";
+      const showId = tokens[5] || "";
+
+      if (onClick) {
+        onClick();
+      }
+
      dispatch(
-        startVideoPlayer({
-          showId,
-          patnrId,
-          shptmBanrTpNm: "VOD",
-          lgCatCd,
-          modal: false,
+        pushPanel({
+          name: panel_names.PLAYER_PANEL,
+          panelInfo: {
+            patnrId,
+            showId,
+            chanId: showId,
+            linkTpCd,
+            thumbnail,
+            shptmBanrTpNm: liveFlag === "Y" ? "LIVE" : "VOD",
+          },
        })
      );
    },
    [onClick]
  );
+
  return (
    <Container className={css.container} spotlightId={SpotlightIds.SEARCH_SHOW}>
-      {showItem.map((item, index) => {
+      {showInfo.map((item, index) => {
        const {
-          showId,
-          thumbnailUrl,
-          showNm,
-          vtctpYn,
-          showUrl,
-          patnrId,
-          hstNm,
-          patncLogoPath,
+          contentId,
+          endTime,
+          liveFlag,
+          partnerId,
+          partnerLogo,
+          partnerName,
+          startTime,
+          thumbnail,
+          title,
        } = item;
+        const tokkens = contentId && contentId.split("_");
+        const showId = tokkens[5] || "";
        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
-            )}
+            key={contentId}
+            imageAlt={title}
+            imageSource={thumbnail}
+            productName={title}
+            logo={partnerLogo}
+            onClick={() => {
+              _onClick(contentId, thumbnail, liveFlag);
+            }}
            productId={showId}
            spotlightId={"categoryShowContents" + index}
            data-wheel-point="true"
-            hstNm={hstNm}
            logoDisplay="true"
          />
        );