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; border: 1px solid #dadada;
} }
&.homeBestSeller { &.homeBestSeller {
padding-right: 24px;
} }
&.onSaleItem { &.onSaleItem {
margin-top: 20px; margin-top: 20px;

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

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

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

@@ -2,142 +2,195 @@
.container { .container {
background-color: #f8f8f8; background-color: #f8f8f8;
display: flex;
}
.homeTemplateBox { .homeTemplateBox {
margin: 24px 24px 0px; margin: 24px 24px 0px;
.mainBox { display: flex;
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;
.longBanner { margin-bottom: 18px;
width: 486px; border: 4px solid transparent;
height: 858px; border-radius: 12px;
border: 4px solid transparent; overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
img, .focusDropShadow();
video { border-radius: 12px;
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;
}
&.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 { .underBox {
width: 744px; width: 744px;
height: 420px; height: 420px;
border: 4px solid transparent;
border-radius: 12px; border: 4px solid transparent;
img, border-radius: 12px;
video { overflow: hidden;
width: 100%; &:focus,
height: 100%; &:hover,
object-fit: cover; &:focus-within,
border-radius: 12px; &:active {
} border: 4px solid @PRIMARY_COLOR_RED;
&:focus, box-sizing: border-box;
&:active, .focusDropShadow();
&:hover, border-radius: 12px;
&: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 { .videoBox {
margin-top: 18px; 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;
} }
.ml18 { .videoPlayer {
margin-left: 18px; width: 744px;
} height: 420px;
.mr18 { outline: "teal dashed 1px";
margin-right: 18px; transform: "scale(1)";
} border-radius: 12px;
.mb18 { }
margin-bottom: 18px; }
.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;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
.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;
}
} }
} }

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

@@ -73,152 +73,120 @@ export default function HomeBannerTemplate2() {
const onClickBanner = useCallback(() => {}, []); const onClickBanner = useCallback(() => {}, []);
return ( return (
<Container className={css.container}> <Container className={css.container}>
<SpottableComponent className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
<div className={css.mainBox}> <div className={css.mainBox}>
{bannerInfos && <SpottableComponent className={classNames(css.longBanner, css.mr18)}>
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}
/>
) : (
<CustomImage
key={index}
className={classNames(css.longBanner, css.mr18)}
onClickBanner={onClickBanner}
delay={0}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/>
);
})}
<div className={css.dualBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" && return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
/* <Rolling <Rolling bannerData={item} key={index} imageType={false} />
) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={false} />
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/>
);
})}
</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" &&
item.shptmDspyTpNm == "Rolling" ? (
/* <Rolling
bannerData={item} bannerData={item}
key={index} key={index}
className={css.smallBox}
imageType={true} imageType={true}
/> */ /> */
<CustomImage <CustomImage
key={index} key={index}
className={css.smallBox} onClickBanner={onClickBanner}
onClickBanner={onClickBanner} delay={0}
delay={0} src={
src={ wdthImage1 === "" || wdthImage1 === null
wdthImage1 === "" || wdthImage1 === null ? wdthImage2
? wdthImage2 : wdthImage1
: wdthImage1 }
} />
/> ) : item.banrLctnNo === "2" &&
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
item.shptmDspyTpNm == "Random" ? ( <Random bannerData={item} key={index} imageType={true} />
<Random ) : (
bannerData={item} <CustomImage
key={index} key={index}
className={css.smallBox} onClickBanner={onClickBanner}
imageType={true} delay={0}
/> src={
) : ( wdthImage1 === "" || wdthImage1 === null
<CustomImage ? wdthImage2
key={index} : wdthImage1
className={css.smallBox} }
onClickBanner={onClickBanner} />
delay={0} );
src={ })}
wdthImage1 === "" || wdthImage1 === null </SpottableComponent>
? wdthImage2 <SpottableComponent className={css.smallBox}>
: wdthImage1 {bannerInfos &&
} bannerInfos.map((item, index) => {
/> return item.banrLctnNo === "3" &&
); item.shptmDspyTpNm == "Rolling" ? (
})} <Rolling bannerData={item} key={index} imageType={true} />
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? (
<Random bannerData={item} key={index} imageType={true} />
) : (
<CustomImage
key={index}
onClickBanner={onClickBanner}
delay={0}
src={
wdthImage1 === "" || wdthImage1 === null
? wdthImage2
: wdthImage1
}
/>
);
})}
</SpottableComponent>
</div>
</div>
<SpottableComponent className={css.longBanner}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "4" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling bannerData={item} key={index} imageType={false} />
bannerData={item} ) : item.banrLctnNo === "4" &&
key={index}
className={css.smallBox}
imageType={true}
/>
) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random <Random bannerData={item} key={index} imageType={false} />
bannerData={item}
key={index}
className={css.smallBox}
imageType={true}
/>
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
className={css.smallBox}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={ src={
wdthImage1 === "" || wdthImage1 === null vctpImage1 === "" || vctpImage1 === null
? wdthImage2 ? vctpImage2
: wdthImage1 : vctpImage1
} }
/> />
); );
})} })}
</div> </SpottableComponent>
{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}
/>
) : (
<CustomImage
key={index}
className={classNames(css.longBanner, css.ml18)}
onClickBanner={onClickBanner}
delay={0}
src={
vctpImage1 === "" || vctpImage1 === null
? vctpImage2
: vctpImage1
}
/>
);
})}
</div> </div>
</SpottableComponent> </div>
</Container> </Container>
); );
} }

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

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

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

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

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

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