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

[TabLayout] Logo 출력 방식 변경

Browse Source 
Detail Notes :

1. 간헐적으로 LNB 열릴때 로고가 늘어짐 현상이 일어나는 것 확인함
- Logo를 Icon과 full 로고 2개 사용하던것을 full로고 하나로 통합
This commit is contained in:
jangheon Pyo
2024-03-20 10:23:38 +09:00
parent e4714cad9e
commit 429b6fbb02
3 changed files with 32 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
com.twin.app.shoptime/assets/images/icons/ic-lnb-shoptime-symbol@3x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

64
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -4,44 +4,37 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from 'react'; } from "react";
import classNames from 'classnames'; import classNames from "classnames";
import { import { useDispatch, useSelector } from "react-redux";
useDispatch,
useSelector,
} from 'react-redux';
//아이콘 //아이콘
import { Job } from '@enact/core/util'; import { Job } from "@enact/core/util";
//enact //enact
import Skinnable from '@enact/sandstone/Skinnable'; import Skinnable from "@enact/sandstone/Skinnable";
import Spotlight from '@enact/spotlight'; import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
from '@enact/spotlight/SpotlightContainerDecorator'; import { Cancelable } from "@enact/ui/Cancelable";
import { Cancelable } from '@enact/ui/Cancelable';
//이미지 //이미지
import shoptimeFullIcon import shoptimeFullIcon from "../../../assets/images/icons/ic-lnb-logo-shoptime@3x.png";
from '../../../assets/images/icons/ic-lnb-logo-shoptime@3x.png'; import { gnbOpened } from "../../actions/commonActions";
import shopTimeIcon import { resetPanels } from "../../actions/panelActions";
from '../../../assets/images/icons/ic-lnb-shoptime-symbol@3x.png'; import { panel_names } from "../../utils/Config";
import { gnbOpened } from '../../actions/commonActions'; import { SpotlightIds } from "../../utils/SpotlightIds";
import { resetPanels } from '../../actions/panelActions'; import TScroller from "../TScroller/TScroller";
import { panel_names } from '../../utils/Config'; import CategoryIcon from "./iconComponents/CategoryIcon";
import { SpotlightIds } from '../../utils/SpotlightIds'; import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon";
import TScroller from '../TScroller/TScroller'; import HomeIcon from "./iconComponents/HomeIcon";
import CategoryIcon from './iconComponents/CategoryIcon'; import HotPicksIcon from "./iconComponents/HotPicksIcon";
import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon'; import MyPageIcon from "./iconComponents/MyPageIcon";
import HomeIcon from './iconComponents/HomeIcon'; import OnSaleIcon from "./iconComponents/OnSaleIcon";
import HotPicksIcon from './iconComponents/HotPicksIcon'; import SearchIcon from "./iconComponents/SearchIcon";
import MyPageIcon from './iconComponents/MyPageIcon'; import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
import OnSaleIcon from './iconComponents/OnSaleIcon'; import TabItem from "./TabItem";
import SearchIcon from './iconComponents/SearchIcon'; import TabItemSub from "./TabItemSub";
import TrendingNowIcon from './iconComponents/TrendingNowIcon'; import css from "./TabLayout.module.less";
import TabItem from './TabItem';
import TabItemSub from './TabItemSub';
import css from './TabLayout.module.less';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveId: true }, { enterTo: "default-element", preserveId: true },
@@ -533,7 +526,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
onMouseLeave={onTabBlur(COLLABSED_MAIN)} onMouseLeave={onTabBlur(COLLABSED_MAIN)}
> >
<h1 className={css.logo}> <h1 className={css.logo}>
<img src={shopTimeIcon} alt="" /> <img src={shoptimeFullIcon} alt="" />
</h1> </h1>
{tabs.map((item, index) => ( {tabs.map((item, index) => (
<TabItem <TabItem
@@ -575,10 +568,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
onMouseLeave={onTabBlur(ACTIVATED_MAIN)} onMouseLeave={onTabBlur(ACTIVATED_MAIN)}
> >
<h1 className={css.logo}> <h1 className={css.logo}>
<img <img src={shoptimeFullIcon} alt="" />
src={mainExpanded ? shoptimeFullIcon : shopTimeIcon}
alt=""
/>
</h1> </h1>
{tabActivated && {tabActivated &&

11
com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
View File

@@ -37,22 +37,21 @@
z-index: 1; z-index: 1;
> .logo { > .logo {
width: 54px;
height: 54px;
overflow: hidden;
margin: 60px 24px 84px 42px; margin: 60px 24px 84px 42px;
> img { > img {
width: 54px; width: 234px;
height: 54px; height: 54px;
} }
// margin: -40px 24px 84px 42px;
} }
&.expanded { &.expanded {
width: 402px; width: 402px;
> .logo { > .logo {
> img { width: 234px;
width: 234px;
height: 54px;
}
} }
} }