[components, HomePanel, CategoryPanel] TopButton 삭제

Detail Notes :

1. TopButton → TButton TYPES: topButton 대체
2. HomePanel, CategoryPanel의 TopButton 삭제
This commit is contained in:
younghoon100.park
2024-02-21 19:01:38 +09:00
parent 6ba5465976
commit 6490747f31
5 changed files with 13 additions and 99 deletions

View File

@@ -1,49 +0,0 @@
import React, { memo, useCallback, useState } from "react";
import Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";
import css from "./TopButton.module.less";
const SpottableComponent = Spottable("button");
export default memo(function TopButton({
className,
onTopButtonBlur,
onTopButtonClick,
onTopButtonFocus,
targetId,
...rest
}) {
const [_, setIsFocused] = useState(false);
const handleBlur = useCallback(() => {
setIsFocused(false);
onTopButtonBlur && onTopButtonBlur();
}, [onTopButtonBlur]);
const handleClick = useCallback(() => {
if (targetId) {
Spotlight.focus(targetId);
}
onTopButtonClick && onTopButtonClick();
}, [onTopButtonClick, targetId]);
const handleFocus = useCallback(() => {
setIsFocused(true);
onTopButtonFocus && onTopButtonFocus();
}, [onTopButtonFocus]);
return (
<div className={css.container}>
<SpottableComponent
className={className && className}
onBlur={handleBlur}
onClick={handleClick}
onFocus={handleFocus}
{...rest}
/>
</div>
);
});

View File

@@ -1,21 +0,0 @@
@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";
.container {
.flex();
width: 100%;
/* normal */
button {
.size(@w: 120px, @h: 120px);
margin: 60px 0;
background-image: url("../../../assets/images/btn/btn-top-nor@3x.png");
background-position: center;
background-size: contain;
/* focuesd */
&:focus {
background-image: url("../../../assets/images/btn/btn-top-foc@3x.png");
}
}
}

View File

@@ -1,6 +0,0 @@
{
"main": "TopButton.jsx",
"styles": [
"TopButton.module.less"
]
}

View File

@@ -12,7 +12,6 @@ import TBody from "../../components/TBody/TBody";
import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
import TDropDown from "../../components/TDropDown/TDropDown";
import THeader from "../../components/THeader/THeader";
import TopButton from "../../components/TopButton/TopButton";
import TPanel from "../../components/TPanel/TPanel";
import useScrollTo from "../../hooks/useScrollTo";
import { $L } from "../../utils/helperMethods";
@@ -160,7 +159,6 @@ export default function CategoryPanel() {
)}
{tab === 0 && <ShowContents />}
{tab === 1 && <ItemContents />}
<TopButton onTopButtonClick={handleTopButtonClick} />
</div>
</TBody>
</TPanel>

View File

@@ -1,25 +1,18 @@
import React, {
useEffect,
useState,
} from 'react';
import React, { useEffect, useState } from "react";
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from "react-redux";
import TBody from '../../components/TBody/TBody';
import TopButton from '../../components/TopButton/TopButton';
import TPanel from '../../components/TPanel/TPanel';
import useDebugKey from '../../hooks/useDebugKey';
import BestSeller from '../HomePanel/BestSeller/BestSeller';
import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
import HomeBannerTemplate2 from '../HomePanel/HomeBanner/HomeBannerTemplate2';
import HomeBannerTemplate3 from '../HomePanel/HomeBanner/HomeBannerTemplate3';
import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
import css from '../HomePanel/HomePanel.module.less';
import PopularShow from '../HomePanel/PopularShow/PopularShow';
import SubCategory from '../HomePanel/SubCategory/SubCategory';
import TBody from "../../components/TBody/TBody";
import TPanel from "../../components/TPanel/TPanel";
import useDebugKey from "../../hooks/useDebugKey";
import BestSeller from "../HomePanel/BestSeller/BestSeller";
import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
import css from "../HomePanel/HomePanel.module.less";
import PopularShow from "../HomePanel/PopularShow/PopularShow";
import SubCategory from "../HomePanel/SubCategory/SubCategory";
export default function HomePanel() {
const dispatch = useDispatch();
@@ -57,7 +50,6 @@ export default function HomePanel() {
<HomeOnSale />
<PopularShow />
<BestSeller />
<TopButton targetId={"top"} className={css.homeTopButton} />
</TBody>
</TPanel>
);