[HomePanel] 스타일 수정
- 서브카테고리 부분 스타일 수정
This commit is contained in:
@@ -5,13 +5,17 @@ import SpotlightContainerDecorator
|
|||||||
from '@enact/spotlight/SpotlightContainerDecorator';
|
from '@enact/spotlight/SpotlightContainerDecorator';
|
||||||
import ri from '@enact/ui/resolution';
|
import ri from '@enact/ui/resolution';
|
||||||
|
|
||||||
|
import {
|
||||||
|
scaleH,
|
||||||
|
scaleW,
|
||||||
|
} from '../../../../utils/helperMethods';
|
||||||
import CategoryNavItem from '../CategoryNav/CategoryNavItem/CategoryNavItem';
|
import CategoryNavItem from '../CategoryNav/CategoryNavItem/CategoryNavItem';
|
||||||
import css from './CategoryNav.module.less';
|
import css from './CategoryNav.module.less';
|
||||||
|
|
||||||
const LIST_ITEM_CONF = {
|
const LIST_ITEM_CONF = {
|
||||||
ITEM_WIDTH: 210 * 2,
|
ITEM_WIDTH: 210,
|
||||||
ITEM_HEIGHT: 236 * 2,
|
ITEM_HEIGHT: 235,
|
||||||
SAPCING: 30 * 2,
|
SAPCING: 30,
|
||||||
};
|
};
|
||||||
|
|
||||||
const Container = SpotlightContainerDecorator(
|
const Container = SpotlightContainerDecorator(
|
||||||
@@ -50,12 +54,12 @@ export default function CategoryNav({
|
|||||||
horizontalScrollbar="hidden"
|
horizontalScrollbar="hidden"
|
||||||
itemRenderer={renderItem}
|
itemRenderer={renderItem}
|
||||||
itemSize={{
|
itemSize={{
|
||||||
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
|
minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
|
||||||
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
|
minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
|
||||||
}}
|
}}
|
||||||
noScrollByWheel
|
noScrollByWheel
|
||||||
scrollMode="translate"
|
scrollMode="translate"
|
||||||
spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
|
spacing={scaleW(LIST_ITEM_CONF.SAPCING)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
@import "../../../../style/utils.module.less";
|
@import "../../../../style/utils.module.less";
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
.size(@w: 100%, @h:236px);
|
.size(@w: 100%, @h:235px);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: @BG_COLOR_01;
|
background-color: @BG_COLOR_01;
|
||||||
.font(@fontFamily: @baseFontBold, @fontSize: 28px);
|
.font(@fontFamily: @baseFontBold, @fontSize: 28px);
|
||||||
|
|||||||
@@ -16,8 +16,6 @@ import {
|
|||||||
import Spottable from '@enact/spotlight/Spottable';
|
import Spottable from '@enact/spotlight/Spottable';
|
||||||
|
|
||||||
import { getSubCategory } from '../../../actions/mainActions';
|
import { getSubCategory } from '../../../actions/mainActions';
|
||||||
import TBody from '../../../components/TBody/TBody';
|
|
||||||
import TGrid from '../../../components/TGrid/TGrid';
|
|
||||||
import {
|
import {
|
||||||
scaleH,
|
scaleH,
|
||||||
scaleW,
|
scaleW,
|
||||||
@@ -44,7 +42,7 @@ const SubCategory = () => {
|
|||||||
const categoryItemInfos = useSelector(
|
const categoryItemInfos = useSelector(
|
||||||
(state) => state.main.subCategoryData.categoryItemInfos
|
(state) => state.main.subCategoryData.categoryItemInfos
|
||||||
);
|
);
|
||||||
const [currentLgCatCd, setCurrentLgCatCd] = useState();
|
const [currentLgCatCd, setCurrentLgCatCd] = useState(null);
|
||||||
|
|
||||||
const handleCategoryNav = (lgCatCd) => {
|
const handleCategoryNav = (lgCatCd) => {
|
||||||
if (currentLgCatCd === lgCatCd) {
|
if (currentLgCatCd === lgCatCd) {
|
||||||
@@ -58,6 +56,7 @@ const SubCategory = () => {
|
|||||||
if (categoryInfos && !currentLgCatCd) {
|
if (categoryInfos && !currentLgCatCd) {
|
||||||
const initialLgCatCd = categoryInfos[0].lgCatCd;
|
const initialLgCatCd = categoryInfos[0].lgCatCd;
|
||||||
setCurrentLgCatCd(initialLgCatCd);
|
setCurrentLgCatCd(initialLgCatCd);
|
||||||
|
console.log("###ttt", currentLgCatCd);
|
||||||
}
|
}
|
||||||
}, [categoryInfos]);
|
}, [categoryInfos]);
|
||||||
|
|
||||||
@@ -66,8 +65,7 @@ const SubCategory = () => {
|
|||||||
dispatch(
|
dispatch(
|
||||||
getSubCategory({
|
getSubCategory({
|
||||||
lgCatCd: currentLgCatCd,
|
lgCatCd: currentLgCatCd,
|
||||||
patnrIdList: null,
|
pageSize: "10",
|
||||||
pageSize: 10,
|
|
||||||
tabType: "CAT00102",
|
tabType: "CAT00102",
|
||||||
filterType: "CAT00202",
|
filterType: "CAT00202",
|
||||||
})
|
})
|
||||||
@@ -118,7 +116,7 @@ const SubCategory = () => {
|
|||||||
minWidth: scaleW(324),
|
minWidth: scaleW(324),
|
||||||
minHeight: scaleH(438),
|
minHeight: scaleH(438),
|
||||||
}}
|
}}
|
||||||
spacing={scaleW(0)}
|
spacing={scaleW(4)}
|
||||||
noScrollByWheel
|
noScrollByWheel
|
||||||
scrollMode="translate"
|
scrollMode="translate"
|
||||||
className={css.grid}
|
className={css.grid}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
height: 478px;
|
height: 458px;
|
||||||
overflow: unset;
|
overflow: unset;
|
||||||
> div {
|
> div {
|
||||||
overflow: unset !important;
|
overflow: unset !important;
|
||||||
|
|||||||
Reference in New Issue
Block a user