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

scrollBottom 추가 및 y값 파라미터 추가 등

Browse Source
This commit is contained in:
고동영
2024-03-20 10:04:55 +09:00
parent 2c11f4b257
commit 22fabbd464
11 changed files with 93 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/components/TButton/TButton.module.less
View File

@@ -43,7 +43,7 @@
max-width: 650px; max-width: 650px;
letter-spacing: -0.75px; letter-spacing: -0.75px;
} }
&.extraLarge { &.extra {
min-width: 350px; min-width: 350px;
max-width: 900px; max-width: 900px;
} }

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

@@ -413,7 +413,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
if (index === 3) { if (index === 3) {
dispatch(resetPanels()); dispatch(resetPanels());
deActivateTab(); deActivateTab();
Spotlight.focus(SpotlightIds.TBODY); Spotlight.focus(SpotlightIds.TPANEL);
return; return;
} }
if (target) { if (target) {
@@ -425,7 +425,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
setMainExpanded(true); setMainExpanded(true);
} }
}, },
[cursorVisible, deActivateTab, dispatch, panels] [cursorVisible, deActivateTab, dispatch, selectedTitle]
); );
const onClickSubItem = useCallback( const onClickSubItem = useCallback(

18
com.twin.app.shoptime/src/hooks/useScrollTo.js
View File

@@ -1,11 +1,15 @@
import React, { useCallback, useEffect, useRef } from "react"; import React, {
useCallback,
useEffect,
useRef,
} from 'react';
export default function useScrollTo() { export default function useScrollTo() {
const scrollTo = useRef(); const scrollTo = useRef();
const scrollTop = useCallback(({ animate = true } = {}) => { const scrollTop = useCallback(({ scaleX = 0, animate = true } = {}) => {
if (scrollTo && scrollTo.current) { if (scrollTo && scrollTo.current) {
scrollTo.current({ position: { y: 0 }, animate: animate }); scrollTo.current({ position: { y: scaleX }, animate: animate });
} }
}, []); }, []);
@@ -15,6 +19,12 @@ export default function useScrollTo() {
} }
}, []); }, []);
const scrollBottom = useCallback(({ scaleY = 0, animate } = {}) => {
if (scrollTo && scrollTo.current) {
scrollTo.current({ position: { y: scaleY }, animate: animate });
}
}, []);
const getScrollTo = useCallback((cbScrollTo) => { const getScrollTo = useCallback((cbScrollTo) => {
scrollTo.current = cbScrollTo; scrollTo.current = cbScrollTo;
}, []); }, []);
@@ -23,5 +33,5 @@ export default function useScrollTo() {
scrollTop(); scrollTop();
}, []); }, []);
return { getScrollTo, scrollLeft, scrollTop }; return { getScrollTo, scrollLeft, scrollTop, scrollBottom };
} }

4
com.twin.app.shoptime/src/reducers/homeReducer.js
View File

@@ -1,4 +1,4 @@
import { types } from "../actions/actionTypes"; import { types } from '../actions/actionTypes';
const initialState = { const initialState = {
termsData: {}, termsData: {},
@@ -56,7 +56,7 @@ export const homeReducer = (state = initialState, action) => {
return { return {
...state, ...state,
themeCurationHotelDetailData: hotelInfos, themeCurationHotelDetailData: hotelInfos,
HotelData: action.payload, hotelData: action.payload,
}; };
} }

3
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -37,6 +37,7 @@ export default function ItemDetail() {
const hotelInfos = useSelector( const hotelInfos = useSelector(
(state) => state.home.themeCurationHotelDetailData (state) => state.home.themeCurationHotelDetailData
); );
const hotelData = useSelector((state) => state.home.hotelData);
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -99,7 +100,7 @@ export default function ItemDetail() {
className={css.header} className={css.header}
title={ title={
(selectedPrdtId && productData?.prdtNm) || (selectedPrdtId && productData?.prdtNm) ||
(selectedCurationId && hotelInfos[selectedIndex]?.hotelNm) (selectedCurationId && hotelData?.hotelInfo.curationNm)
} }
onBackButton onBackButton
onClick={onClick} onClick={onClick}

20
com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx
View File

@@ -7,7 +7,6 @@ import React, {
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import logo from '../../../../assets/images/icons/ic-partners-netflix@3x.png';
import TButton from '../../../components/TButton/TButton'; import TButton from '../../../components/TButton/TButton';
import TQRCode from '../../../components/TQRCode/TQRCode'; import TQRCode from '../../../components/TQRCode/TQRCode';
import { $L } from '../../../utils/helperMethods'; import { $L } from '../../../utils/helperMethods';
@@ -22,9 +21,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
const hotelInfos = useSelector( const hotelInfos = useSelector(
(state) => state.home.themeCurationHotelDetailData (state) => state.home.themeCurationHotelDetailData
); );
const HotelData = useSelector((state) => state.home.HotelData); const hotelData = useSelector((state) => state.home.hotelData);
console.log("#hotelInfos", HotelData);
useEffect(() => { useEffect(() => {
let label = ""; let label = "";
@@ -48,7 +45,8 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
return ( return (
<div className={css.optionContainer}> <div className={css.optionContainer}>
<div className={css.topLayer}> <div className={css.topLayer}>
<img src={HotelData?.hotelInfo.patncLogoPath} alt="patncLogoPath" /> <img src={hotelData?.hotelInfo.patncLogoPath} alt="" />
<div className={css.rating}> <div className={css.rating}>
<StarRating <StarRating
rating={hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd} rating={hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd}
@@ -56,13 +54,15 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
<span className={css.line} /> <div>{label}</div> <span className={css.line} /> <div>{label}</div>
</div> </div>
</div> </div>
<div className={css.title}> <div className={css.title}>{hotelInfos[selectedIndex]?.hotelNm}</div>
{"HOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTEL"}
</div>
<div className={css.amenities}></div> <div className={css.amenities}></div>
<div className={css.bottomLayer}> <div className={css.bottomLayer}>
<div> <div>
<div className={css.today}>{$L("Today, 1 Night(s) 2 Adult(s)")}</div> <div className={css.today}>
{$L(
`Today, ${hotelInfos[selectedIndex]?.hotelDetailInfo.nights} Night(s) 2 Adult(s)`
)}
</div>
<div className={css.roomType}> <div className={css.roomType}>
{hotelInfos[selectedIndex]?.hotelDetailInfo.roomType} {hotelInfos[selectedIndex]?.hotelDetailInfo.roomType}
</div> </div>
@@ -85,7 +85,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
</div> </div>
</div> </div>
</div> </div>
<TButton className={css.tbutton} type="extraLarge"> <TButton className={css.tbutton} size="extra">
{$L("SEE MORE")} {$L("SEE MORE")}
</TButton> </TButton>
</div> </div>

2
com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less
View File

@@ -93,7 +93,7 @@
border-radius: 6px; border-radius: 6px;
border: solid 1px #dadada; border: solid 1px #dadada;
background-image: linear-gradient(to top, #f5f5f5, #fff); background-image: linear-gradient(to top, #f5f5f5, #fff);
margin: 5px 0 0 6px; margin: 8px 0 0 6px;
padding: 16px 16px 16px 16px; padding: 16px 16px 16px 16px;
} }

22
com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx
View File

@@ -30,17 +30,19 @@ export default function OptionPartnerPrice({
installmentMonths, installmentMonths,
} = productInfos; } = productInfos;
console.log("#offerInfo", offerInfo);
const { discountRate } = usePriceInfo(priceInfo) || {}; const { discountRate } = usePriceInfo(priceInfo) || {};
const TYPE_CASE = { const TYPE_CASE = {
case1: price2 && !price3 && !price5, case1: price2 && !price3 && !price5 && !offerInfo,
case2: price2 && price3 && !price5, case2: price2 && price3 && !price5 && !offerInfo,
case3: price2 && price3 && price5, case3: price2 && price3 && price5 && !offerInfo,
case4: price2 && !price3 && price5, case4: price2 && !price3 && price5 && !offerInfo,
case5: price2 && !price3 && !price5, case5: price2 && !price3 && !price5 && !offerInfo,
case6: price2 && price3 && !price5, case6: price2 && price3 && !price5 && !offerInfo,
case7: price2 && price3 && price5, case7: price2 && price3 && price5 && !offerInfo,
case8: price2 && !price3 && price5, case8: price2 && !price3 && price5 && !offerInfo,
case9: !price2 && !price3 && !price5 && offerInfo, case9: offerInfo,
}; };
const renderPriceItem = useCallback(() => { const renderPriceItem = useCallback(() => {
@@ -68,7 +70,7 @@ export default function OptionPartnerPrice({
if (TYPE_CASE.case9) { if (TYPE_CASE.case9) {
return ( return (
<div className={css.wrapper}> <div className={css.wrapper}>
<span className={css.name}>{$L("Call for info")}</span> <span className={css.offerInfo}>{$L("Call for info")}</span>
</div> </div>
); );
} }

5
com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less
View File

@@ -53,6 +53,11 @@
margin-top: 6px; margin-top: 6px;
} }
} }
.offerInfo {
font-size: 60px;
font-weight: bold;
color: #808080;
}
.discountedPrc { .discountedPrc {
font-size: 24px; font-size: 24px;
color: @COLOR_GRAY03; color: @COLOR_GRAY03;

44
com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx
View File

@@ -1,21 +1,30 @@
import React, { useCallback, useEffect, useState } from "react"; import React, {
useCallback,
useEffect,
useState,
} from 'react';
import classNames from "classnames"; import classNames from 'classnames';
import { useDispatch, useSelector } from "react-redux"; import {
useDispatch,
useSelector,
} from 'react-redux';
import { Job } from "@enact/core/util"; import { Job } from '@enact/core/util';
import Spotlight from "@enact/spotlight"; import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import SpotlightContainerDecorator
import Spottable from "@enact/spotlight/Spottable"; from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { getMainYouMayLike } from "../../../actions/mainActions"; import { getMainYouMayLike } from '../../../actions/mainActions';
import { pushPanel } from "../../../actions/panelActions"; import { pushPanel } from '../../../actions/panelActions';
import TItemCard from "../../../components/TItemCard/TItemCard"; import TItemCard from '../../../components/TItemCard/TItemCard';
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; import TVirtualGridList
import { panel_names } from "../../../utils/Config"; from '../../../components/TVirtualGridList/TVirtualGridList';
import { $L } from "../../../utils/helperMethods"; import { panel_names } from '../../../utils/Config';
import { SpotlightIds } from "../../../utils/SpotlightIds"; import { $L } from '../../../utils/helperMethods';
import css from "./YouMayLike.module.less"; import { SpotlightIds } from '../../../utils/SpotlightIds';
import css from './YouMayLike.module.less';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveId: true }, { enterTo: "default-element", preserveId: true },
@@ -31,6 +40,8 @@ export default function YouMayLike() {
const youmaylikeData = useSelector((state) => state.main.youmaylikeData); const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
const data = useSelector((state) => state.main.productData); const data = useSelector((state) => state.main.productData);
console.log("#youmaylike", youmaylikeData);
useEffect(() => { useEffect(() => {
dispatch( dispatch(
getMainYouMayLike({ getMainYouMayLike({
@@ -70,7 +81,7 @@ export default function YouMayLike() {
const renderItem = useCallback( const renderItem = useCallback(
({ index, ...rest }) => { ({ index, ...rest }) => {
const { imgUrl, patnrId, prdtId, prdtNm, priceInfo } = const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } =
youmaylikeData[index]; youmaylikeData[index];
const handleItemClick = () => { const handleItemClick = () => {
@@ -93,6 +104,7 @@ export default function YouMayLike() {
imageAlt={prdtId} imageAlt={prdtId}
imageSource={imgUrl} imageSource={imgUrl}
priceInfo={priceInfo} priceInfo={priceInfo}
offerInfo={offerInfo}
productName={prdtNm} productName={prdtNm}
onClick={handleItemClick} onClick={handleItemClick}
/> />

18
com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx
View File

@@ -32,13 +32,14 @@ export default function ThemeHotelIndicator({
}) { }) {
const [selectedImage, setSelectedImage] = useState(null); const [selectedImage, setSelectedImage] = useState(null);
const [imageSelectedIndex, setImageSelectedIndex] = useState(0); const [imageSelectedIndex, setImageSelectedIndex] = useState(0);
const containerRef = useRef(null);
const hotelInfos = useSelector( const hotelInfos = useSelector(
(state) => state.home.themeCurationHotelDetailData (state) => state.home.themeCurationHotelDetailData
); );
const { cursorVisible } = useSelector((state) => state.common.appStatus); const { cursorVisible } = useSelector((state) => state.common.appStatus);
const imageLength = hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls.length; const imageLength = hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls.length;
const { getScrollTo, scrollBottom, scrollTop } = useScrollTo();
useEffect(() => { useEffect(() => {
const image = const image =
hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls[imageSelectedIndex]; hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls[imageSelectedIndex];
@@ -60,12 +61,21 @@ export default function ThemeHotelIndicator({
const handleUpClick = () => { const handleUpClick = () => {
if (selectedIndex > 0) { if (selectedIndex > 0) {
setSelectedIndex((prev) => prev - 1); setSelectedIndex((prev) => prev - 1);
// scrollTop({ scaleX: , animate: true });
} }
}; };
const handleDownClick = useCallback(() => { const handleDownClick = useCallback(() => {
if (hotelInfos.length - 1 !== selectedIndex) { if (hotelInfos.length - 1 !== selectedIndex) {
setSelectedIndex((prev) => prev + 1); setSelectedIndex((prev) => prev + 1);
if (selectedIndex > 1) {
scrollBottom({
scaleY: 144 * selectedIndex,
animate: true,
});
}
console.log("###!!");
} }
}, [selectedIndex]); }, [selectedIndex]);
@@ -149,9 +159,13 @@ export default function ThemeHotelIndicator({
selectedIndex === 0 && css.disable selectedIndex === 0 && css.disable
)} )}
/> />
<Container className={css.tVirtualGridListContainer}> <Container
className={css.tVirtualGridListContainer}
ref={containerRef}
>
{hotelInfos && hotelInfos.length > 0 && ( {hotelInfos && hotelInfos.length > 0 && (
<TVirtualGridList <TVirtualGridList
cbScrollTo={getScrollTo}
className={css.tVirtualGridList} className={css.tVirtualGridList}
dataSize={hotelInfos.length} dataSize={hotelInfos.length}
itemWidth={144} itemWidth={144}