[HomePanel] 파일구조 변경 및 에러 수정

- 파일구조변경.
- PopularShow 부분 의존성 배열 추가.

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -11,8 +11,8 @@ import ri from "@enact/ui/resolution";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TGrid from "../../../components/TGrid/TGrid";
 import { $L } from "../../../utils/helperMethods";
-import BestSellerItem from "../BestSellerItem/BestSellerItem";
 import css from "./BestSeller.module.less";
+import BestSellerItem from "./BestSellerItem/BestSellerItem";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused", leaveFor: { left: "", right: "" } },

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import TItemCard from "../../../components/TItemCard/TItemCard";
+import TItemCard from "../../../../components/TItemCard/TItemCard";
 import css from "../BestSellerItem/BestSellerItem.module.less";
 
 export default function ({ bestSellerData, itemData, ...rest }) {

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.module.less

@@ -1,5 +1,5 @@
-@import "../../../style/CommonStyle.module.less";
+@import "../../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
+@import "../../../../style/utils.module.less";
 
 /* vertical type (Thumbnail) */
 .vertical {

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx

@@ -8,8 +8,8 @@ import ri from "@enact/ui/resolution";
 
 import TGrid from "../../../components/TGrid/TGrid";
 import { $L } from "../../../utils/helperMethods";
-import HomeOnSaleItem from "../HomeOnSaleItem/HomeOnSaleItem";
 import css from "./HomeOnSale.module.less";
+import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
 
 const SALE_ITEM_CONF = {
   ITEM_WIDTH: 630 * 2,

com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less

@@ -1,4 +1,4 @@
-@import "../../../style/CommonStyle.module.less";
+@import "../../../../style/CommonStyle.module.less";
 .onSaleItemList {
   width: 630px;
   height: 300px;

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
@@ -7,11 +7,10 @@ import { VirtualGridList } from "@enact/sandstone/VirtualList";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import ri from "@enact/ui/resolution";
 
-import { getTop20Show } from "../../../actions/mainActions";
 import TGrid from "../../../components/TGrid/TGrid";
 import { $L } from "../../../utils/helperMethods";
 import css from "../PopularShow/PopularShow.module.less";
-import PopularShowItem from "../PopularShowItem/PopularShowItem";
+import PopularShowItem from "./PopularShowItem/PopularShowItem";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -21,12 +20,16 @@ const Container = SpotlightContainerDecorator(
 const PopularShow = ({ ...rest }) => {
   const dispatch = useDispatch();
   const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
-  const renderItem = useCallback(({ index, ...rest }) => {
+
-    const itemData = topInfos[index];
+  const renderItem = useCallback(
-    return (
+    ({ index, ...rest }) => {
-      <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
+      const itemData = topInfos[index];
-    );
+      return (
-  }, []);
+        <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
+      );
+    },
+    [topInfos]
+  );
 
   return (
     <Container className={css.popularShow}>

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less

@@ -1,4 +1,4 @@
-@import "../../../style/CommonStyle.module.less";
+@import "../../../../style/CommonStyle.module.less";
 .listItem {
   width: 546px;
   height: 438px;

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -1,28 +1,19 @@
-import React, {
+import React, { useCallback, useEffect, useState } from "react";
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
 
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
-import VirtualGridList from '@enact/sandstone/VirtualList';
+import VirtualGridList from "@enact/sandstone/VirtualList";
-import {
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-  SpotlightContainerDecorator,
+import Spottable from "@enact/spotlight/Spottable";
-} from '@enact/spotlight/SpotlightContainerDecorator';
+import ri from "@enact/ui/resolution";
-import Spottable from '@enact/spotlight/Spottable';
-import ri from '@enact/ui/resolution';
 
-import { getSubCategory } from '../../../actions/mainActions';
+import { getSubCategory } from "../../../actions/mainActions";
-import { getOnSaleInfo } from '../../../actions/onSaleActions';
+import { getOnSaleInfo } from "../../../actions/onSaleActions";
-import TGrid from '../../../components/TGrid/TGrid';
+import TGrid from "../../../components/TGrid/TGrid";
-import TItemCard from '../../../components/TItemCard/TItemCard';
+import TItemCard from "../../../components/TItemCard/TItemCard";
-import css from '../../HomePanel/SubCategory/SubCategory.module.less';
+import css from "../../HomePanel/SubCategory/SubCategory.module.less";
-import CategoryNav from '../../OnSalePanel/CategoryNav/CategoryNav';
+import CategoryNav from "../../OnSalePanel/CategoryNav/CategoryNav";
-import SubCategoryItem from '../SubCategoryItem/SubCategoryItem';
+import SubCategoryItem from "./SubCategoryItem/SubCategoryItem";
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.module.less

@@ -1,5 +1,5 @@
-@import "../../../style/CommonStyle.module.less";
+@import "../../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
+@import "../../../../style/utils.module.less";
 .vertical {
   /* normal */
   position: relative;