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

[HomePanel] 디자인 수정및 데이터 변경건.

Browse Source 
- 각페이지별 디자인 수정
 - 서브카테고리 내에서 데이터 10개만 불러오도록 처리.
This commit is contained in:
junghoon86.park
2024-02-13 16:57:14 +09:00
parent 1853c0c7f5
commit aae303ea2e
7 changed files with 412 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
View File

@@ -17,7 +17,6 @@
border: 1px solid #dadada;
}
&.homeBestSeller {
padding-right: 24px;
}
&.onSaleItem {
margin-top: 20px;

71
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
View File

@@ -74,9 +74,12 @@ export default function HomeBannerTemplate1() {
const onClickBanner = useCallback(() => {}, []);
return (
<Container className={css.container}>
<SpottableComponent className={css.homeTemplateBox}>
<div className={css.homeTemplateBox}>
<div className={css.mainBox}>
<div className={classNames(css.dualBox, css.mr18)}>
<div className={css.dualBox}>
<SpottableComponent
className={classNames(css.videoBox, css.topBox)}
>
{/* 배너1 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -117,6 +120,11 @@ export default function HomeBannerTemplate1() {
/>
);
})}
</SpottableComponent>
{/* 배너4 */}
<SpottableComponent
className={classNames(css.videoBox, css.underBox)}
>
{/* 배너2 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
@@ -172,30 +180,22 @@ export default function HomeBannerTemplate1() {
/>
);
})}
</SpottableComponent>
</div>
<SpottableComponent className={classNames(css.imgBox, css.mr18)}>
{/* 배너3 */}
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
className={classNames(css.longBanner, css.mr18)}
key={index}
imageType={false}
/>
) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
className={classNames(css.longBanner, css.mr18)}
key={index}
imageType={false}
/>
<Rolling bannerData={item} key={index} imageType={false} />
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} />
) : (
/* <CustomImage
key={index}
className={classNames(css.longBanner, css.mr18)}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -204,37 +204,24 @@ export default function HomeBannerTemplate1() {
: wdthImage1
}
/> */
<Random
bannerData={item}
key={index}
className={css.longBanner}
imageType={false}
/>
<Random bannerData={item} key={index} imageType={false} />
);
})}
</SpottableComponent>
{/* 배너4 */}
<SpottableComponent className={classNames(css.imgBox)}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={css.longBanner}
imageType={false}
/>
) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={css.longBanner}
imageType={false}
/>
<Rolling bannerData={item} key={index} imageType={false} />
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} />
) : (
/* <CustomImage
key={index}
className={css.longBanner}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -243,16 +230,12 @@ export default function HomeBannerTemplate1() {
: wdthImage1
}
/> */
<Random
bannerData={item}
key={index}
className={css.longBanner}
imageType={false}
/>
<Random bannerData={item} key={index} imageType={false} />
);
})}
</div>
</SpottableComponent>
</div>
</div>
</Container>
);
}

303
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
View File

@@ -2,142 +2,195 @@
.container {
background-color: #f8f8f8;
.homeTemplateBox {
margin: 24px 24px 0px;
.mainBox {
display: flex;
}
.longBanner {
.homeTemplateBox {
margin: 24px 24px 0px;
display: flex;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.leftBannerBox {
width: 744px;
height: 858px;
margin-right: 18px;
&.dualBox {
.topBox {
width: 744px;
height: 420px;
margin-bottom: 18px;
border: 4px solid transparent;
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
.underBox {
width: 744px;
height: 420px;
border: 4px solid transparent;
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
}
}
.videoBox {
width: 744px;
height: 420px;
margin: 0 18px 18px 0;
border: 4px solid transparent;
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
.videoPlayer {
width: 744px;
height: 420px;
outline: "teal dashed 1px";
transform: "scale(1)";
border-radius: 12px;
}
}
.banner02 {
width: 744px;
height: 420px;
border-radius: 12px;
border: 4px solid transparent;
box-sizing: border-box;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
.banner03 {
width: 486px;
height: 858px;
border: 4px solid transparent;
border-radius: 12px;
box-sizing: border-box;
margin-right: 18px;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
}
}
.banner04 {
width: 486px;
height: 858px;
border: 4px solid transparent;
box-sizing: border-box;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
&:focus,
&:active,
&:hover,
&:focus-within {
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
&.rollingBox {
position: relative;
.rightBtn {
position: absolute;
right: 18px;
top: 408px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
position: absolute;
left: 18px;
top: 408px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
.dualBox {
.smallBox {
width: 744px;
height: 420px;
border: 4px solid transparent;
border-radius: 12px;
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
&:focus,
&:active,
&:hover,
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
&:nth-child(1) {
margin-bottom: 18px;
}
&.rollingBox {
position: relative;
.rightBtn {
position: absolute;
right: 18px;
top: 190px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
position: absolute;
left: 18px;
top: 190px;
z-index: 1;
width: 42px;
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
}
}
}
/* margin전용 */
.mt18 {
margin-top: 18px;
}
.ml18 {
margin-left: 18px;
}
.mr18 {
margin-right: 18px;
}
.mb18 {
margin-bottom: 18px;
}
}
.bannerFlexCol {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bannerFlexRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mainBox {
display: flex;
}
.mainBox {
display: flex;
.imgBox {
width: 486px;
height: 858px;
margin-right: 18px;
border: 4px solid transparent;
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
}
> img {
width: 486px;
height: 858px;
object-fit: contain;
}
}
}

78
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
View File

@@ -73,29 +73,20 @@ export default function HomeBannerTemplate2() {
const onClickBanner = useCallback(() => {}, []);
return (
<Container className={css.container}>
<SpottableComponent className={css.homeTemplateBox}>
<div className={css.homeTemplateBox}>
<div className={css.mainBox}>
<SpottableComponent className={classNames(css.longBanner, css.mr18)}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={classNames(css.longBanner, css.mr18)}
imageType={false}
/>
) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={classNames(css.longBanner, css.mr18)}
imageType={false}
/>
<Rolling bannerData={item} key={index} imageType={false} />
) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} />
) : (
<CustomImage
key={index}
className={classNames(css.longBanner, css.mr18)}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -106,8 +97,10 @@ export default function HomeBannerTemplate2() {
/>
);
})}
</SpottableComponent>
<div className={classNames(css.dualBox, css.mr18)}>
<div className={css.dualBox}>
<SpottableComponent className={css.smallBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" &&
@@ -115,12 +108,10 @@ export default function HomeBannerTemplate2() {
/* <Rolling
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/> */
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -131,16 +122,10 @@ export default function HomeBannerTemplate2() {
/>
) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
<Random bannerData={item} key={index} imageType={true} />
) : (
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -151,29 +136,19 @@ export default function HomeBannerTemplate2() {
/>
);
})}
</SpottableComponent>
<SpottableComponent className={css.smallBox}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
<Rolling bannerData={item} key={index} imageType={true} />
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
<Random bannerData={item} key={index} imageType={true} />
) : (
<CustomImage
key={index}
className={css.smallBox}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -184,29 +159,21 @@ export default function HomeBannerTemplate2() {
/>
);
})}
</SpottableComponent>
</div>
</div>
<SpottableComponent className={css.longBanner}>
{bannerInfos &&
bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? (
<Rolling
bannerData={item}
key={index}
className={classNames(css.longBanner, css.ml18)}
imageType={false}
/>
) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? (
<Random
bannerData={item}
key={index}
className={classNames(css.longBanner, css.ml18)}
imageType={false}
/>
<Rolling bannerData={item} key={index} imageType={false} />
) : item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} />
) : (
<CustomImage
key={index}
className={classNames(css.longBanner, css.ml18)}
onClickBanner={onClickBanner}
delay={0}
src={
@@ -217,8 +184,9 @@ export default function HomeBannerTemplate2() {
/>
);
})}
</div>
</SpottableComponent>
</div>
</div>
</Container>
);
}

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

@@ -12,13 +12,14 @@
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.longBanner {
width: 486px;
height: 858px;
border: 4px solid transparent;
box-sizing: border-box;
border-radius: 12px;
overflow: hidden;
&:focus,
&:active,
&:hover,
@@ -72,7 +73,7 @@
height: 420px;
border: 4px solid transparent;
border-radius: 12px;
overflow: hidden;
&:focus,
&:active,
&:hover,

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

@@ -67,7 +67,7 @@ const SubCategory = () => {
getSubCategory({
lgCatCd: currentLgCatCd,
patnrIdList: null,
pageSize: null,
pageSize: 10,
tabType: "CAT00102",
filterType: "CAT00202",
})

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

@@ -16,6 +16,6 @@
overflow: unset !important;
}
&:last-child {
padding-right: 60px;
padding-right: 31px;
}
}