optrader
0781bb39b2
🕐 커밋 시간: 2025. 10. 18. 23:31:25 📊 변경 통계: • 총 파일: 7개 • 추가: +387줄 • 삭제: -93줄 📁 추가된 파일: + com.twin.app.shoptime/assets/mock/EnergyLabelSample.pdf 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/actionTypes.js ~ com.twin.app.shoptime/src/actions/convertActions.js ~ com.twin.app.shoptime/src/api/TAxios.js ~ com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less ~ com.twin.app.shoptime/src/components/TItemCard/TItemCard.new.jsx ~ com.twin.app.shoptime/src/reducers/convertReducer.js 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/components/TItemCard/TItemCard.new.jsx (javascript): ✅ Added: hashCode() 🔧 주요 변경 내용: • 타입 시스템 안정성 강화 • 핵심 비즈니스 로직 개선 • API 서비스 레이어 개선 • UI 컴포넌트 아키텍처 개선
544 lines
11 KiB
Plaintext
544 lines
11 KiB
Plaintext
@import "../../style/CommonStyle.module.less";
|
|
@import "../../style/utils.module.less";
|
|
|
|
// moved into scoped blocks
|
|
|
|
/* horizontal */
|
|
.horizontal {
|
|
display: flex;
|
|
.size(@w: 660px, @h: 236px);
|
|
padding: 18px;
|
|
border-radius: 12px;
|
|
border: solid 1px @COLOR_GRAY02;
|
|
background-color: @COLOR_WHITE;
|
|
|
|
.justForYouTag {
|
|
position: absolute;
|
|
width: 100px;
|
|
top: 40px;
|
|
right: 20px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.imageWrap {
|
|
position: relative;
|
|
.size(@w: 200px, @h: 200px);
|
|
margin-right: 20px;
|
|
color: @COLOR_WHITE;
|
|
|
|
> img {
|
|
.size(@w: inherit, @h: inherit);
|
|
object-fit: cover;
|
|
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-size: 26px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
|
|
// sold out
|
|
.soldout {
|
|
.position(@position: absolute, @top: 0, @right: 0);
|
|
.flex();
|
|
.size(@w: 200px, @h: 200px);
|
|
background-color: rgba(26, 26, 26, 0.6);
|
|
font-weight: bold;
|
|
font-size: 36px;
|
|
|
|
&.de {
|
|
font-size: 27px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.descWrap {
|
|
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
|
|
width: 404px;
|
|
padding: 12px 0;
|
|
> div.title {
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
color: @COLOR_GRAY06;
|
|
.elip(@clamp:2);
|
|
|
|
overflow: hidden;
|
|
> h3 {
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
color: @COLOR_GRAY06;
|
|
.elip(@clamp:2);
|
|
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
> p {
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
color: @PRIMARY_COLOR_RED;
|
|
|
|
&.offerInfo {
|
|
overflow: hidden;
|
|
.elip(@clamp:1);
|
|
}
|
|
|
|
&.priceInfo {
|
|
.flex(@justifyCenter: flex-start);
|
|
width: 100%;
|
|
|
|
> span {
|
|
margin-left: 5px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: @COLOR_GRAY04;
|
|
text-decoration: line-through;
|
|
}
|
|
> strong {
|
|
overflow: hidden;
|
|
.elip(@clamp:1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// focused
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow:22px, @borderRadius:12px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* vertical */
|
|
.vertical {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.size(@w: 324px, @h: 438px);
|
|
padding: 18px;
|
|
border-radius: 12px;
|
|
border: solid 1px @COLOR_GRAY02;
|
|
background-color: @COLOR_WHITE;
|
|
|
|
.justForYouTag {
|
|
position: absolute;
|
|
width: 100px;
|
|
top: 40px;
|
|
right: 20px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.imageWrap {
|
|
position: relative;
|
|
.size(@w: 288px, @h: 288px);
|
|
margin-bottom: 6px;
|
|
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);
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
visibility: visible;
|
|
.size(@w: 60px, @h: 60px);
|
|
border-radius: 60px;
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
|
|
// sold out
|
|
> div {
|
|
.position(@position: absolute, @top: 0, @right: 0);
|
|
.flex();
|
|
.size(@w: 288px, @h: 288px);
|
|
background-color: rgba(26, 26, 26, 0.6);
|
|
font-weight: bold;
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
.flexBox {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.labelImgBox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-end;
|
|
width: 60px;
|
|
gap: 3px;
|
|
> div {
|
|
position: relative;
|
|
z-index: 100;
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow: 22px, @borderRadius: 2px);
|
|
}
|
|
}
|
|
> img {
|
|
width: 60px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
}
|
|
.descWrap {
|
|
.flex(@direction: column, @alignCenter: flex-start);
|
|
width: 100%;
|
|
&.labelBox {
|
|
width: calc(100% - 60px);
|
|
> p {
|
|
font-size: 27px;
|
|
&.priceInfo {
|
|
> span {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> div.title {
|
|
width: 100%;
|
|
height: 64px;
|
|
font-weight: bold;
|
|
line-height: 1.33;
|
|
font-size: 24px;
|
|
color: @COLOR_GRAY06;
|
|
.elip(@clamp:2);
|
|
|
|
overflow: hidden;
|
|
> h3 {
|
|
height: 64px;
|
|
font-weight: bold;
|
|
line-height: 1.33;
|
|
font-size: 24px;
|
|
color: @COLOR_GRAY06;
|
|
.elip(@clamp:2);
|
|
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
> p {
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
color: @PRIMARY_COLOR_RED;
|
|
margin-top: 8px;
|
|
|
|
&.offerInfo {
|
|
overflow: hidden;
|
|
.elip(@clamp:1);
|
|
}
|
|
|
|
&.priceInfo {
|
|
.flex(@justifyCenter: flex-start);
|
|
width: 100%;
|
|
|
|
> span {
|
|
margin-left: 5px;
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
color: @COLOR_GRAY04;
|
|
text-decoration: line-through;
|
|
}
|
|
> strong {
|
|
overflow: hidden;
|
|
.elip(@clamp:1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// best seller
|
|
.bestSeller {
|
|
.size(@w:78px, @h:84px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.position(@position: absolute, @top: 0, @left: 18px);
|
|
background-color: @COLOR_GRAY07;
|
|
color: @COLOR_WHITE;
|
|
border-bottom-left-radius: 79px;
|
|
border-bottom-right-radius: 79px;
|
|
|
|
> span {
|
|
.font(@fontFamily: @arialFontBold, @fontSize: 42px);
|
|
}
|
|
|
|
&::before {
|
|
.size(@w:100%, @h:1px);
|
|
background-color: @COLOR_GRAY07;
|
|
.position(@position: absolute, @top: -1px, @left: 0);
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// focused
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
}
|
|
|
|
.bestSeller {
|
|
background-color: @PRIMARY_COLOR_RED;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* videoShow */
|
|
.videoShow {
|
|
// horizontal
|
|
&.imgHorizontal {
|
|
.size(@w: 546px, @h:438px);
|
|
padding: 18px;
|
|
background-color: @COLOR_WHITE;
|
|
border-radius: 12px;
|
|
.border-solid(@size:1px,@color:@COLOR_GRAY02);
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
}
|
|
}
|
|
|
|
&.nonPosition {
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.imageWrap {
|
|
.size(@w: 509px, @h: 287px);
|
|
|
|
> img {
|
|
.size(@w: inherit, @h: inherit);
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.descWrap {
|
|
display: flex;
|
|
.size(@w: 508px, @h: 64px);
|
|
margin-top: 10px;
|
|
color: @COLOR_GRAY06;
|
|
font-size: 24px;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
.logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
> img {
|
|
width: 60px;
|
|
min-height: 60px;
|
|
}
|
|
}
|
|
.title {
|
|
.size(@w: 438px, @h: 64px);
|
|
margin-left: 10px;
|
|
|
|
.productNameTitle {
|
|
align-self: center;
|
|
font-weight: bold;
|
|
line-height: 1.33;
|
|
.elip(@clamp: 2);
|
|
}
|
|
}
|
|
&.hstNmWrap {
|
|
margin-top: 11px;
|
|
|
|
.size(@w: 508px, @h: 107px);
|
|
&.title {
|
|
margin-left: 15px;
|
|
.size(@w: 430px, @h: 100px);
|
|
.productNameTitle {
|
|
.size(@w: 430px, @h: 60px);
|
|
align-self: flex-start;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
.elip(@clamp: 2);
|
|
}
|
|
.hstmNmTitle {
|
|
margin: 5px 0 5px 0px;
|
|
.size(@w: 430px, @h: 26px);
|
|
color: #767676;
|
|
font-size: 22px;
|
|
line-height: 1.18;
|
|
.elip(@clamp: 1);
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// vertical
|
|
&.imgVertical {
|
|
.size(@w: 546px, @h:438px);
|
|
padding: 18px;
|
|
background-color: @COLOR_WHITE;
|
|
border-radius: 12px;
|
|
.border-solid(@size:1px,@color:@COLOR_GRAY02);
|
|
font-weight: bold;
|
|
position: relative;
|
|
display: flex;
|
|
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
}
|
|
}
|
|
|
|
&.nonPosition {
|
|
&:focus {
|
|
&::after {
|
|
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.imageWrap {
|
|
flex: none;
|
|
.size(@w: 227px, @h: 402px);
|
|
|
|
> img {
|
|
.size(@w: inherit, @h: inherit);
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.descWrap {
|
|
flex: none;
|
|
color: @COLOR_GRAY06;
|
|
font-size: 24px;
|
|
.size(@w: 276px, @h: 100%);
|
|
padding: 0px 12px 18px;
|
|
.logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
> img {
|
|
width: 60px;
|
|
min-height: 60px;
|
|
}
|
|
}
|
|
.title {
|
|
margin-top: 8px;
|
|
|
|
.hstmNmTitle {
|
|
margin-top: 5px;
|
|
.size(@w: 270px, @h: 30px);
|
|
color: #767676;
|
|
font-size: 22px;
|
|
.elip(@clamp: 1);
|
|
font-weight: normal;
|
|
}
|
|
.productNameTitle {
|
|
width: 270px;
|
|
.elip(@clamp: 9);
|
|
font-weight: bold;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.liveTag {
|
|
.size(@w: 108px, @h: 48px);
|
|
.position(@position: absolute, @top: 30px, @left: 30px);
|
|
}
|
|
|
|
.justForYouTag {
|
|
position: absolute;
|
|
width: 100px;
|
|
top: 40px;
|
|
right: 20px;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.popupContainer {
|
|
.header {
|
|
.size(@w: 780px , @h: 102px);
|
|
.flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: row);
|
|
background-color: #e7ebef;
|
|
|
|
> h3 {
|
|
font-size: 36px;
|
|
color: #222222;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.qrcodeContainer {
|
|
padding: 30px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.qrcode {
|
|
.size(@w: 360px , @h: 360px);
|
|
background-color: #ffffff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 0 1px #dadada inset;
|
|
margin-bottom: 41px;
|
|
}
|
|
|
|
> h3 {
|
|
display: flex;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
line-height: 1.27;
|
|
}
|
|
|
|
.popupBtn {
|
|
.size(@w: 300px , @h: 78px);
|
|
margin-top: 38px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 🔽 에너지 라벨 팝업 스타일 (1920x1080 TV 화면 기준)
|
|
.energyPopupContent {
|
|
width: 100%;
|
|
max-height: 800px; // 팝업 타이틀/버튼 영역 제외한 콘텐츠 최대 높이
|
|
overflow-y: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.energyImagesContainer {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.energyImage {
|
|
max-width: 100%;
|
|
max-height: 750px; // 1080px - 타이틀(~120px) - 버튼(~120px) - 여백(~90px)
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain; // 비율 유지하면서 컨테이너에 맞춤
|
|
}
|