[HomePanel] 스타일 수정 및 구조변경

- HomePanel 하단 TopButton 클래스 추가 및 스타일 변경
 - PopularShow 스타일변경
 - SubCategory 리스트부분 TItemCard변경
 - SubCategoryItem 삭제

com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

@@ -57,7 +57,7 @@ export default function HomePanel() {
         <HomeOnSale />
         <PopularShow />
         <BestSeller />
-        <TopButton targetId={"top"} />
+        <TopButton targetId={"top"} className={css.homeTopButton} />
       </TBody>
     </TPanel>
   );

com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less

@@ -9,3 +9,8 @@
 .tBody {
   height: 100%;
 }
+
+.homeTopButton {
+  margin-top: 116px !important;
+  padding-bottom: 60px !important;
+}

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less

@@ -2,7 +2,7 @@
 .listItem {
   width: 546px;
   height: 438px;
-  padding: 18px;
+  padding: 14px;
   background-color: @COLOR_WHITE;
   border-radius: 12px;
   border: solid 1px @COLOR_GRAY02;

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -16,13 +16,13 @@ import {
 import Spottable from '@enact/spotlight/Spottable';
 
 import { getSubCategory } from '../../../actions/mainActions';
+import TItemCard from '../../../components/TItemCard/TItemCard';
 import {
   scaleH,
   scaleW,
 } from '../../../utils/helperMethods';
 import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
 import css from '../../HomePanel/SubCategory/SubCategory.module.less';
-import SubCategoryItem from './SubCategoryItem/SubCategoryItem';
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -77,11 +77,12 @@ const SubCategory = () => {
       const itemData = categoryItemInfos[index];
       if (index !== categoryItemInfos.length) {
         return (
-          <SubCategoryItem
+          <TItemCard
-            subCategoryData={categoryItemInfos}
+            key={itemData.prdtId}
-            currentLgCatCd={currentLgCatCd}
+            imageAlt={itemData.prdtId}
-            itemNum={itemData}
+            imageSource={itemData.imgUrl}
-            key={itemData.rankOrd}
+            priceInfo={itemData.priceInfo}
+            productName={itemData.prdtNm}
             {...rest}
           />
         );

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx

@@ -1,58 +0,0 @@
-import React, { useCallback } from 'react';
-
-import Spottable from '@enact/spotlight/Spottable';
-
-import css from './SubCategoryItem.module.less';
-
-const SpottableComponent = Spottable("div");
-
-export default function SubCategoryItem({
-  subCategoryData,
-  itemNum,
-  currentLgCatCd,
-  ...rest
-}) {
-  const parsePriceInfo = useCallback(
-    (priceInfo) => {
-      const priceParts = itemNum.priceInfo
-        .split("|")
-        .filter((part) => part !== "N")
-        .map((item) => item.trim());
-
-      let originalPrice, discountedPrice, discountRate;
-      if (priceParts.length === 4) {
-        [originalPrice, discountedPrice, , discountRate] = priceParts;
-      } else if (priceParts.length === 2) {
-        [originalPrice, discountedPrice] = priceParts;
-        discountRate = null;
-      } else {
-        originalPrice = null;
-        discountedPrice = null;
-        discountRate = null;
-      }
-
-      return { originalPrice, discountedPrice, discountRate };
-    },
-    [itemNum.priceInfo]
-  );
-
-  const { originalPrice, discountedPrice, discountRate } = parsePriceInfo(
-    itemNum.priceInfo
-  );
-  return (
-    <SpottableComponent {...rest} className={css.vertical}>
-      <div>
-        <img src={itemNum.imgUrl} alt={itemNum.prdtNm} />
-
-        {discountRate && <span>{discountRate}</span>}
-      </div>
-      <div>
-        <h3>{itemNum.prdtNm}</h3>
-        <p>
-          {discountRate ? discountedPrice : originalPrice}
-          {discountRate && <span>{originalPrice}</span>}
-        </p>
-      </div>
-    </SpottableComponent>
-  );
-}

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less

@@ -1,87 +0,0 @@
-@import "../../../../style/CommonStyle.module.less";
-@import "../../../../style/utils.module.less";
-.vertical {
-  /* normal */
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  .size(@w: 324px, @h: 438px);
-  padding: 18px;
-  border-radius: 12px;
-  border: solid 1px @COLOR_GRAY02;
-  background-color: @COLOR_WHITE;
-
-  // top contents (image contetns)
-  > div:nth-child(1) {
-    position: relative;
-    .size(@w: 288px, @h: 288px);
-    color: @COLOR_WHITE;
-
-    img {
-      .size(@w: 288px, @h: 288px);
-      object-fit: contain;
-      border: solid 1px #f0f0f0;
-    }
-
-    // discount rate
-    span {
-      .position(@position: absolute, @right: 12px, @bottom: 12px);
-      .size(@w: 60px, @h: 60px);
-      border-radius: 60px;
-      background-color: @PRIMARY_COLOR_RED;
-      .font(@fontFamily: "ArialBold", @fontSize:26px);
-      text-align: center;
-      line-height: 60px;
-    }
-
-    // sold out
-    > div:nth-child(3) {
-      .position(@position: absolute, @top: 0, @right: 0);
-      .flex();
-      .size(@w: 288px, @h: 288px);
-      background-color: rgba(26, 26, 26, 0.6);
-      .font(@fontFamily: @baseFontBold, @fontSize: 36px);
-    }
-  }
-
-  // bottom contents
-  > div:nth-child(2) {
-    .flex(@direction: column, @alignCenter: flex-start);
-    gap: 6px;
-    flex-grow: 1;
-
-    h3 {
-      .font(@fontFamily: @baseFontBold, @fontSize: 24px);
-      color: @COLOR_GRAY06;
-      .elip(@clamp:2);
-      word-break: break-all;
-      overflow: hidden;
-    }
-
-    p {
-      .flex(@justifyCenter: flex-start);
-      gap: 5px;
-      .font(@fontFamily: @baseFontBold, @fontSize: 30px);
-      color: @PRIMARY_COLOR_RED;
-      letter-spacing: -1px;
-      span {
-        .font(@fontFamily: @baseFont, @fontSize: 18px);
-        color: @COLOR_GRAY04;
-        text-decoration: line-through;
-      }
-    }
-  }
-  /* focused */
-  &:focus-within,
-  &:focus {
-    border: solid 1px @PRIMARY_COLOR_RED;
-    box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
-      0 0 50px 0 rgba(0, 0, 0, 0.5);
-
-    // best seller
-    div:nth-child(3) {
-      background-color: @PRIMARY_COLOR_RED;
-    }
-  }
-}