From d715ac63d1a7389f4f1a32fbfe662a2450e300dc Mon Sep 17 00:00:00 2001
From: "younghoon100.park" <younghoon100.park@lgepartner.com>
Date: Tue, 8 Oct 2024 17:06:56 +0900
Subject: [PATCH] =?UTF-8?q?[SHOPTIME-3738]=20Theme=20Detail=20/=20FHD=20?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=8D=B8=EB=84=A4=EC=9D=BC=EC=9D=84=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EC=8B=9C=20=ED=99=94=EB=A9=B4=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed files:
1. ThemeIndicator.jsx

Detail note:
원인: scroll 계산식의 해상도 미고려
대책: 해상도를 고려하여 scroll 계산식 수정
---
 .../components/indicator/ThemeIndicator.jsx            | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
index e5733e5b..63a708ec 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
@@ -18,7 +18,7 @@ import CustomImage from "../../../../components/CustomImage/CustomImage";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../hooks/useScrollTo";
 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 ThemeIndicatorArrow from "./ThemeIndicatorArrow";
 
@@ -28,7 +28,7 @@ const Container = SpotlightContainerDecorator(
 );
 const SpottableComponent = Spottable("div");
 
-const IMAGE_WIDTH = scaleW(152);
+const IMAGE_HEIGHT = scaleH(152);
 
 function ThemeIndicator({
   selectedIndex,
@@ -55,7 +55,7 @@ function ThemeIndicator({
   const topPanel = panels[panels.length - 1];
   const { getScrollTo, scrollTop } = useScrollTo();
 
-  let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH;
+  let imagePosition = IMAGE_HEIGHT * selectedIndex - IMAGE_HEIGHT;
 
   const canPlayVideo = useMemo(() => {
     return themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0;
@@ -176,7 +176,7 @@ function ThemeIndicator({
     setSelectedIndex((prev) => prev - 1);
     setImageSelectedIndex(0);
     if (themeProductInfos.length - 1 !== selectedIndex) {
-      scrollTop({ y: imagePosition - IMAGE_WIDTH, animate: true });
+      scrollTop({ y: imagePosition - IMAGE_HEIGHT, animate: true });
     }
   }, [selectedIndex]);
 
@@ -250,7 +250,7 @@ function ThemeIndicator({
       return;
     }
     if (selectedIndex >= 3) {
-      scrollTop({ y: 144 * selectedIndex });
+      scrollTop({ y: IMAGE_HEIGHT * selectedIndex });
     }
     if (
       themeProductInfos &&