optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[SHOPTIME-3738] Theme Detail / FHD 에서 썸네일을 선택 시 화면 스크롤 오류

Browse Source 
Changed files:
1. ThemeIndicator.jsx

Detail note:
원인: scroll 계산식의 해상도 미고려
대책: 해상도를 고려하여 scroll 계산식 수정
This commit is contained in:
younghoon100.park
2024-10-08 17:06:56 +09:00
parent a1faf3f02f
commit d715ac63d1
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
View File

@@ -18,7 +18,7 @@ import CustomImage from "../../../../components/CustomImage/CustomImage";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../hooks/useScrollTo"; import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config"; import { panel_names } from "../../../../utils/Config";
import { $L, scaleW } from "../../../../utils/helperMethods"; import { $L, scaleH, scaleW } from "../../../../utils/helperMethods";
import css from "./ThemeIndicator.module.less"; import css from "./ThemeIndicator.module.less";
import ThemeIndicatorArrow from "./ThemeIndicatorArrow"; import ThemeIndicatorArrow from "./ThemeIndicatorArrow";
@@ -28,7 +28,7 @@ const Container = SpotlightContainerDecorator(
); );
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
const IMAGE_WIDTH = scaleW(152); const IMAGE_HEIGHT = scaleH(152);
function ThemeIndicator({ function ThemeIndicator({
selectedIndex, selectedIndex,
@@ -55,7 +55,7 @@ function ThemeIndicator({
const topPanel = panels[panels.length - 1]; const topPanel = panels[panels.length - 1];
const { getScrollTo, scrollTop } = useScrollTo(); const { getScrollTo, scrollTop } = useScrollTo();
let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH; let imagePosition = IMAGE_HEIGHT * selectedIndex - IMAGE_HEIGHT;
const canPlayVideo = useMemo(() => { const canPlayVideo = useMemo(() => {
return themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0; return themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0;
@@ -176,7 +176,7 @@ function ThemeIndicator({
setSelectedIndex((prev) => prev - 1); setSelectedIndex((prev) => prev - 1);
setImageSelectedIndex(0); setImageSelectedIndex(0);
if (themeProductInfos.length - 1 !== selectedIndex) { if (themeProductInfos.length - 1 !== selectedIndex) {
scrollTop({ y: imagePosition - IMAGE_WIDTH, animate: true }); scrollTop({ y: imagePosition - IMAGE_HEIGHT, animate: true });
} }
}, [selectedIndex]); }, [selectedIndex]);
@@ -250,7 +250,7 @@ function ThemeIndicator({
return; return;
} }
if (selectedIndex >= 3) { if (selectedIndex >= 3) {
scrollTop({ y: 144 * selectedIndex }); scrollTop({ y: IMAGE_HEIGHT * selectedIndex });
} }
if ( if (
themeProductInfos && themeProductInfos &&