[HomePanel] 스타일 변경건

- 각페이지별 스타일변경.
2024-02-13 15:40:58 +09:00
parent 2e8662f389
commit 41a01a0059
15 changed files with 178 additions and 177 deletions
--- a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
+++ b/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;
-    justify-content: unset;
+    padding-right: 24px;
  }
  &.onSaleItem {
    margin-top: 20px;
@@ -28,9 +27,5 @@
    overflow: hidden;
  }
  &.showList {
-    margin-top: 20px;
-    display: flex;
-    overflow: hidden;
-    height: 438px;
  }
 }
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/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 { $L } from "../../utils/helperMethods";
-import { SpotlightIds } from "../../utils/SpotlightIds";
-import css from "./TItemCard.module.less";
+import usePriceInfo from '../../hooks/usePriceInfo';
+import { $L } from '../../utils/helperMethods';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+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}
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/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>
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
+++ b/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;
+    }
+  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.jsx
+++ b/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 css from "../BestSellerItem/BestSellerItem.module.less";
+import TItemCard from '../../../../components/TItemCard/TItemCard';
+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}
    />
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.module.less
+++ b/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;
-    }
-  }
-}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/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 { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import ri from "@enact/ui/resolution";
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import ri from '@enact/ui/resolution';

-import TGrid from "../../../components/TGrid/TGrid";
-import { $L } from "../../../utils/helperMethods";
-import css from "./HomeOnSale.module.less";
-import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
+import SectionTitle from '../../../components/SectionTitle/SectionTitle';
+import { $L } from '../../../utils/helperMethods';
+import css from './HomeOnSale.module.less';
+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
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
+++ b/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);
              }
            }
          }
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/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 { useDispatch, useSelector } from "react-redux";
+import classNames from 'classnames';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import { VirtualGridList } from "@enact/sandstone/VirtualList";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import ri from "@enact/ui/resolution";
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';

-import TGrid from "../../../components/TGrid/TGrid";
-import { $L } from "../../../utils/helperMethods";
-import css from "../PopularShow/PopularShow.module.less";
-import PopularShowItem from "./PopularShowItem/PopularShowItem";
+import SectionTitle from '../../../components/SectionTitle/SectionTitle';
+import {
+  $L,
+  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>
-
-      <TGrid type="showList">
+      <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
+      <div className={css.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),
-              minHeight: ri.scale(438 * 2),
+              minWidth: scaleW(546),
+              minHeight: scaleH(438),
            }}
            noScrollByWheel
            scrollMode="translate"
-            spacing={ri.scale(18 * 2)}
+            spacing={scaleW(18)}
+            className={css.grid}
          />
        )}
-      </TGrid>
+      </div>
    </Container>
  );
 };
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
+++ b/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;
-
-  overflow: hidden;
+  padding: 60px 0px 0px 60px;

  .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;
-    height: 438px;
+    &:last-child {
+      padding-right: 60px;
+    }
  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx
+++ b/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>
  );
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
+++ b/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;
+  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/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>
  );
 };
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
+++ b/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;
+  }
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx
+++ b/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';