From 22fabbd464c39286f8ade5010e8ec9dbdd8b4aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Wed, 20 Mar 2024 10:04:55 +0900 Subject: [PATCH] =?UTF-8?q?scrollBottom=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20y=EA=B0=92=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=93=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TButton/TButton.module.less | 2 +- .../src/components/TabLayout/TabLayout.jsx | 4 +- .../src/hooks/useScrollTo.js | 18 ++++++-- .../src/reducers/homeReducer.js | 4 +- .../src/views/DetailPanel/DetailPanel.jsx | 3 +- .../DetailPanel/ThemeProduct/HotelOption.jsx | 20 ++++----- .../ThemeProduct/HotelOption.module.less | 2 +- .../UnableProduct/UnableOption.jsx | 22 +++++----- .../UnableProduct/UnableOption.module.less | 5 +++ .../DetailPanel/YouMayLike/YouMayLike.jsx | 44 ++++++++++++------- .../indicator/ThemeHotelIndicator.jsx | 18 +++++++- 11 files changed, 93 insertions(+), 49 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TButton/TButton.module.less b/com.twin.app.shoptime/src/components/TButton/TButton.module.less index a7f485d6..9c697449 100644 --- a/com.twin.app.shoptime/src/components/TButton/TButton.module.less +++ b/com.twin.app.shoptime/src/components/TButton/TButton.module.less @@ -43,7 +43,7 @@ max-width: 650px; letter-spacing: -0.75px; } - &.extraLarge { + &.extra { min-width: 350px; max-width: 900px; } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index e11163a1..bf67489b 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -413,7 +413,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { if (index === 3) { dispatch(resetPanels()); deActivateTab(); - Spotlight.focus(SpotlightIds.TBODY); + Spotlight.focus(SpotlightIds.TPANEL); return; } if (target) { @@ -425,7 +425,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { setMainExpanded(true); } }, - [cursorVisible, deActivateTab, dispatch, panels] + [cursorVisible, deActivateTab, dispatch, selectedTitle] ); const onClickSubItem = useCallback( diff --git a/com.twin.app.shoptime/src/hooks/useScrollTo.js b/com.twin.app.shoptime/src/hooks/useScrollTo.js index e9ed2eb7..79cba814 100644 --- a/com.twin.app.shoptime/src/hooks/useScrollTo.js +++ b/com.twin.app.shoptime/src/hooks/useScrollTo.js @@ -1,11 +1,15 @@ -import React, { useCallback, useEffect, useRef } from "react"; +import React, { + useCallback, + useEffect, + useRef, +} from 'react'; export default function useScrollTo() { const scrollTo = useRef(); - const scrollTop = useCallback(({ animate = true } = {}) => { + const scrollTop = useCallback(({ scaleX = 0, animate = true } = {}) => { 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) => { scrollTo.current = cbScrollTo; }, []); @@ -23,5 +33,5 @@ export default function useScrollTo() { scrollTop(); }, []); - return { getScrollTo, scrollLeft, scrollTop }; + return { getScrollTo, scrollLeft, scrollTop, scrollBottom }; } diff --git a/com.twin.app.shoptime/src/reducers/homeReducer.js b/com.twin.app.shoptime/src/reducers/homeReducer.js index 6aee115e..78f3cdf1 100644 --- a/com.twin.app.shoptime/src/reducers/homeReducer.js +++ b/com.twin.app.shoptime/src/reducers/homeReducer.js @@ -1,4 +1,4 @@ -import { types } from "../actions/actionTypes"; +import { types } from '../actions/actionTypes'; const initialState = { termsData: {}, @@ -56,7 +56,7 @@ export const homeReducer = (state = initialState, action) => { return { ...state, themeCurationHotelDetailData: hotelInfos, - HotelData: action.payload, + hotelData: action.payload, }; } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 4d1f8f8a..135f727e 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx @@ -37,6 +37,7 @@ export default function ItemDetail() { const hotelInfos = useSelector( (state) => state.home.themeCurationHotelDetailData ); + const hotelData = useSelector((state) => state.home.hotelData); const dispatch = useDispatch(); @@ -99,7 +100,7 @@ export default function ItemDetail() { className={css.header} title={ (selectedPrdtId && productData?.prdtNm) || - (selectedCurationId && hotelInfos[selectedIndex]?.hotelNm) + (selectedCurationId && hotelData?.hotelInfo.curationNm) } onBackButton onClick={onClick} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx index af1020d9..8646a512 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.jsx @@ -7,7 +7,6 @@ import React, { import { useSelector } from 'react-redux'; -import logo from '../../../../assets/images/icons/ic-partners-netflix@3x.png'; import TButton from '../../../components/TButton/TButton'; import TQRCode from '../../../components/TQRCode/TQRCode'; import { $L } from '../../../utils/helperMethods'; @@ -22,9 +21,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) { const hotelInfos = useSelector( (state) => state.home.themeCurationHotelDetailData ); - const HotelData = useSelector((state) => state.home.HotelData); - - console.log("#hotelInfos", HotelData); + const hotelData = useSelector((state) => state.home.hotelData); useEffect(() => { let label = ""; @@ -48,7 +45,8 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) { return (
- patncLogoPath + +
{label}
-
- {"HOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTEL"} -
+
{hotelInfos[selectedIndex]?.hotelNm}
-
{$L("Today, 1 Night(s) 2 Adult(s)")}
+
+ {$L( + `Today, ${hotelInfos[selectedIndex]?.hotelDetailInfo.nights} Night(s) 2 Adult(s)` + )} +
{hotelInfos[selectedIndex]?.hotelDetailInfo.roomType}
@@ -85,7 +85,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
- + {$L("SEE MORE")} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less index f7430af6..79afa832 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/HotelOption.module.less @@ -93,7 +93,7 @@ border-radius: 6px; border: solid 1px #dadada; background-image: linear-gradient(to top, #f5f5f5, #fff); - margin: 5px 0 0 6px; + margin: 8px 0 0 6px; padding: 16px 16px 16px 16px; } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx index 69925ebc..d5cfc06c 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx @@ -30,17 +30,19 @@ export default function OptionPartnerPrice({ installmentMonths, } = productInfos; + console.log("#offerInfo", offerInfo); + const { discountRate } = usePriceInfo(priceInfo) || {}; const TYPE_CASE = { - case1: price2 && !price3 && !price5, - case2: price2 && price3 && !price5, - case3: price2 && price3 && price5, - case4: price2 && !price3 && price5, - case5: price2 && !price3 && !price5, - case6: price2 && price3 && !price5, - case7: price2 && price3 && price5, - case8: price2 && !price3 && price5, - case9: !price2 && !price3 && !price5 && offerInfo, + case1: price2 && !price3 && !price5 && !offerInfo, + case2: price2 && price3 && !price5 && !offerInfo, + case3: price2 && price3 && price5 && !offerInfo, + case4: price2 && !price3 && price5 && !offerInfo, + case5: price2 && !price3 && !price5 && !offerInfo, + case6: price2 && price3 && !price5 && !offerInfo, + case7: price2 && price3 && price5 && !offerInfo, + case8: price2 && !price3 && price5 && !offerInfo, + case9: offerInfo, }; const renderPriceItem = useCallback(() => { @@ -68,7 +70,7 @@ export default function OptionPartnerPrice({ if (TYPE_CASE.case9) { return (
- {$L("Call for info")} + {$L("Call for info")}
); } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less index 4f9dba0d..2d8d144f 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less @@ -53,6 +53,11 @@ margin-top: 6px; } } + .offerInfo { + font-size: 60px; + font-weight: bold; + color: #808080; + } .discountedPrc { font-size: 24px; color: @COLOR_GRAY03; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx index 66173da1..912d8f19 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/YouMayLike/YouMayLike.jsx @@ -1,21 +1,30 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { + useCallback, + useEffect, + useState, +} from 'react'; -import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; +import classNames from 'classnames'; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import { Job } from "@enact/core/util"; -import Spotlight from "@enact/spotlight"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; +import { Job } from '@enact/core/util'; +import Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; -import { getMainYouMayLike } from "../../../actions/mainActions"; -import { pushPanel } from "../../../actions/panelActions"; -import TItemCard from "../../../components/TItemCard/TItemCard"; -import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; -import { panel_names } from "../../../utils/Config"; -import { $L } from "../../../utils/helperMethods"; -import { SpotlightIds } from "../../../utils/SpotlightIds"; -import css from "./YouMayLike.module.less"; +import { getMainYouMayLike } from '../../../actions/mainActions'; +import { pushPanel } from '../../../actions/panelActions'; +import TItemCard from '../../../components/TItemCard/TItemCard'; +import TVirtualGridList + from '../../../components/TVirtualGridList/TVirtualGridList'; +import { panel_names } from '../../../utils/Config'; +import { $L } from '../../../utils/helperMethods'; +import { SpotlightIds } from '../../../utils/SpotlightIds'; +import css from './YouMayLike.module.less'; const Container = SpotlightContainerDecorator( { enterTo: "default-element", preserveId: true }, @@ -31,6 +40,8 @@ export default function YouMayLike() { const youmaylikeData = useSelector((state) => state.main.youmaylikeData); const data = useSelector((state) => state.main.productData); + console.log("#youmaylike", youmaylikeData); + useEffect(() => { dispatch( getMainYouMayLike({ @@ -70,7 +81,7 @@ export default function YouMayLike() { const renderItem = useCallback( ({ index, ...rest }) => { - const { imgUrl, patnrId, prdtId, prdtNm, priceInfo } = + const { imgUrl, patnrId, prdtId, prdtNm, priceInfo, offerInfo } = youmaylikeData[index]; const handleItemClick = () => { @@ -93,6 +104,7 @@ export default function YouMayLike() { imageAlt={prdtId} imageSource={imgUrl} priceInfo={priceInfo} + offerInfo={offerInfo} productName={prdtNm} onClick={handleItemClick} /> diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx index 18958343..f269dc2e 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeHotelIndicator.jsx @@ -32,13 +32,14 @@ export default function ThemeHotelIndicator({ }) { const [selectedImage, setSelectedImage] = useState(null); const [imageSelectedIndex, setImageSelectedIndex] = useState(0); + const containerRef = useRef(null); const hotelInfos = useSelector( (state) => state.home.themeCurationHotelDetailData ); const { cursorVisible } = useSelector((state) => state.common.appStatus); - const imageLength = hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls.length; + const { getScrollTo, scrollBottom, scrollTop } = useScrollTo(); useEffect(() => { const image = hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls[imageSelectedIndex]; @@ -60,12 +61,21 @@ export default function ThemeHotelIndicator({ const handleUpClick = () => { if (selectedIndex > 0) { setSelectedIndex((prev) => prev - 1); + // scrollTop({ scaleX: , animate: true }); } }; const handleDownClick = useCallback(() => { if (hotelInfos.length - 1 !== selectedIndex) { setSelectedIndex((prev) => prev + 1); + if (selectedIndex > 1) { + scrollBottom({ + scaleY: 144 * selectedIndex, + animate: true, + }); + } + + console.log("###!!"); } }, [selectedIndex]); @@ -149,9 +159,13 @@ export default function ThemeHotelIndicator({ selectedIndex === 0 && css.disable )} /> - + {hotelInfos && hotelInfos.length > 0 && (