[상품 상세]

- 탑버튼 추가.
 - 높이값 정상적으로 체크하지못하는 부분에 대한 처리.
This commit is contained in:
junghoon86.park
2025-11-24 20:45:27 +09:00
parent 7da55ea1ae
commit f9c23afd9e
2 changed files with 38 additions and 5 deletions

View File

@@ -52,7 +52,7 @@ import {
} from '../../../actions/toastActions';
import CustomImage from '../../../components/CustomImage/CustomImage.jsx';
// ProductInfoSection imports
import TButton from '../../../components/TButton/TButton';
import TButton, { TYPES } from '../../../components/TButton/TButton';
import TPopUp from '../../../components/TPopUp/TPopUp.jsx';
import TVirtualGridList
from '../../../components/TVirtualGridList/TVirtualGridList.jsx';
@@ -286,6 +286,20 @@ export default function ProductAllSection({
const [couponCodes, setCouponCodes] = useState('');
const [focused, setFocused] = useState(false);
//topbutton
const handleTopButtonClick = useCallback(() => {
const container = scrollContainerRef?.current;
if (!container) return;
if (typeof container.scrollTo === 'function') {
scrollTop({ y: 0, animate: true });
const timeOut = setTimeout(()=>{
Spotlight.focus("product-detail-container-0");
},100);
}
}, [
scrollTop
]);
useEffect(() => {
dispatch(
getProductCouponSearch({
@@ -1102,7 +1116,6 @@ export default function ProductAllSection({
(e) => {
const currentScrollTop = e.scrollTop;
scrollPositionRef.current = currentScrollTop;
if (documentHeight) {
const isAtBottom =
currentScrollTop + 944 >=
@@ -1152,7 +1165,7 @@ export default function ProductAllSection({
(descriptionRef.current?.scrollHeight || 0) +
(reviewRef.current?.scrollHeight || 0)
);
}, [hasReviews, hasYouMayAlsoLike]);
}, [productDetailRef.current, descriptionRef.current, reviewRef.current]);
// 스크롤 위치에 따른 MediaPanel 제어 (비디오 재생 중에는 자동 제어 안함 - unmount 시에만 정리)
// useEffect(() => {
@@ -1671,6 +1684,18 @@ export default function ProductAllSection({
</div>
)}
</div>
<div className={css.topButtonBox}>
<TButton
className={css.tButton}
onClick={handleTopButtonClick}
size={null}
type={TYPES.topButton}
spotlightId={'detail-top-btn'}
data-wheel-point={true}
aria-label="Move to Top, Button"
/>
</div>
</TScrollerDetail>
</div>
</ContentContainer>

View File

@@ -961,3 +961,11 @@
}
}
}
.topButtonBox {
width:100%;
.tButton {
&:focus {
background-color: @PRIMARY_COLOR_RED;
}
}
}