[상품 상세] 디테일 부분 포커스 및 스타일 수정

- nbcu seemoreproduct 버튼 포커스및 tiemcard내에 보더 제거
This commit is contained in:
junghoon86.park
2025-12-11 12:53:05 +09:00
parent a85710421c
commit cf27ed3846
3 changed files with 10 additions and 11 deletions

View File

@@ -29,7 +29,7 @@
> img { > img {
.size(@w: inherit, @h: inherit); .size(@w: inherit, @h: inherit);
object-fit: cover; object-fit: cover;
border: solid 1px #f0f0f0; // border: solid 1px #f0f0f0;
} }
// discount rate // discount rate
@@ -144,7 +144,7 @@
> img { > img {
.size(@w: 288px, @h: 288px); .size(@w: 288px, @h: 288px);
object-fit: contain; object-fit: contain;
border: solid 1px #f0f0f0; // border: solid 1px #f0f0f0;
} }
// discount rate // discount rate

View File

@@ -112,11 +112,12 @@ import {
} from '../ProductContentSection/ProductVideo/ProductVideo.v2.jsx'; } from '../ProductContentSection/ProductVideo/ProductVideo.v2.jsx';
import ProductVideo import ProductVideo
from '../ProductContentSection/ProductVideo/ProductVideo.v3'; from '../ProductContentSection/ProductVideo/ProductVideo.v3';
import SeeMoreProducts
from '../ProductContentSection/SeeMoreProducts/SeeMoreProducts';
import UserReviews from '../ProductContentSection/UserReviews/UserReviews'; import UserReviews from '../ProductContentSection/UserReviews/UserReviews';
// import ViewAllReviewsButton from '../ProductContentSection/UserReviews/ViewAllReviewsButton'; // import ViewAllReviewsButton from '../ProductContentSection/UserReviews/ViewAllReviewsButton';
import YouMayAlsoLike import YouMayAlsoLike
from '../ProductContentSection/YouMayAlsoLike/YouMayAlsoLike'; from '../ProductContentSection/YouMayAlsoLike/YouMayAlsoLike';
import SeeMoreProducts from '../ProductContentSection/SeeMoreProducts/SeeMoreProducts';
import QRCode from '../ProductInfoSection/QRCode/QRCode'; import QRCode from '../ProductInfoSection/QRCode/QRCode';
import ProductOverview from '../ProductOverview/ProductOverview'; import ProductOverview from '../ProductOverview/ProductOverview';
// CSS imports // CSS imports
@@ -1279,7 +1280,7 @@ export default function ProductAllSection({
// 버튼 클릭 시 스크롤만 처리 (데이터는 useEffect에서 처리) // 버튼 클릭 시 스크롤만 처리 (데이터는 useEffect에서 처리)
scrollToSection('scroll-marker-see-more-products'); scrollToSection('scroll-marker-see-more-products');
setTimeout(() => { setTimeout(() => {
Spotlight.focus("see-more-products-area"); Spotlight.focus("detail_seeMoreProducts_area");
}, 100); }, 100);
}, [scrollToSection]); }, [scrollToSection]);
@@ -1869,8 +1870,6 @@ export default function ProductAllSection({
activeButton === 'youmaylike' ? css.active : '' activeButton === 'youmaylike' ? css.active : ''
)} )}
onClick={handleYouMayAlsoLikeClick} onClick={handleYouMayAlsoLikeClick}
onFocus={() => handleButtonFocus('youmaylike')}
onBlur={handleButtonBlur}
> >
{$L('YOU MAY ALSO LIKE')} {$L('YOU MAY ALSO LIKE')}
</TButton> </TButton>
@@ -1879,12 +1878,10 @@ export default function ProductAllSection({
{(panelInfo?.patnrId === 21 || panelInfo?.patnrId === "21") && hasSeeMoreProducts && ( {(panelInfo?.patnrId === 21 || panelInfo?.patnrId === "21") && hasSeeMoreProducts && (
<TButton <TButton
className={classNames( className={classNames(
css.youMayLikeButton, css.seeMoreProductButton,
activeButton === 'seemoreproducts' ? css.active : '' activeButton === 'seemoreproducts' ? css.active : ''
)} )}
onClick={handleSeeMoreProductsClick} onClick={handleSeeMoreProductsClick}
onFocus={() => handleButtonFocus('seemoreproducts')}
onBlur={handleButtonBlur}
spotlightId="see-more-products-button" spotlightId="see-more-products-button"
> >
{$L('SEE MORE PRODUCTS')} {$L('SEE MORE PRODUCTS')}

View File

@@ -680,7 +680,8 @@
.productDetailsButton, .productDetailsButton,
.userReviewsButton, .userReviewsButton,
.youMayLikeButton { .youMayLikeButton,
.seeMoreProductButton {
align-self: stretch; align-self: stretch;
height: 60px; height: 60px;
background: rgba(255, 255, 255, 0.05); // 기본 회색 배경 background: rgba(255, 255, 255, 0.05); // 기본 회색 배경
@@ -708,7 +709,8 @@
.productDetailsButton, .productDetailsButton,
.userReviewsButton, .userReviewsButton,
.youMayLikeButton { .youMayLikeButton,
.seeMoreProductButton {
align-self: stretch; align-self: stretch;
height: 60px; height: 60px;
background: rgba(255, 255, 255, 0.05); // 기본 회색 배경 background: rgba(255, 255, 255, 0.05); // 기본 회색 배경