optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

홈패널 마지막부분 여백값 관련 수정

Browse Source
This commit is contained in:
junghoon86.park
2024-05-10 15:46:10 +09:00
parent 6f44e45152
commit 02756e6cbe
4 changed files with 35 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -14,7 +14,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { $L, scaleW } from "../../../utils/helperMethods";
import css from "./BestSeller.module.less";
const SpottableComponent = Spottable("div");
@@ -94,13 +94,10 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
let gap = 18;
let itemWidth = 324;
let moreItemWidth = 198;
let containerBoxWidth = 1740;
// const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
// item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
let gap = scaleW(18);
let itemWidth = scaleW(324);
let moreItemWidth = scaleW(198);
let containerBoxWidth = scaleW(1740);
let itemLength = bestSellerDatas?.length;
const x =
@@ -152,7 +149,7 @@ const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
onBlur={() => handleBlur(itemIndex)}
onClick={() => handleCardClick(patnrId, prdtId)}
offerInfo={offerInfo}
spotlightId={'bestsellerItem'+itemIndex}
spotlightId={"bestsellerItem" + itemIndex}
/>
)
)}

46
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
View File

@@ -9,7 +9,7 @@ import TScroller from "../../../components/TScroller/TScroller";
import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
import { $L } from "../../../utils/helperMethods";
import { $L, scaleW } from "../../../utils/helperMethods";
import css from "./HomeOnSale.module.less";
import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem";
@@ -30,12 +30,30 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
scrollLeft,
true
);
const homeOnSaleInfosLength = homeOnSaleInfos?.length;
const handleScrollRight = () => {
let gap = scaleW(18);
let itemWidth = scaleW(630);
let containerBoxWidth = scaleW(1740);
const x = (itemWidth + gap) * homeOnSaleInfosLength - containerBoxWidth;
setTimeout(() => {
scrollLeft({ x, animate: true });
});
};
const handleFocus = useCallback(
(index) => {
if (index === 0) {
handleScrollReset();
}
if (index === homeOnSaleInfosLength - 1) {
handleScrollRight();
}
if (cursorVisible) {
return;
}
@@ -54,22 +72,7 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
handleStopScrolling();
}
}, []);
const renderItem = useCallback(
({ index, ...rest }) => {
const itemData = homeOnSaleInfos[index];
return (
<HomeOnSaleItem
{...rest}
key={index}
homeOnSaleInfos={homeOnSaleInfos}
itemData={itemData}
onFocus={() => handleFocus(index)}
/>
);
},
[homeOnSaleInfos]
);
const orderStyle = useMemo(() => ({ order: order }), [order]);
return (
@@ -81,17 +84,6 @@ const HomeOnSale = ({ order, scrollTopBody, ...rest }) => {
data-title-index="homeOnSale"
/>
<div className={css.onSaleItem}>
{/* {homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
<TVirtualGridList
className={css.grid}
dataSize={homeOnSaleInfos.length}
direction="horizontal"
renderItem={renderItem}
itemHeight={300}
itemWidth={630}
spacing={18}
/>
)} */}
<TScroller
cbScrollTo={getScrollTo}
direction="horizontal"

13
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
View File

@@ -17,7 +17,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { $L, scaleW } from "../../../utils/helperMethods";
import css from "../PopularShow/PopularShow.module.less";
const SpottableComponent = Spottable("div");
@@ -93,13 +93,10 @@ const PopularShow = ({ homeChk = true, order, scrollTopBody, ...rest }) => {
const orderStyle = useMemo(() => ({ order: order }), [order]);
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
let gap = 18;
let itemWidth = 546;
let moreItemWidth = 198;
let containerBoxWidth = 1740;
// const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
// item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
let gap = scaleW(18);
let itemWidth = scaleW(546);
let moreItemWidth = scaleW(198);
let containerBoxWidth = scaleW(1740);
let itemLength = topInfos?.length;
const x =

12
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -22,6 +22,7 @@ import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../utils/Config";
import { scaleW } from "../../../utils/helperMethods";
import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
import css from "../../HomePanel/SubCategory/SubCategory.module.less";
@@ -175,13 +176,10 @@ const SubCategory = ({ order, scrollTopBody, catCd }) => {
const handleScrollRight = (e) => {
const container = e.currentTarget?.parentNode;
let gap = 18;
let itemWidth = 324;
let moreItemWidth = 198;
let containerBoxWidth = 1740;
// const maxVisibleCount = Math.floor((containerWidth - padding) / (itemWidth + gap));
// item의 배열 길이가 5이상 일때 작동해야 함, if maxVisibleCount보다 아이템의 갯수가 작다면 return
let gap = scaleW(18);
let itemWidth = scaleW(324);
let moreItemWidth = scaleW(198);
let containerBoxWidth = scaleW(1740);
let itemLength = categoryItemInfos?.length;
const x =