From 9379b148177bb726c56c32565f25c6fed0d7b051 Mon Sep 17 00:00:00 2001 From: jangheon Pyo Date: Fri, 16 Feb 2024 10:11:54 +0900 Subject: [PATCH] =?UTF-8?q?[Category]=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=C2=A0=20Detail=20Notes=20:=20=C2=A0=201.?= =?UTF-8?q?=20VirtualGridList=20=EC=82=AC=EC=9A=A9=ED=95=9C=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EA=B7=B8=EB=A6=BC?= =?UTF-8?q?=EC=9E=90=20=EC=9E=98=EB=A0=A4=EB=B3=B4=EC=9D=B4=EB=8A=94=20?= =?UTF-8?q?=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95=202.=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=BC=EC=9E=90=20=EC=82=AC=EC=9D=B4=EC=A6=88=2050px=20->=20?= =?UTF-8?q?22px=EB=A1=9C=20=EC=B6=95=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShowContents/ShowContents.module.less | 12 ++++----- .../ShowLists/ShowLists.module.less | 2 +- .../ShowLists/ShowListsItem.module.less | 4 ++- .../ShowProductContents.jsx | 26 +++++++++++-------- .../ShowProductContents.module.less | 11 +++++--- 5 files changed, 33 insertions(+), 22 deletions(-) diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less index 69b96545..ba841e46 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less @@ -2,7 +2,7 @@ @import "../../../../style/utils.module.less"; .topsTitle { - margin: 70px 0 26px; + margin-top: 70px; color: @COLOR_GRAY08; .font(@fontFamily: @baseFontBold, @fontSize: 36px); } @@ -18,19 +18,19 @@ padding: 11px 18px; border-radius: 12px; box-sizing: border-box; + margin-top: 26px; + position: relative; > img { object-fit: cover; width: 100%; height: 100%; } - &:focus-within, &:focus { - outline: 4px solid @PRIMARY_COLOR_RED; - outline-offset: -3px; - box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED, - 0 0 50px 0 rgba(0, 0, 0, 0.5); + &::after { + .focused(@boxShadow: 22px, @borderRadius: 12px); + } } } } diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.module.less b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.module.less index c6790145..b6aac13f 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.module.less +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.module.less @@ -3,7 +3,7 @@ .container { .size(@w: 100%, @h: auto); - margin-top: 60px; + margin-top: 34px; .grid { overflow: unset; diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.module.less b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.module.less index 7de46aba..2cf436c5 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.module.less +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.module.less @@ -7,6 +7,7 @@ border: 1px solid @COLOR_GRAY02; background-color: @COLOR_WHITE; padding: 18px; + position: relative; .imgWrap { .size(@w: 100%, @h: 288px); @@ -30,9 +31,10 @@ } } + &:focus-within, &:focus { &::after { - .focused(@boxShadow: 50px, @borderRadius:12px); + .focused(@boxShadow: 22px, @borderRadius: 12px); } } } diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx index b1ffd01e..fb9ab1d1 100644 --- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx +++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx @@ -1,18 +1,22 @@ -import React, { useCallback } from "react"; +import React, { useCallback } from 'react'; -import { useSelector } from "react-redux"; +import { useSelector } from 'react-redux'; -import { VirtualGridList } from "@enact/sandstone/VirtualList"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import { VirtualGridList } from '@enact/sandstone/VirtualList'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; -import TItemCard from "../../../../../components/TItemCard/TItemCard"; -import { scaleH, scaleW } from "../../../../../utils/helperMethods"; -import css from "./ShowProductContents.module.less"; +import TItemCard from '../../../../../components/TItemCard/TItemCard'; +import { + scaleH, + scaleW, +} from '../../../../../utils/helperMethods'; +import css from './ShowProductContents.module.less'; const LIST_ITEM_CONF = { - ITEM_WIDTH: 324, - ITEM_HEIGHT: 438, - SPACING: 18, + ITEM_WIDTH: 342, + ITEM_HEIGHT: 490, + SPACING: 0, }; const Container = SpotlightContainerDecorator( @@ -49,7 +53,7 @@ export default function ShowProductContents() { {productInfos && productInfos.length > 0 && ( div { overflow: unset !important; + > div { + > div { + margin-left: 18px; + padding: 26px 0; + } + } } }