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

[HomePanel] 스타일 수정 및 구조변경

Browse Source 
- HomePanel 하단 TopButton 클래스 추가 및 스타일 변경
 - PopularShow 스타일변경
 - SubCategory 리스트부분 TItemCard변경
 - SubCategoryItem 삭제
This commit is contained in:
junghoon86.park
2024-02-14 17:33:04 +09:00
parent 4230f7e04b
commit 94dd4125b4
6 changed files with 14 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
View File

@@ -57,7 +57,7 @@ export default function HomePanel() {
<HomeOnSale />
<PopularShow />
<BestSeller />
<TopButton targetId={"top"} />
<TopButton targetId={"top"} className={css.homeTopButton} />
</TBody>
</TPanel>
);

5
com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less
View File

@@ -9,3 +9,8 @@
.tBody {
height: 100%;
}
.homeTopButton {
margin-top: 116px !important;
padding-bottom: 60px !important;
}

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

@@ -2,7 +2,7 @@
.listItem {
width: 546px;
height: 438px;
padding: 18px;
padding: 14px;
background-color: @COLOR_WHITE;
border-radius: 12px;
border: solid 1px @COLOR_GRAY02;

13
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -16,13 +16,13 @@ import {
import Spottable from '@enact/spotlight/Spottable';
import { getSubCategory } from '../../../actions/mainActions';
import TItemCard from '../../../components/TItemCard/TItemCard';
import {
scaleH,
scaleW,
} from '../../../utils/helperMethods';
import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
import css from '../../HomePanel/SubCategory/SubCategory.module.less';
import SubCategoryItem from './SubCategoryItem/SubCategoryItem';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
@@ -77,11 +77,12 @@ const SubCategory = () => {
const itemData = categoryItemInfos[index];
if (index !== categoryItemInfos.length) {
return (
<SubCategoryItem
subCategoryData={categoryItemInfos}
currentLgCatCd={currentLgCatCd}
itemNum={itemData}
key={itemData.rankOrd}
<TItemCard
key={itemData.prdtId}
imageAlt={itemData.prdtId}
imageSource={itemData.imgUrl}
priceInfo={itemData.priceInfo}
productName={itemData.prdtNm}
{...rest}
/>
);

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

@@ -1,58 +0,0 @@
import React, { useCallback } from 'react';
import Spottable from '@enact/spotlight/Spottable';
import css from './SubCategoryItem.module.less';
const SpottableComponent = Spottable("div");
export default function SubCategoryItem({
subCategoryData,
itemNum,
currentLgCatCd,
...rest
}) {
const parsePriceInfo = useCallback(
(priceInfo) => {
const priceParts = itemNum.priceInfo
.split("|")
.filter((part) => part !== "N")
.map((item) => item.trim());
let originalPrice, discountedPrice, discountRate;
if (priceParts.length === 4) {
[originalPrice, discountedPrice, , discountRate] = priceParts;
} else if (priceParts.length === 2) {
[originalPrice, discountedPrice] = priceParts;
discountRate = null;
} else {
originalPrice = null;
discountedPrice = null;
discountRate = null;
}
return { originalPrice, discountedPrice, discountRate };
},
[itemNum.priceInfo]
);
const { originalPrice, discountedPrice, discountRate } = parsePriceInfo(
itemNum.priceInfo
);
return (
<SpottableComponent {...rest} className={css.vertical}>
<div>
<img src={itemNum.imgUrl} alt={itemNum.prdtNm} />
{discountRate && <span>{discountRate}</span>}
</div>
<div>
<h3>{itemNum.prdtNm}</h3>
<p>
{discountRate ? discountedPrice : originalPrice}
{discountRate && <span>{originalPrice}</span>}
</p>
</div>
</SpottableComponent>
);
}

87
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less
View File

@@ -1,87 +0,0 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.vertical {
/* normal */
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
.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);
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);
gap: 6px;
flex-grow: 1;
h3 {
.font(@fontFamily: @baseFontBold, @fontSize: 24px);
color: @COLOR_GRAY06;
.elip(@clamp:2);
word-break: break-all;
overflow: hidden;
}
p {
.flex(@justifyCenter: flex-start);
gap: 5px;
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
color: @PRIMARY_COLOR_RED;
letter-spacing: -1px;
span {
.font(@fontFamily: @baseFont, @fontSize: 18px);
color: @COLOR_GRAY04;
text-decoration: line-through;
}
}
}
/* focused */
&:focus-within,
&:focus {
border: solid 1px @PRIMARY_COLOR_RED;
box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
0 0 50px 0 rgba(0, 0, 0, 0.5);
// best seller
div:nth-child(3) {
background-color: @PRIMARY_COLOR_RED;
}
}
}