From a812c70ebea1c967f753bbc89c7577a62cfef6ce Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Wed, 31 Jan 2024 18:59:57 +0900 Subject: [PATCH] =?UTF-8?q?[OnSalePanel]=20=20OnSalePanel=20css=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(2.0=20GUI=20=EB=B0=98=EC=98=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Detail Notes : 1. OnSaleProductCard 삭제 (TitemCard 대체) 2. OnSaleProductGrid 구조 변경 및 css 수정 --- .../src/views/OnSalePanel/OnSalePanel.jsx | 22 ++--- .../views/OnSalePanel/OnSalePanel.module.less | 5 +- .../OnSaleProductCard/OnSaleProductCard.jsx | 35 -------- .../OnSaleProductCard.module.less | 84 ------------------- .../OnSaleProductCard/package.json | 6 -- .../OnSaleProductsGrid/OnSaleProductsGrid.jsx | 18 ++-- .../OnSaleProductsGrid.module.less | 24 +++--- 7 files changed, 39 insertions(+), 155 deletions(-) delete mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx delete mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less delete mode 100644 com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx index 187f7b28..f97c754c 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx @@ -2,10 +2,11 @@ import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import TBody from "../../components/TBody/TBody"; +import TItemCard from "../../components/TItemCard/TItemCard"; import TPanel from "../../components/TPanel/TPanel"; import { getOnSaleInfo } from "../../features/onSale/onSaleSlice"; import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav"; -import OnSaleProductCard from "../OnSalePanel/OnSaleProductCard/OnSaleProductCard"; import OnSaleProductsGrid from "../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid"; import css from "./OnSalePanel.module.less"; @@ -42,11 +43,6 @@ export default function OnSalePanel() { } }, [currentLgCatCd]); - useEffect(() => { - console.log(categoryInfos); - console.log(saleInfos); - }, []); - return ( -
+ {saleInfos && saleInfos.map(({ saleNm, saleProductInfos }) => { return ( - + {saleProductInfos.map((saleProduct) => { return ( - ); })} ); })} -
+ ); } diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less index b7d3b2e5..78940082 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less @@ -2,7 +2,8 @@ @import "../../style/utils.module.less"; .container { - .onSaleProducts { - margin-top: 236px; + background-color: #f2f2f2; + .tBody { + height: calc(1080px - 236px); } } diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx deleted file mode 100644 index 80700f57..00000000 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; - -import Spottable from "@enact/spotlight/Spottable"; - -import css from "./OnSaleProductCard.module.less"; - -const SpottableComponent = Spottable("li"); - -export default function OnSaleProductCard({ saleProduct, ...rest }) { - const { imgUrl, prdtId, prdtNm, priceInfo } = saleProduct; - - const originalPrice = priceInfo.split("|")[0]; - const salePrice = priceInfo.split("|")[1]; - const salePercentage = priceInfo.split("|").reverse()[0]; - - return ( - -
- {prdtNm} - {salePercentage && {salePercentage}} -
-
-

{prdtNm}

-

- {salePrice} - {originalPrice} -

-
- - ); -} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less deleted file mode 100644 index b3df69ae..00000000 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less +++ /dev/null @@ -1,84 +0,0 @@ -@import "../../../style/CommonStyle.module.less"; -@import "../../../style/utils.module.less"; - -.container { - position: relative; - .flex(@direction: column); - .size(@w: 260px, @h: 375px); - margin: 0 10px; - border-radius: 10px; - background-color: #e3e7ee; - - div:nth-child(1) { - position: relative; - .size(@w: 260px, @h: 260px); - - img { - .size(@w: 260px, @h: 260px); - object-fit: cover; - border-top-right-radius: 10px; - border-top-left-radius: 10px; - } - - > span { - .position(@position: absolute, @top: auto, @right: auto, @bottom: 12px, @left: 12px); - .size(@w: 44px, @h: 44px); - border-radius: 44px; - background-color: #c70850; - color: #fff; - font-family: @baseFontBold; - font-size: 20px; - line-height: 44px; - text-align: center; - } - } - - div:nth-child(2) { - .flex(@direction: column, @alignCenter: flex-start); - gap: 10px; - padding: 10px 15px; - - h3 { - display: -webkit-box; - font-family: @baseFontBold; - font-size: 24px; - line-height: 26px; - text-overflow: ellipsis; - word-break: break-all; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - p { - color: #c70850; - font-family: @baseFontBold; - font-size: 24px; - - span { - margin-left: 5px; - color: #767676; - font-size: 18px; - text-decoration: line-through; - } - } - } - - &::after { - content: ""; - .position(@position: absolute, @top: -12px, @right: auto, @bottom: auto, @left: -12px); - display: block; - .size(@w: 276px, @h: 390px); - border: 4px solid transparent; - border-radius: 10px; - } - - &:focus { - background-color: #fcfcfc; - - &::after { - border: 4px solid #c70850; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0), - 0px 9px 15px 0 rgba(0, 0, 0, 0.3); - } - } -} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json deleted file mode 100644 index a8606fc6..00000000 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "OnSaleProductCard.jsx", - "styles": [ - "OnSaleProductCard.module.less" - ] -} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx index 7e7ffee7..3993076d 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx @@ -1,7 +1,7 @@ -import React from "react"; - +import Scroller from "@enact/sandstone/Scroller"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import css from "./OnSaleProductsGrid.module.less"; const Container = SpotlightContainerDecorator( @@ -9,11 +9,19 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function OnSaleProductsGrid({ saleNm, children }) { +export default function OnSaleProductsGrid({ sectionTitle, children }) { return ( -

{saleNm}

- + + +
    {children}
+ ); } diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less index 90282200..41f05d68 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less @@ -2,19 +2,19 @@ @import "../../../style/utils.module.less"; .container { - .flex(@direction:column, @alignCenter:flex-start); - gap: 40px; - width: 100%; - padding: 40px 0 20px 0; + position: relative; - h2 { - margin-left: 60px; - font-family: @baseFontBold; - font-size: 38px; - } + .scroller { + padding-left: 60px; - ul { - .flex(); - margin-left: 50px; + h2 { + .position(@position: sticky, @left: 0); + margin: 58px 0 24px; + } + + ul { + .flex(@justifyCenter: flex-start); + gap: 18px; + } } }