[251026] fix: ProductAllSection Chromium68 호환성 해결
🕐 커밋 시간: 2025. 10. 26. 24:18:29 📊 변경 통계: • 총 파일: 3개 • 추가: +135줄 • 삭제: -472줄 📁 추가된 파일: + com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.v2.less 📝 수정된 파일: ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less 🔧 주요 변경 내용: • 중간 규모 기능 개선 • 코드 정리 및 최적화 Performance: 코드 최적화로 성능 개선 기대
This commit is contained in:
@@ -657,7 +657,8 @@ export default function ProductAllSection({
|
||||
</TButton>
|
||||
</HorizontalContainer>
|
||||
)}
|
||||
<Container
|
||||
|
||||
<HorizontalContainer
|
||||
className={classNames(
|
||||
css.buttonContainer,
|
||||
isBillingProductVisible && css.buttonHasNoCart
|
||||
@@ -684,7 +685,7 @@ export default function ProductAllSection({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</HorizontalContainer>
|
||||
|
||||
<div className={css.callToOrderSection}>
|
||||
{orderPhnNo && (
|
||||
|
||||
@@ -37,473 +37,8 @@
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
height: 339px;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Content Section - 1180px (1114px 콘텐츠 + 66px 스크롤바)
|
||||
.contentSection {
|
||||
width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// 4. Scroll Section - 66px (삭제 - contentSection에 포함)
|
||||
.scrollSection {
|
||||
display: none; // 사용하지 않음
|
||||
}
|
||||
|
||||
// 왼쪽 영역 컨테이너 (infoSection 내부)
|
||||
.leftInfoContainer {
|
||||
width: 635px; // 실제 콘텐츠 영역
|
||||
margin-right: 10px; // 우측 10px 간격
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 왼쪽 영역 내부 래퍼
|
||||
.leftInfoWrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
// gap 대신 margin 사용 (Chromium 68 호환성)
|
||||
> * {
|
||||
margin-bottom: 5px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 오른쪽 영역 컨테이너 (contentSection 내부)
|
||||
.rightContentContainer {
|
||||
width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
|
||||
height: @globalHeight - 136px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
// 스크롤러 래퍼 (contentSection 내부)
|
||||
.scrollerWrapper {
|
||||
width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바 (절대값)
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible; // hidden에서 visible로 변경
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative; // 자식 absolute 요소의 기준점
|
||||
|
||||
// 스크롤러 오버라이드 (1210px = 30px + content + 스크롤바)
|
||||
.scrollerOverride {
|
||||
width: 1210px; // 절대 크기 지정
|
||||
height: 100%;
|
||||
// 좌측 30px, 우측 66px(스크롤바) 패딩을 명시적으로 적용
|
||||
padding: 0 10px 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 스크롤바 너비를 6px로 명확하게 설정
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent; // 트랙 배경은 투명하게
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #9c9c9c; // 스크롤바 색상
|
||||
border-radius: 3px; // 스크롤바 둥근 모서리
|
||||
}
|
||||
|
||||
// 스크롤바 thumb에 hover 효과 적용
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
|
||||
// 내부 콘텐츠는 별도 너비 계산 없이 100%를 사용
|
||||
> div {
|
||||
width: 100%; // 부모의 패딩을 제외한 나머지 공간(1114px)을 모두 사용
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// 스크롤 콘텐츠 내부의 모든 섹션들 (패딩 제거 - scrollerOverride에서 처리함)
|
||||
#product-details-section {
|
||||
width: 1124px; // 부모 콘텐츠 영역 전체 사용
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
// ProductDetail.new 컴포넌트들
|
||||
> div[class*="rollingWrap"] {
|
||||
width: 100% !important; // 부모 영역 전체 사용
|
||||
max-width: none !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#product-description-section,
|
||||
#user-reviews-section,
|
||||
#you-may-also-like-section {
|
||||
width: 100%; // 부모 콘텐츠 영역 전체 사용
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
|
||||
> * {
|
||||
max-width: 100% !important; // 부모 영역 전체 사용
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 이미지들이 컨테이너를 넘지 않도록
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 상품 상세 영역 (마진 포함 크기)
|
||||
.productDetail {
|
||||
width: 1124px; // 1114px + 10px
|
||||
max-width: 1124px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch; // 자식 요소들이 전체 너비 사용하도록
|
||||
}
|
||||
|
||||
// 스크롤 마커
|
||||
.scrollMarker {
|
||||
height: 1px;
|
||||
visibility: hidden;
|
||||
}
|
||||
} // .scrollerWrapper
|
||||
} // .rightContentContainer
|
||||
|
||||
// (중복 제거됨) .scrollerWrapper는 .rightContentContainer 하위로 중첩 이동
|
||||
|
||||
// (중복 제거됨) 최상위 스크롤러/섹션 정의는 .scrollerWrapper 중첩 내부로 이동
|
||||
|
||||
// ProductDetailCard 스타일 참고 - 크기/간격만 적용
|
||||
|
||||
// 헤더 컨텐츠 영역 (태그, 별점)
|
||||
.headerContent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
margin-left: 10px;
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일 쇼핑 섹션 (mobileSection 참고)
|
||||
.buttonContainer {
|
||||
align-self: stretch;
|
||||
padding-top: 19px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
&.buttonHasNoCart {
|
||||
padding-top: 0;
|
||||
}
|
||||
> * {
|
||||
margin-right: 6px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopByMobileButton {
|
||||
flex: 1 1 0% !important;
|
||||
width: auto !important; // flex로 크기 조정
|
||||
height: 60px !important;
|
||||
background: rgba(68, 68, 68, 0.5) !important;
|
||||
border-radius: 6px !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
&.shopByMobileOne {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
font-size: 25px !important;
|
||||
font-family: @baseFont !important; // LG Smart 폰트 사용
|
||||
font-weight: 400 !important; // Bold에서 Regular로 변경
|
||||
line-height: 35px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
// 포커스 상태 추가
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED !important; // 포커스시 빨간색 배경
|
||||
outline: 2px solid @PRIMARY_COLOR_RED !important;
|
||||
|
||||
.shopByMobileText {
|
||||
color: white !important; // 포커스시에도 텍스트는 흰색 유지
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #4f172c;
|
||||
outline: 2px solid #4f172c;
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favoriteBtnWrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
// 배경색과 라운드는 FavoriteBtn 내부에서 처리하므로 제거
|
||||
}
|
||||
|
||||
// 주문 전화 섹션 (callToOrderSection 참고)
|
||||
.callToOrderSection {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
padding: 17px 30px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px !important;
|
||||
.callToOrderText {
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: @baseFont; // LG Smart 폰트 사용
|
||||
font-weight: 400; // Bold에서 Regular로 변경
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.phoneSection {
|
||||
padding: 0 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.phoneIconContainer {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.phoneIcon {
|
||||
width: 24.94px;
|
||||
height: 24.97px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
// 전화 아이콘 이미지 또는 CSS로 구현
|
||||
background-image: url("../../../../assets/images/icons/ic-gr-call-1.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.phoneNumber {
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: "LG Smart UI";
|
||||
font-weight: 700;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 액션 버튼들 (actionButtons 참고)
|
||||
.actionButtonsWrapper {
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
> * {
|
||||
margin-bottom: 5px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 모든 버튼 기본 스타일 (PRODUCT DETAILS는 빨간색 아님!)
|
||||
.productDetailsButton,
|
||||
.userReviewsButton,
|
||||
.youMayLikeButton {
|
||||
align-self: stretch;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.05); // 기본 회색 배경
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: @baseFont; // LG Smart 폰트 사용
|
||||
font-weight: 400; // Bold에서 Regular로 변경
|
||||
line-height: 35px;
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED; // 포커스시만 빨간색
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 4px solid #4f172c;
|
||||
background: #4f172c;
|
||||
}
|
||||
}
|
||||
|
||||
.themeButton {
|
||||
align-self: stretch;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
|
||||
// ProductOverview 컨테이너 스타일 수정 (자식 요소에 맞게 크기 조정)
|
||||
[class*="ProductOverview"] {
|
||||
padding: 0 0 5px;
|
||||
// 내부 div (productInfoWrapper)
|
||||
> div {
|
||||
align-self: stretch;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
> div:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// LayoutSample 포커스 테스트용 스타일
|
||||
.layoutSample {
|
||||
width: 1114px;
|
||||
height: 300px;
|
||||
background-color: yellow;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
&:focus {
|
||||
&::after {
|
||||
.focused(@boxShadow:22px, @borderRadius:8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
@import "../../../style/utils.module.less";
|
||||
|
||||
// 1920px 화면 기준 전체 구조 (절대 위치로 정확히 배치)
|
||||
.detailArea {
|
||||
width: 1920px; // 명시적으로 화면 크기 설정
|
||||
height: 100%;
|
||||
padding: 0; // 모든 패딩 제거
|
||||
margin: 0; // 모든 마진 제거
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative; // 절대 위치 기준점
|
||||
|
||||
// Spotlight 좌우 이동을 위한 설정 (WebOS TV 호환성)
|
||||
&.focused {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 1. Left Margin Section - 60px
|
||||
.leftMarginSection {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 2. Info Section - 645px
|
||||
.infoSection {
|
||||
width: 650px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
height: 339px;
|
||||
height: auto; /* 고정 높이 339px 제거 - 콘텐츠에 맞게 자동 조정 (Chromium 68 호환) */
|
||||
min-height: 339px; /* 최소 높이만 유지 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -696,6 +231,12 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
margin-left: 10px;
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favoriteBtnWrapper {
|
||||
@@ -705,19 +246,20 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
// 배경색과 라운드는 FavoriteBtn 내부에서 처리하므로 제거
|
||||
}
|
||||
|
||||
// 주문 전화 섹션 (callToOrderSection 참고)
|
||||
.callToOrderSection {
|
||||
align-self: stretch;
|
||||
width: 100%; /* align-self: stretch 대신 명시적 width 사용 (Chromium 68 호환) */
|
||||
height: 40px;
|
||||
padding: 17px 30px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 20px !important;
|
||||
.callToOrderText {
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
@@ -845,7 +387,7 @@
|
||||
|
||||
/* BUY NOW + ADD TO CART 버튼 스타일 */
|
||||
.buyNowCartContainer {
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding-top: 19px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -875,6 +417,7 @@
|
||||
.buyNowText {
|
||||
color: white !important;
|
||||
font-size: 25px !important;
|
||||
font-family: @baseFont !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 35px !important;
|
||||
text-align: center !important;
|
||||
@@ -890,6 +433,125 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일 쇼핑 섹션 (mobileSection 참고)
|
||||
.buttonContainer {
|
||||
width: 100%; /* align-self: stretch 대신 명시적 width 사용 (Chromium 68 호환) */
|
||||
padding-top: 19px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.buttonHasNoCart {
|
||||
padding-top: 0;
|
||||
}
|
||||
> * {
|
||||
margin-right: 6px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopByMobileButton {
|
||||
flex: 1 1 0% !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
max-width: none !important;
|
||||
height: 2.5rem !important;
|
||||
line-height: 2.5rem !important;
|
||||
background: rgba(68, 68, 68, 0.5) !important;
|
||||
border-radius: 0.25rem !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
&.shopByMobileOne {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
font-size: 25px !important;
|
||||
font-family: @baseFont !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 35px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
// 포커스 상태 추가
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED !important;
|
||||
outline: 2px solid @PRIMARY_COLOR_RED !important;
|
||||
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #4f172c;
|
||||
outline: 2px solid #4f172c;
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favoriteBtnWrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
// 배경색과 라운드는 FavoriteBtn 내부에서 처리하므로 제거
|
||||
}
|
||||
|
||||
// 액션 버튼들 (actionButtons 참고)
|
||||
.actionButtonsWrapper {
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
> * {
|
||||
margin-bottom: 5px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.productDetailsButton,
|
||||
.userReviewsButton,
|
||||
.youMayLikeButton {
|
||||
align-self: stretch;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.05); // 기본 회색 배경
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: @baseFont; // LG Smart 폰트 사용
|
||||
font-weight: 400; // Bold에서 Regular로 변경
|
||||
line-height: 35px;
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED; // 포커스시만 빨간색
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 4px solid #4f172c;
|
||||
background: #4f172c;
|
||||
}
|
||||
}
|
||||
|
||||
.addToCartButton {
|
||||
flex: 1 1 0% !important;
|
||||
width: auto !important;
|
||||
|
||||
@@ -0,0 +1,551 @@
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
@import "../../../style/utils.module.less";
|
||||
|
||||
// 1920px 화면 기준 전체 구조 (절대 위치로 정확히 배치)
|
||||
.detailArea {
|
||||
width: 1920px; // 명시적으로 화면 크기 설정
|
||||
height: 100%;
|
||||
padding: 0; // 모든 패딩 제거
|
||||
margin: 0; // 모든 마진 제거
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative; // 절대 위치 기준점
|
||||
|
||||
// Spotlight 좌우 이동을 위한 설정 (WebOS TV 호환성)
|
||||
&.focused {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 1. Left Margin Section - 60px
|
||||
.leftMarginSection {
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// 2. Info Section - 645px
|
||||
.infoSection {
|
||||
width: 650px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
height: auto; /* 고정 높이 339px 제거 - 콘텐츠에 맞게 자동 조정 (Chromium 68 호환) */
|
||||
min-height: 339px; /* 최소 높이만 유지 */
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Content Section - 1180px (1114px 콘텐츠 + 66px 스크롤바)
|
||||
.contentSection {
|
||||
width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// 4. Scroll Section - 66px (삭제 - contentSection에 포함)
|
||||
.scrollSection {
|
||||
display: none; // 사용하지 않음
|
||||
}
|
||||
|
||||
// 왼쪽 영역 컨테이너 (infoSection 내부)
|
||||
.leftInfoContainer {
|
||||
width: 635px; // 실제 콘텐츠 영역
|
||||
margin-right: 10px; // 우측 10px 간격
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 왼쪽 영역 내부 래퍼
|
||||
.leftInfoWrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
// gap 대신 margin 사용 (Chromium 68 호환성)
|
||||
> * {
|
||||
margin-bottom: 5px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 오른쪽 영역 컨테이너 (contentSection 내부)
|
||||
.rightContentContainer {
|
||||
width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
|
||||
height: @globalHeight - 136px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
// 스크롤러 래퍼 (contentSection 내부)
|
||||
.scrollerWrapper {
|
||||
width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바 (절대값)
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible; // hidden에서 visible로 변경
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative; // 자식 absolute 요소의 기준점
|
||||
|
||||
// 스크롤러 오버라이드 (1210px = 30px + content + 스크롤바)
|
||||
.scrollerOverride {
|
||||
width: 1210px; // 절대 크기 지정
|
||||
height: 100%;
|
||||
// 좌측 30px, 우측 66px(스크롤바) 패딩을 명시적으로 적용
|
||||
padding: 0 10px 0 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 스크롤바 너비를 6px로 명확하게 설정
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent; // 트랙 배경은 투명하게
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #9c9c9c; // 스크롤바 색상
|
||||
border-radius: 3px; // 스크롤바 둥근 모서리
|
||||
}
|
||||
|
||||
// 스크롤바 thumb에 hover 효과 적용
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
|
||||
// 내부 콘텐츠는 별도 너비 계산 없이 100%를 사용
|
||||
> div {
|
||||
width: 100%; // 부모의 패딩을 제외한 나머지 공간(1114px)을 모두 사용
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// 스크롤 콘텐츠 내부의 모든 섹션들 (패딩 제거 - scrollerOverride에서 처리함)
|
||||
#product-details-section {
|
||||
width: 1124px; // 부모 콘텐츠 영역 전체 사용
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
// ProductDetail.new 컴포넌트들
|
||||
> div[class*="rollingWrap"] {
|
||||
width: 100% !important; // 부모 영역 전체 사용
|
||||
max-width: none !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#product-description-section,
|
||||
#user-reviews-section,
|
||||
#you-may-also-like-section {
|
||||
width: 100%; // 부모 콘텐츠 영역 전체 사용
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
|
||||
> * {
|
||||
max-width: 100% !important; // 부모 영역 전체 사용
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 이미지들이 컨테이너를 넘지 않도록
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 상품 상세 영역 (마진 포함 크기)
|
||||
.productDetail {
|
||||
width: 1124px; // 1114px + 10px
|
||||
max-width: 1124px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch; // 자식 요소들이 전체 너비 사용하도록
|
||||
}
|
||||
|
||||
// 스크롤 마커
|
||||
.scrollMarker {
|
||||
height: 1px;
|
||||
visibility: hidden;
|
||||
}
|
||||
} // .scrollerWrapper
|
||||
} // .rightContentContainer
|
||||
|
||||
// (중복 제거됨) .scrollerWrapper는 .rightContentContainer 하위로 중첩 이동
|
||||
|
||||
// (중복 제거됨) 최상위 스크롤러/섹션 정의는 .scrollerWrapper 중첩 내부로 이동
|
||||
|
||||
// ProductDetailCard 스타일 참고 - 크기/간격만 적용
|
||||
|
||||
// 헤더 컨텐츠 영역 (태그, 별점)
|
||||
.headerContent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
margin-left: 10px;
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일 쇼핑 섹션 (mobileSection 참고)
|
||||
.buttonContainer {
|
||||
width: 100%; /* align-self: stretch 대신 명시적 width 사용 (Chromium 68 호환) */
|
||||
padding-top: 19px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.buttonHasNoCart {
|
||||
padding-top: 0;
|
||||
}
|
||||
> * {
|
||||
margin-right: 6px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopByMobileButton {
|
||||
flex: 1 1 0% !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
max-width: none !important;
|
||||
height: 2.5rem !important;
|
||||
line-height: 2.5rem !important;
|
||||
background: rgba(68, 68, 68, 0.5) !important;
|
||||
border-radius: 0.25rem !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
&.shopByMobileOne {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
font-size: 25px !important;
|
||||
font-family: @baseFont !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 35px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
// 포커스 상태 추가
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED !important;
|
||||
outline: 2px solid @PRIMARY_COLOR_RED !important;
|
||||
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #4f172c;
|
||||
outline: 2px solid #4f172c;
|
||||
.shopByMobileText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favoriteBtnWrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
// 배경색과 라운드는 FavoriteBtn 내부에서 처리하므로 제거
|
||||
}
|
||||
|
||||
// 주문 전화 섹션 (callToOrderSection 참고)
|
||||
.callToOrderSection {
|
||||
width: 100%; /* align-self: stretch 대신 명시적 width 사용 (Chromium 68 호환) */
|
||||
height: 40px;
|
||||
padding: 17px 30px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px !important;
|
||||
.callToOrderText {
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: @baseFont; // LG Smart 폰트 사용
|
||||
font-weight: 400; // Bold에서 Regular로 변경
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.phoneSection {
|
||||
padding: 0 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.phoneIconContainer {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.phoneIcon {
|
||||
width: 24.94px;
|
||||
height: 24.97px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
// 전화 아이콘 이미지 또는 CSS로 구현
|
||||
background-image: url("../../../../assets/images/icons/ic-gr-call-1.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.phoneNumber {
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: "LG Smart UI";
|
||||
font-weight: 700;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 액션 버튼들 (actionButtons 참고)
|
||||
.actionButtonsWrapper {
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
> * {
|
||||
margin-bottom: 5px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 모든 버튼 기본 스타일 (PRODUCT DETAILS는 빨간색 아님!)
|
||||
.productDetailsButton,
|
||||
.userReviewsButton,
|
||||
.youMayLikeButton {
|
||||
align-self: stretch;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.05); // 기본 회색 배경
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
color: #eaeaea;
|
||||
font-size: 25px;
|
||||
font-family: @baseFont; // LG Smart 폰트 사용
|
||||
font-weight: 400; // Bold에서 Regular로 변경
|
||||
line-height: 35px;
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED; // 포커스시만 빨간색
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 4px solid #4f172c;
|
||||
background: #4f172c;
|
||||
}
|
||||
}
|
||||
|
||||
.themeButton {
|
||||
align-self: stretch;
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED;
|
||||
}
|
||||
}
|
||||
|
||||
// ProductOverview 컨테이너 스타일 수정 (자식 요소에 맞게 크기 조정)
|
||||
[class*="ProductOverview"] {
|
||||
padding: 0 0 5px;
|
||||
// 내부 div (productInfoWrapper)
|
||||
> div {
|
||||
align-self: stretch;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
> div:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// LayoutSample 포커스 테스트용 스타일
|
||||
.layoutSample {
|
||||
width: 1114px;
|
||||
height: 300px;
|
||||
background-color: yellow;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
|
||||
&:focus {
|
||||
&::after {
|
||||
.focused(@boxShadow:22px, @borderRadius:8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BUY NOW + ADD TO CART 버튼 컨테이너 */
|
||||
.buyNowCartContainer {
|
||||
width: 100%;
|
||||
padding-top: 19px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BUY NOW 버튼 - SHOP BY MOBILE, PRODUCT DETAILS와 동일한 스타일 */
|
||||
.buyNowButton {
|
||||
flex: 1 1 0% !important;
|
||||
width: auto !important;
|
||||
height: 60px !important;
|
||||
background: rgba(68, 68, 68, 0.5) !important;
|
||||
border-radius: 6px !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
.buyNowText {
|
||||
color: white !important;
|
||||
font-size: 25px !important;
|
||||
font-family: @baseFont !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 35px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED !important;
|
||||
outline: 2px solid @PRIMARY_COLOR_RED !important;
|
||||
|
||||
.buyNowText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ADD TO CART 버튼 - SHOP BY MOBILE, PRODUCT DETAILS와 동일한 스타일 */
|
||||
.addToCartButton {
|
||||
flex: 1 1 0% !important;
|
||||
width: auto !important;
|
||||
height: 60px !important;
|
||||
background: rgba(68, 68, 68, 0.5) !important;
|
||||
border-radius: 6px !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
|
||||
.addToCartText {
|
||||
color: white !important;
|
||||
font-size: 25px !important;
|
||||
font-family: @baseFont !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 35px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: @PRIMARY_COLOR_RED !important;
|
||||
outline: 2px solid @PRIMARY_COLOR_RED !important;
|
||||
|
||||
.addToCartText {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user