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

2024-03-20 10:04:55 +09:00
parent 2c11f4b257
commit 22fabbd464
11 changed files with 93 additions and 49 deletions
--- 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;
  }
--- 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(
--- 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 };
 }
--- 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,
      };
    }

--- 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}
--- 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 (
    <div className={css.optionContainer}>
      <div className={css.topLayer}>
-        <img src={HotelData?.hotelInfo.patncLogoPath} alt="patncLogoPath" />
+        <img src={hotelData?.hotelInfo.patncLogoPath} alt="" />
+
        <div className={css.rating}>
          <StarRating
            rating={hotelInfos[selectedIndex]?.hotelDetailInfo.revwGrd}
@@ -56,13 +54,15 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
          <span className={css.line} /> <div>{label}</div>
        </div>
      </div>
-      <div className={css.title}>
-        {"HOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTELHOTEL"}
-      </div>
+      <div className={css.title}>{hotelInfos[selectedIndex]?.hotelNm}</div>
      <div className={css.amenities}></div>
      <div className={css.bottomLayer}>
        <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}>
            {hotelInfos[selectedIndex]?.hotelDetailInfo.roomType}
          </div>
@@ -85,7 +85,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
          </div>
        </div>
      </div>
-      <TButton className={css.tbutton} type="extraLarge">
+      <TButton className={css.tbutton} size="extra">
        {$L("SEE MORE")}
      </TButton>
    </div>
--- 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;
      }

--- 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 (
            <div className={css.wrapper}>
-              <span className={css.name}>{$L("Call for info")}</span>
+              <span className={css.offerInfo}>{$L("Call for info")}</span>
            </div>
          );
        }
--- 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;
--- 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}
        />
--- 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
            )}
          />
-          <Container className={css.tVirtualGridListContainer}>
+          <Container
+            className={css.tVirtualGridListContainer}
+            ref={containerRef}
+          >
            {hotelInfos && hotelInfos.length > 0 && (
              <TVirtualGridList
+                cbScrollTo={getScrollTo}
                className={css.tVirtualGridList}
                dataSize={hotelInfos.length}
                itemWidth={144}