[CategoryPanel] SpotlightIds 전역 변수화

This commit is contained in:
hyunwoo93.cha
2024-02-23 11:08:02 +09:00
parent a690bd8712
commit e9950cf217
5 changed files with 14 additions and 7 deletions

View File

@@ -1,4 +1,8 @@
export const SpotlightIds = {
TBODY: "tbody",
TITEM_CARD: "tItemCard",
// categoryPanel
CATEGORY_CONTENTS_BOX: "categoryContentsBox",
SHOW_PRODUCTS_BOX: "showProductsBox",
};

View File

@@ -8,6 +8,7 @@ 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";
@@ -85,7 +86,7 @@ export default function ItemContents() {
<Container className={css.container}>
{itemListDatas && itemListDatas.length > 0 && (
<TVirtualGridList
spotlightId="categoryContentsBox"
spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
dataSize={itemListDatas.length}
renderItem={renderItem}
itemWidth={324}

View File

@@ -8,6 +8,7 @@ import TItemCard, {
TYPES,
} from "../../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./ShowLists.module.less";
const Container = SpotlightContainerDecorator(
@@ -54,7 +55,7 @@ export default function ShowLists() {
<Container className={css.container}>
{showListDatas && showListDatas.length > 0 && (
<TVirtualGridList
spotlightId="categoryContentsBox"
spotlightId={SpotlightIds.CATEGORY_CONTENTS_BOX}
itemType={TYPES.videoShow}
itemRenderer={renderItem}
dataSize={showListDatas.length}

View File

@@ -9,6 +9,7 @@ import TItemCard from "../../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../../hooks/useScrollTo";
import { panel_names } from "../../../../../utils/Config";
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import css from "./ShowProductContents.module.less";
const Container = SpotlightContainerDecorator(
@@ -66,7 +67,7 @@ export default function ShowProductContents() {
{productInfos && productInfos.length > 0 && (
<TVirtualGridList
cbScrollTo={getScrollTo}
spotlightId="showProductBox"
spotlightId={SpotlightIds.SHOW_PRODUCTS_BOX}
className={css.grid}
itemRenderer={renderItem}
dataSize={productInfos.length}

View File

@@ -104,18 +104,18 @@ export default function CategoryPanel() {
useEffect(() => {
scrollTop({ animate: false });
setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
setContainerLastFocusedElement(null, ["showProductBox"]);
setContainerLastFocusedElement(null, ["categoryContentsBox"]);
setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]);
setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
Spotlight.focus("tab-0");
}, [panelInfos]);
useEffect(() => {
setContainerLastFocusedElement(null, ["showProductBox"]);
setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]);
}, [dropDownTab]);
const handleTopButtonClick = useCallback(() => {
scrollTop();
setContainerLastFocusedElement(null, ["categoryContentsBox"]);
setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
Spotlight.focus(`tab-${tab}`);
}, [scrollTop, tab]);