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

Merge branch 'develop' of gitlab.t-win.kr:ifheone/shoptime into develop

Browse Source
This commit is contained in:
sungmin.in
2024-02-21 12:59:39 +09:00
parent c7955c5f25 aa4617b24d
commit 5b10b91e07
7 changed files with 30 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
View File

@@ -40,6 +40,7 @@ export default memo(function TItemCard({
productName,
rank,
soldoutFlag,
nonPosition = false,
type = TYPES.vertical,
...rest
}) {
@@ -56,7 +57,7 @@ export default memo(function TItemCard({
return (
<SpottableComponent
{...rest}
className={classNames(css[type])}
className={classNames(css[type], nonPosition && css.nonPosition)}
onClick={() => handleClick(productId)}
spotlightId={"spotlightId-" + removeDotAndColon(productId)}
>
@@ -68,11 +69,6 @@ export default memo(function TItemCard({
)}
</div>
<div className={css.descWrap}>
{logo && logoDisplay && (
<div className={css.logo}>
<img src={logo} alt={productName} />
</div>
)}
<h3 className={css.title}>{productName}</h3>
<p>
{discountRate ? discountedPrice : originalPrice}

20
com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
View File

@@ -199,7 +199,14 @@
box-sizing: border-box;
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
&.nonPosition {
&:focus {
position: unset;
border: 4px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
border-radius: 12px;
}
}
.imageWrap {
> img {
.size(@w: 100%, @h: 288px);
@@ -214,17 +221,6 @@
.size(@w: 510px, @h: 61px);
display: flex;
.logo {
.size(@w: 60px, @h: 60px);
margin-right: 12px;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.title {
width: calc(100% - 72px);
.elip(@clamp: 2);

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

@@ -366,8 +366,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
);
const onFocus = (index) => {
setMainSelectedIndex(index);
// if (!cursorVisible) {
// mainSelectedIndex(index);
// }
if (showSubTab) {
setSecondDepthReduce((prev) => !prev);
}
@@ -375,8 +376,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
const handleNavigation = useCallback(
({ index, target }) => {
setMainSelectedIndex(index);
if (target) {
setMainSelectedIndex(index);
dispatch(resetPanels(target));
deActivateTab();
panelSwitching.current = true;
@@ -461,11 +463,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
}
});
}
}, [secondDepthReduce, showSubTab]);
}, [secondDepthReduce, showSubTab, mainSelectedIndex]);
if (!showTab) {
return null;
}
return (
<div className={classNames(css.tabLayoutWrap, !tabActivated && css.hide)}>
{/* collabsed Main */}

1
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.jsx
View File

@@ -29,7 +29,6 @@ export default function ShowLists() {
itemWidth={546}
itemHeight={438}
spacing={18}
logoDisplay
/>
)}
</Container>

3
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.jsx
View File

@@ -5,14 +5,13 @@ import TItemCard, {
} from "../../../../../components/TItemCard/TItemCard";
import css from "./ShowListsItem.module.less";
export default function ShowListsItem({ thumbnail, title, logo }) {
export default function ShowListsItem({ thumbnail, title }) {
return (
<TItemCard
className={css.container}
imageSource={thumbnail}
imageAlt={title}
productName={title}
logo={logo}
type={TYPES.videoShow}
/>
);

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

@@ -7,6 +7,7 @@ import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainer
import Spottable from "@enact/spotlight/Spottable";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard, { TYPES } from "../../../components/TItemCard/TItemCard";
import TScroller from "../../../components/TScroller/TScroller";
import { $L } from "../../../utils/helperMethods";
import css from "../PopularShow/PopularShow.module.less";
@@ -26,26 +27,18 @@ const PopularShow = ({ ...rest }) => {
<TScroller className={css.showList} direction="horizontal">
{topInfos &&
topInfos.map((item, index) => (
<SpottableComponent
className={classNames(
item.thumbnailUrl960 == item.thumbnailUrl
? css.listItemVertical
: css.listItem
)}
<TItemCard
key={item.showId}
{...rest}
>
<img src={item.thumbnailUrl960} className={css.itemImg} />
<div
className={classNames(
item.thumbnailUrl960 == item.thumbnailUrl
? css.verticalItem
: css.horizonItem
)}
>
<span className={css.showNm}>{item.showNm}</span>
</div>
</SpottableComponent>
imageSource={
item.thumbnailUrl !== item.thumbnailUrl960
? item.thumbnailUrl960
: item.thumbnailUrl
}
imageAlt={item.showNm}
productName={item.showNm}
nonPosition={true}
type={TYPES.videoShow}
/>
))}
<SpottableComponent className={css.addItem}></SpottableComponent>

46
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
View File

@@ -7,7 +7,6 @@
}
.showList {
overflow: unset;
--scroll-overscroll-translate-horizontal: translateX(-0.5px);
> div {
padding: 20px 60px 30px 60px;
display: flex;
@@ -41,51 +40,6 @@
}
}
.listItem {
position: relative;
.size(@w:546px,@h:438px);
padding: 14px;
background-color: @COLOR_WHITE;
border-radius: 12px;
.border-solid(@size:4px,@color:transparent);
font-weight: bold;
font-family: @baseFontBold;
flex: none;
&:focus {
border: 4px solid @PRIMARY_COLOR_RED;
box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
border-radius: 12px;
}
> img {
.size(@w:510px,@h:288px);
object-fit: contain;
}
.horizonItem {
.size(@w:510px,@h:61px);
margin-top: 38px;
color: #333;
font-size: 24px;
.elip(@clamp:2);
display: flex;
}
.logo {
display: inline-block;
.size(@w:60px,@h:60px);
margin-right: 12px;
.logoPath {
width: 100%;
height: auto;
}
}
.showNm {
display: inline-block;
color: #333;
font-size: 24px;
.elip(@clamp:2);
.size(@w:510px,@h:61px);
}
}
.listItemVertical {
display: flex;
flex: none;