[HomePanel] 스타일 변경건

- 각페이지별 스타일변경.

com.twin.app.shoptime/src/components/TGrid/TGrid.module.less

@@ -7,7 +7,7 @@
   gap: 15px;
 
   &.home {
-    padding: 20px 42px 0 60px;
+    padding: 20px 0px 0 60px;
     justify-content: unset;
     align-items: unset;
     flex-direction: unset;
@@ -17,8 +17,7 @@
     border: 1px solid #dadada;
   }
   &.homeBestSeller {
-    overflow: hidden;
+    padding-right: 24px;
-    justify-content: unset;
   }
   &.onSaleItem {
     margin-top: 20px;
@@ -28,9 +27,5 @@
     overflow: hidden;
   }
   &.showList {
-    margin-top: 20px;
-    display: flex;
-    overflow: hidden;
-    height: 438px;
   }
 }

com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx

@@ -1,13 +1,16 @@
-import React, { memo, useCallback } from "react";
+import React, {
+  memo,
+  useCallback,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';
 
-import usePriceInfo from "../../hooks/usePriceInfo";
+import usePriceInfo from '../../hooks/usePriceInfo';
-import { $L } from "../../utils/helperMethods";
+import { $L } from '../../utils/helperMethods';
-import { SpotlightIds } from "../../utils/SpotlightIds";
+import { SpotlightIds } from '../../utils/SpotlightIds';
-import css from "./TItemCard.module.less";
+import css from './TItemCard.module.less';
 
 const SpottableComponent = Spottable("div");
 
@@ -46,7 +49,8 @@ export default memo(function TItemCard({
       {...rest}
       className={classNames(
         type === TYPE_HORIZONTAL && css.horizontal,
-        type === TYPE_VERTICAL && css.vertical
+        type === TYPE_VERTICAL && css.vertical,
+        isBestSeller === true && css.homeBestSeller
       )}
       onClick={() => handleClick(productId)}
       spotlightId={SpotlightIds.TITEM_CARD + productId}

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

@@ -63,7 +63,8 @@ const BestSeller = () => {
             }}
             noScrollByWheel
             scrollMode="translate"
-            spacing={scaleW(18)}
+            spacing={scaleW(24)}
+            className={css.grid}
           />
         )}
       </TGrid>

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

@@ -1,5 +1,5 @@
 .bestSellerWrap {
-  padding: 60px 0 60px 60px;
+  padding: 60px 0 0px 60px;
   > h2 {
     margin: 0px 0 20px;
     font-size: 42px;
@@ -10,4 +10,13 @@
     flex-direction: unset;
     height: 438px;
   }
+  .grid {
+    overflow: unset;
+    > div {
+      overflow: unset !important;
+    }
+    &:last-child {
+      padding-right: 60px;
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import TItemCard from "../../../../components/TItemCard/TItemCard";
+import TItemCard from '../../../../components/TItemCard/TItemCard';
-import css from "../BestSellerItem/BestSellerItem.module.less";
+import css from '../BestSellerItem/BestSellerItem.module.less';
 
 export default function ({ bestSellerData, itemData, ...rest }) {
   return (
@@ -12,6 +12,7 @@ export default function ({ bestSellerData, itemData, ...rest }) {
       productName={itemData.prdtNm}
       priceInfo={itemData.priceInfo}
       rank={itemData.rankOrd}
+      type="vertical"
       isBestSeller
       {...rest}
     />

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

@@ -1,107 +1,2 @@
 @import "../../../../style/CommonStyle.module.less";
 @import "../../../../style/utils.module.less";
-
-/* vertical type (Thumbnail) */
-.vertical {
-  /* normal */
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  .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);
-    margin-bottom: 12px;
-    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);
-    flex-grow: 1;
-
-    h3 {
-      margin-bottom: 6px;
-      .font(@fontFamily: @baseFontBold, @fontSize: 24px);
-      color: @COLOR_GRAY06;
-      .elip(@clamp:2);
-      word-break: break-all;
-      overflow: hidden;
-    }
-
-    p {
-      .flex(@justifyCenter: flex-start);
-      .font(@fontFamily: @baseFontBold, @fontSize: 30px);
-      color: @PRIMARY_COLOR_RED;
-      letter-spacing: -1px;
-      span {
-        margin-left: 5px;
-        .font(@fontFamily: @baseFont, @fontSize: 18px);
-        color: @COLOR_GRAY04;
-        text-decoration: line-through;
-      }
-    }
-  }
-
-  // best seller
-  > div:nth-child(3) {
-    .position(@position: absolute, @top: -1px, @left: 18px);
-    .flex(@direction: column, @justifyCenter: space-between);
-    .size(@w: 79px, @h: 102px);
-    padding: 12px 12px 18px;
-    background-color: @COLOR_GRAY07;
-    .font(@fontFamily: @robotoFontBold, @fontSize: 24px);
-    color: @COLOR_WHITE;
-    border-bottom-left-radius: 79px;
-    border-bottom-right-radius: 79px;
-
-    span {
-      .font(@fontFamily: @arialFontBold, @fontSize: 42px);
-      font-size: 42px;
-    }
-  }
-
-  /* focused */
-  &:focus {
-    &::after {
-      .focused(@boxShadow:50px, @borderRadius:12px);
-    }
-
-    // best seller
-    div:nth-child(3) {
-      background-color: @PRIMARY_COLOR_RED;
-    }
-  }
-}

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

@@ -1,15 +1,20 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import {
-import ri from "@enact/ui/resolution";
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import ri from '@enact/ui/resolution';
 
-import TGrid from "../../../components/TGrid/TGrid";
+import SectionTitle from '../../../components/SectionTitle/SectionTitle';
-import { $L } from "../../../utils/helperMethods";
+import { $L } from '../../../utils/helperMethods';
-import css from "./HomeOnSale.module.less";
+import css from './HomeOnSale.module.less';
-import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
+import HomeOnSaleItem from './HomeOnSaleItem/HomeOnSaleItem';
 
 const SALE_ITEM_CONF = {
   ITEM_WIDTH: 630 * 2,
@@ -47,7 +52,7 @@ const HomeOnSale = ({ ...rest }) => {
   return (
     <Container {...rest} className={css.container}>
       <div className={css.bestSeller}>
-        <h2 className={css.subTitle}>{$L("ON SALE")}</h2>
+        <SectionTitle className={css.subTitle} title={$L(`ON SALE`)} />
         <div className={css.onSaleItem}>
           {homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
             <VirtualGridList

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

@@ -1,6 +1,6 @@
 @import "../../../style/CommonStyle.module.less";
 .bestSeller {
-  padding: 0px 0px 60px 60px;
+  padding: 60px 0px 0px 60px;
   width: 100%;
 
   .subTitle {
@@ -16,42 +16,48 @@
 
   .grid {
     height: 300px;
-
+    overflow: unset;
+    > div {
+      overflow: unset !important;
+    }
+    &:last-child {
+      padding-right: 60px;
+    }
     > div {
       > div {
         > div {
           &:nth-child(5n + 1) {
             > div {
               > div {
-                background: linear-gradient(to top, #f485c3, #cc4d92);
+                background: linear-gradient(0.4turn, #f485c3, #cc4d92);
               }
             }
           }
           &:nth-child(5n + 2) {
             > div {
               > div {
-                background: linear-gradient(to top, #fdbe43, #e47915);
+                background: linear-gradient(0.4turn, #fdbe43, #e47915);
               }
             }
           }
           &:nth-child(5n + 3) {
             > div {
               > div {
-                background: linear-gradient(to top, #97ca73, #3e8d18);
+                background: linear-gradient(0.4turn, #97ca73, #3e8d18);
               }
             }
           }
           &:nth-child(5n + 4) {
             > div {
               > div {
-                background: linear-gradient(to top, #84b0e9, #4282d9);
+                background: linear-gradient(0.4turn, #84b0e9, #4282d9);
               }
             }
           }
           &:nth-child(5n + 5) {
             > div {
               > div {
-                background: linear-gradient(to top, #a387ea, #7750dc);
+                background: linear-gradient(0.4turn, #a387ea, #7750dc);
               }
             }
           }

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

@@ -1,16 +1,28 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import {
-import ri from "@enact/ui/resolution";
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
 
-import TGrid from "../../../components/TGrid/TGrid";
+import SectionTitle from '../../../components/SectionTitle/SectionTitle';
-import { $L } from "../../../utils/helperMethods";
+import {
-import css from "../PopularShow/PopularShow.module.less";
+  $L,
-import PopularShowItem from "./PopularShowItem/PopularShowItem";
+  scaleH,
+  scaleW,
+} from '../../../utils/helperMethods';
+import css from '../PopularShow/PopularShow.module.less';
+import PopularShowItem from './PopularShowItem/PopularShowItem';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -33,9 +45,8 @@ const PopularShow = ({ ...rest }) => {
 
   return (
     <Container className={css.popularShow}>
-      <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>
+      <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
-
+      <div className={css.showList}>
-      <TGrid type="showList">
         {topInfos && topInfos.length > 0 && (
           <VirtualGridList
             dataSize={topInfos.length}
@@ -43,15 +54,16 @@ const PopularShow = ({ ...rest }) => {
             horizontalScrollbar="hidden"
             itemRenderer={renderItem}
             itemSize={{
-              minWidth: ri.scale(546 * 2),
+              minWidth: scaleW(546),
-              minHeight: ri.scale(438 * 2),
+              minHeight: scaleH(438),
             }}
             noScrollByWheel
             scrollMode="translate"
-            spacing={ri.scale(18 * 2)}
+            spacing={scaleW(18)}
+            className={css.grid}
           />
         )}
-      </TGrid>
+      </div>
     </Container>
   );
 };

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

@@ -1,8 +1,6 @@
 @import "../../../style/CommonStyle.module.less";
 .popularShow {
-  padding: 0px 0px 60px 60px;
+  padding: 60px 0px 0px 60px;
-
-  overflow: hidden;
 
   .subTitle {
     border-left: 6px solid @PRIMARY_COLOR_RED;
@@ -13,10 +11,19 @@
     font-family: "LGSmartUIBold";
     font-size: 42px;
   }
+
+  .grid {
+    height: 438px;
+    overflow: unset;
+    > div {
+      overflow: unset !important;
+    }
+  }
   .showList {
     padding-top: 20px;
     display: flex;
-    overflow: hidden;
+    &:last-child {
-    height: 438px;
+      padding-right: 60px;
+    }
   }
 }

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

@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react';
 
-import classNames from "classnames";
+import classNames from 'classnames';
 
-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';
 
-import css from "./PopularShowItem.module.less";
+import css from './PopularShowItem.module.less';
 
 const SpottableComponent = Spottable("li");
 
@@ -26,7 +26,10 @@ export default function PopularShowItem({ topInfosData, itemNum, ...rest }) {
             : css.horizonItem
         )}
       >
-        {itemNum.showNm}
+        <span className={css.logo}>
+          <img src={itemNum.patncLogoPath} className={css.logoPath} />
+        </span>
+        <span className={css.showNm}>{itemNum.showNm}</span>
       </div>
     </SpottableComponent>
   );

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

@@ -12,6 +12,7 @@
   margin-right: 18px;
   border: 4px solid transparent;
   box-sizing: border-box;
+
   &:focus,
   &:hover,
   &:focus-within,
@@ -28,7 +29,7 @@
   }
   .horizonItem {
     width: 510px;
-    height: 60px;
+    height: 61px;
     margin-top: 38px;
     color: #333;
     font-size: 24px;
@@ -37,6 +38,29 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    display: flex;
+  }
+  .logo {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    margin-right: 12px;
+    .logoPath {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .showNm {
+    display: inline-block;
+    color: #333;
+    font-size: 24px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    width: 438px;
+    height: 61px;
   }
 }
 .listItemVertical {
@@ -78,4 +102,26 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 12;
   }
+  .logo {
+    display: block;
+    width: 60px;
+    height: 60px;
+    margin-right: 12px;
+    .logoPath {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .showNm {
+    margin-left: 11px;
+    color: #333;
+    font-size: 24px;
+    width: 270px;
+    height: 402px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 12;
+  }
 }

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

@@ -16,10 +16,8 @@ import {
 import Spottable from '@enact/spotlight/Spottable';
 
 import { getSubCategory } from '../../../actions/mainActions';
-import { getOnSaleInfo } from '../../../actions/onSaleActions';
 import TBody from '../../../components/TBody/TBody';
 import TGrid from '../../../components/TGrid/TGrid';
-import TItemCard from '../../../components/TItemCard/TItemCard';
 import {
   scaleH,
   scaleW,
@@ -100,10 +98,9 @@ const SubCategory = () => {
         onCategoryNavClick={handleCategoryNav}
         type="home"
       />
-      <TGrid type="home">
+      <div className={css.home}>
         {categoryItemInfos && categoryItemInfos.length > 0 && (
           <VirtualGridList
-            className={css.virtualGridList}
             dataSize={categoryItemInfos.length}
             direction="horizontal"
             horizontalScrollbar="hidden"
@@ -112,11 +109,13 @@ const SubCategory = () => {
               minWidth: scaleW(324),
               minHeight: scaleH(438),
             }}
+            spacing={scaleW(0)}
             noScrollByWheel
             scrollMode="translate"
+            className={css.grid}
           />
         )}
-      </TGrid>
+      </div>
     </Container>
   );
 };

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

@@ -1 +1,21 @@
 @import "../../../style/CommonStyle.module.less";
+.home {
+  padding: 20px 0px 0 60px;
+  justify-content: unset;
+  align-items: unset;
+  flex-direction: unset;
+  background-color: #f2f2f2;
+  border: 1px solid #dadada;
+  width: 100%;
+}
+
+.grid {
+  height: 478px;
+  overflow: unset;
+  > div {
+    overflow: unset !important;
+  }
+  &:last-child {
+    padding-right: 60px;
+  }
+}

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

@@ -1,7 +1,5 @@
 import React, { useCallback } from 'react';
 
-import classNames from 'classnames';
-
 import Spottable from '@enact/spotlight/Spottable';
 
 import css from './SubCategoryItem.module.less';