[TVirtualGridList] scaleW, scaleH 추가

com.twin.app.shoptime/src/components/TVirtualGridList/TVirtualGridList.jsx

@@ -1,13 +1,20 @@
-import React, { useCallback, useRef } from "react";
+import React, {
+  useCallback,
+  useRef,
+} from 'react';
 
-import classNames from "classnames";
-import { useSelector } from "react-redux";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 
-import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
 
-import AutoScrollArea, { POSITION } from "../AutoScrollArea/AutoScrollArea";
-import { getRelevantPositions } from "../TScroller/TScroller";
-import css from "./TVirtualGridList.module.less";
+import {
+  scaleH,
+  scaleW,
+} from '../../utils/helperMethods';
+import AutoScrollArea, { POSITION } from '../AutoScrollArea/AutoScrollArea';
+import { getRelevantPositions } from '../TScroller/TScroller';
+import css from './TVirtualGridList.module.less';
 
 export default function TVirtualGridList({
   dataSize,
@@ -111,10 +118,10 @@ export default function TVirtualGridList({
         noScrollByWheel={noScrollByWheel}
         scrollMode={scrollMode}
         itemSize={{
-          minWidth: itemWidth,
-          minHeight: itemHeight,
+          minWidth: scaleW(itemWidth),
+          minHeight: scaleH(itemHeight),
         }}
-        spacing={spacing}
+        spacing={scaleW(spacing)}
         cbScrollTo={_cbScrollTo}
         spotlightId={spotlightId}
         {...rest}

com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ItemContents/ItemContents.jsx

@@ -1,42 +1,54 @@
-import React, { useCallback } from "react";
+import React, { useCallback } from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 
-import { pushPanel } from "../../../../actions/panelActions";
-import TItemCard from "../../../../components/TItemCard/TItemCard";
-import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
-import { panel_names } from "../../../../utils/Config";
-import { SpotlightIds } from "../../../../utils/SpotlightIds";
-import NoResultsCategoryItems from "../NoResultsCategory/NoResultsCategoryItems";
-import css from "./ItemContents.module.less";
-import { scaleH, scaleW } from "../../../../utils/helperMethods";
+import { pushPanel } from '../../../../actions/panelActions';
+import TItemCard from '../../../../components/TItemCard/TItemCard';
+import TVirtualGridList
+  from '../../../../components/TVirtualGridList/TVirtualGridList';
+import { panel_names } from '../../../../utils/Config';
+import {
+  scaleH,
+  scaleW,
+} from '../../../../utils/helperMethods';
+import { SpotlightIds } from '../../../../utils/SpotlightIds';
+import NoResultsCategoryItems
+  from '../NoResultsCategory/NoResultsCategoryItems';
+import css from './ItemContents.module.less';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
 
-export default function ItemContents({onClick}) {
+export default function ItemContents({ onClick }) {
   const dispatch = useDispatch();
 
   const itemListDatas = useSelector(
     (state) => state.main.subCategoryData?.categoryItemInfos
   );
 
-  const _handleItemClick = useCallback((patnrId, prdtId)=>(ev) => {
-    onClick && onClick(ev);
-    dispatch(
-      pushPanel({
-        name: panel_names.DETAIL_PANEL,
-        panelInfo: {
-          patnrId: patnrId,
-          prdtId: prdtId,
-        },
-      })
-    );
-  },[onClick]);
+  const _handleItemClick = useCallback(
+    (patnrId, prdtId) => (ev) => {
+      onClick && onClick(ev);
+      dispatch(
+        pushPanel({
+          name: panel_names.DETAIL_PANEL,
+          panelInfo: {
+            patnrId: patnrId,
+            prdtId: prdtId,
+          },
+        })
+      );
+    },
+    [onClick]
+  );
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
@@ -80,9 +92,9 @@ export default function ItemContents({onClick}) {
             spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
             dataSize={itemListDatas.length}
             renderItem={renderItem}
-            itemWidth={scaleW(324)}
-            itemHeight={scaleH(438)}
-            spacing={scaleW(15)}
+            itemWidth={324}
+            itemHeight={438}
+            spacing={15}
             className={css.itemList}
           />
         )}