optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[components] TItemCard, container tag 및 css 수정

Browse Source 
Detail Notes :

1. container tag, li → div 변경
2. chrome version issue로 css property 수정  (gap → margin)
This commit is contained in:
younghoon100.park
2024-02-05 20:34:36 +09:00
parent f07b1c62b3
commit 57f791d1ff
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
View File

@@ -1,17 +1,14 @@
import React, { import React, { memo, useCallback } from "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 { $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("li"); const SpottableComponent = Spottable("div");
const TYPE_VERTICAL = "vertical"; const TYPE_VERTICAL = "vertical";
const TYPE_HORIZONTAL = "horizontal"; const TYPE_HORIZONTAL = "horizontal";
@@ -48,6 +45,7 @@ export default memo(function TItemCard({
.map((item) => item.trim()); .map((item) => item.trim());
let originalPrice, discountedPrice, discountRate; let originalPrice, discountedPrice, discountRate;
if (priceParts.length === 4) { if (priceParts.length === 4) {
[originalPrice, discountedPrice, , discountRate] = priceParts; [originalPrice, discountedPrice, , discountRate] = priceParts;
} else if (priceParts.length === 2) { } else if (priceParts.length === 2) {

10
com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
View File

@@ -5,7 +5,6 @@
.horizontal { .horizontal {
/* normal */ /* normal */
display: flex; display: flex;
gap: 20px;
.size(@w: 660px, @h: 236px); .size(@w: 660px, @h: 236px);
padding: 18px; padding: 18px;
border-radius: 12px; border-radius: 12px;
@@ -15,6 +14,7 @@
// left contents (image contetns) // left contents (image contetns)
> div:nth-child(1) { > div:nth-child(1) {
position: relative; position: relative;
margin-right: 20px;
color: @COLOR_WHITE; color: @COLOR_WHITE;
img { img {
@@ -60,11 +60,11 @@
p { p {
.flex(@justifyCenter: flex-start); .flex(@justifyCenter: flex-start);
gap: 5px;
.font(@fontFamily: @baseFontBold, @fontSize: 30px); .font(@fontFamily: @baseFontBold, @fontSize: 30px);
color: @PRIMARY_COLOR_RED; color: @PRIMARY_COLOR_RED;
span { span {
margin-left: 5px;
.font(@fontFamily: @baseFont, @fontSize: 18px); .font(@fontFamily: @baseFont, @fontSize: 18px);
color: @COLOR_GRAY04; color: @COLOR_GRAY04;
text-decoration: line-through; text-decoration: line-through;
@@ -86,7 +86,6 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px;
.size(@w: 324px, @h: 438px); .size(@w: 324px, @h: 438px);
padding: 18px; padding: 18px;
border-radius: 12px; border-radius: 12px;
@@ -97,6 +96,7 @@
> div:nth-child(1) { > div:nth-child(1) {
position: relative; position: relative;
.size(@w: 288px, @h: 288px); .size(@w: 288px, @h: 288px);
margin-bottom: 12px;
color: @COLOR_WHITE; color: @COLOR_WHITE;
img { img {
@@ -129,10 +129,10 @@
// bottom contents // bottom contents
> div:nth-child(2) { > div:nth-child(2) {
.flex(@direction: column, @alignCenter: flex-start); .flex(@direction: column, @alignCenter: flex-start);
gap: 6px;
flex-grow: 1; flex-grow: 1;
h3 { h3 {
margin-bottom: 6px;
.font(@fontFamily: @baseFontBold, @fontSize: 24px); .font(@fontFamily: @baseFontBold, @fontSize: 24px);
color: @COLOR_GRAY06; color: @COLOR_GRAY06;
.elip(@clamp:2); .elip(@clamp:2);
@@ -142,11 +142,11 @@
p { p {
.flex(@justifyCenter: flex-start); .flex(@justifyCenter: flex-start);
gap: 5px;
.font(@fontFamily: @baseFontBold, @fontSize: 30px); .font(@fontFamily: @baseFontBold, @fontSize: 30px);
color: @PRIMARY_COLOR_RED; color: @PRIMARY_COLOR_RED;
letter-spacing: -1px; letter-spacing: -1px;
span { span {
margin-left: 5px;
.font(@fontFamily: @baseFont, @fontSize: 18px); .font(@fontFamily: @baseFont, @fontSize: 18px);
color: @COLOR_GRAY04; color: @COLOR_GRAY04;
text-decoration: line-through; text-decoration: line-through;