인디게이터 마우스 버튼 기능 구현 및 SMS버튼 기능 활성화

com.twin.app.shoptime/src/actions/appDataActions.js

@@ -1,6 +1,6 @@
-import { URLS } from "../api/apiConfig";
-import { TAxios } from "../api/TAxios";
-import { types } from "./actionTypes";
+import { URLS } from '../api/apiConfig';
+import { TAxios } from '../api/TAxios';
+import { types } from './actionTypes';
 
 export const addMainIndex = (index) => ({
   type: types.ADD_MAIN_INDEX,
@@ -10,7 +10,9 @@ export const addMainIndex = (index) => ({
 // SMS 송신 IF-LGSP-037
 export const sendSms = (params) => (dispatch, getState) => {
   console.log("#params", params);
-  const { mbphNo, smsTpCd, patnrId, evntId, prdtId, smsText } = params;
+
+  const { mbphNo, smsTpCd, patnrId, evntId, prdtId, smsText, curationId } =
+    params;
 
   const onSuccess = (response) => {
     console.log("sendSms onSuccess ", response.data);
@@ -31,7 +33,7 @@ export const sendSms = (params) => (dispatch, getState) => {
     "post",
     URLS.SEND_SMS,
     {},
-    { mbphNo, smsTpCd, patnrId, evntId, prdtId, smsText },
+    { mbphNo, smsTpCd, patnrId, evntId, prdtId, smsText, curationId },
     onSuccess,
     onFail
   );

com.twin.app.shoptime/src/components/MobileSend/MobileSendPopUp.jsx

@@ -1,17 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
-import classNames from "classnames";
-import { useDispatch, useSelector } from "react-redux";
+import classNames from 'classnames';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { off, on } from "@enact/core/dispatcher";
+import {
+  off,
+  on,
+} from '@enact/core/dispatcher';
 
-import { sendSms } from "../../actions/appDataActions";
-import { registerDeviceInfo } from "../../actions/deviceActions";
-import { $L } from "../../utils/helperMethods";
-import TButton from "../TButton/TButton";
-import TPopUp from "../TPopUp/TPopUp";
-import css from "./MobileSendPopUp.module.less";
-import SMSNumKeyPad from "./SMSNumKeyPad";
+import { sendSms } from '../../actions/appDataActions';
+import { registerDeviceInfo } from '../../actions/deviceActions';
+import { $L } from '../../utils/helperMethods';
+import TButton from '../TButton/TButton';
+import TPopUp from '../TPopUp/TPopUp';
+import css from './MobileSendPopUp.module.less';
+import SMSNumKeyPad from './SMSNumKeyPad';
 
 const MAX_NUMBER = 16;
 const instruction = $L(`
@@ -29,18 +40,16 @@ export default function MobileSendPopUp({
   productImg,
   productPrice,
   smsTpCd,
-  prdtId,
   smsText,
+  prdtId,
+  curationId,
+  patnrId,
+  evntId,
+  evntTpCd,
 }) {
   const [mobileNumber, setMobileNumber] = useState("");
   const dispatch = useDispatch();
 
-  const eventPopInfos = useSelector(
-    (state) => state.event.eventData.eventPopInfo
-  );
-
-  const { evntId, patnrId, evntTpCd } = eventPopInfos || {};
-
   const handleKeydown = useCallback((ev) => {
     if (ev && ev.key >= 0 && ev.key <= 9) {
       setMobileNumber((num) => (num.length >= MAX_NUMBER ? num : num + ev.key));
@@ -81,6 +90,7 @@ export default function MobileSendPopUp({
           evntId,
           prdtId,
           smsText,
+          curationId,
         })
       );
     } else {
@@ -94,7 +104,7 @@ export default function MobileSendPopUp({
         })
       );
     }
-  }, [dispatch]);
+  }, [dispatch, mobileNumber]);
 
   return (
     <TPopUp

com.twin.app.shoptime/src/hooks/useScrollTo.js

@@ -7,9 +7,9 @@ import React, {
 export default function useScrollTo() {
   const scrollTo = useRef();
 
-  const scrollTop = useCallback(({ scaleX = 0, animate = true } = {}) => {
+  const scrollTop = useCallback(({ y = 0, animate = true } = {}) => {
     if (scrollTo && scrollTo.current) {
-      scrollTo.current({ position: { y: scaleX }, animate: animate });
+      scrollTo.current({ position: { y }, animate: animate });
     }
   }, []);
 
@@ -19,12 +19,6 @@ 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;
   }, []);
@@ -33,5 +27,5 @@ export default function useScrollTo() {
     scrollTop();
   }, []);
 
-  return { getScrollTo, scrollLeft, scrollTop, scrollBottom };
+  return { getScrollTo, scrollLeft, scrollTop };
 }

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

@@ -137,6 +137,8 @@ export default function ItemDetail() {
           <ThemeProduct
             selectedIndex={selectedIndex}
             setSelectedIndex={setSelectedIndex}
+            selectedCurationId={selectedCurationId}
+            selectedPatnrId={selectedPatnrId}
           />
         )}
       </TBody>

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

@@ -5,23 +5,40 @@ import React, {
   useState,
 } from 'react';
 
-import { useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
+import {
+  setHidePopup,
+  setShowPopup,
+} from '../../../actions/commonActions';
+import MobileSendPopUp from '../../../components/MobileSend/MobileSendPopUp';
 import TButton from '../../../components/TButton/TButton';
 import TQRCode from '../../../components/TQRCode/TQRCode';
+import * as Config from '../../../utils/Config';
 import { $L } from '../../../utils/helperMethods';
 import StarRating from '../components/common/StarRating';
 import css from './HotelOption.module.less';
 
-export default function HotelOption({ selectedIndex, setSelectedIndex }) {
+export default function HotelOption({
+  selectedIndex,
+  selectedCurationId,
+  selectedPatnrId,
+}) {
   const tooltipDes = $L(
     ` Please check for more detailed\ninformation about the product.`
   );
+  const dispatch = useDispatch();
   const [label, setLabel] = useState("");
   const hotelInfos = useSelector(
     (state) => state.home.themeCurationHotelDetailData
   );
   const hotelData = useSelector((state) => state.home.hotelData);
+  const { popupVisible, activePopup } = useSelector(
+    (state) => state.common.popup
+  );
 
   useEffect(() => {
     let label = "";
@@ -42,6 +59,23 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
     setLabel(label);
   }, [selectedIndex, hotelInfos]);
 
+  const handleSMSClick = useCallback(() => {
+    dispatch(setShowPopup(Config.ACTIVE_POPUP.smsPopup));
+  }, [popupVisible]);
+
+  const onClose = () => {
+    dispatch(setHidePopup());
+  };
+
+  const Price = () => {
+    return (
+      <>
+        {hotelInfos[selectedIndex]?.hotelDetailInfo.currencySign}
+        {hotelInfos[selectedIndex]?.hotelDetailInfo.price}
+      </>
+    );
+  };
+
   return (
     <div className={css.optionContainer}>
       <div className={css.topLayer}>
@@ -69,8 +103,7 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
           <div className={css.price}>
             <div>{$L("Price From")}</div>
             <p>
-              {hotelInfos[selectedIndex]?.hotelDetailInfo.currencySign}
-              {hotelInfos[selectedIndex]?.hotelDetailInfo.price}
+              <Price />
             </p>
           </div>
         </div>
@@ -85,9 +118,24 @@ export default function HotelOption({ selectedIndex, setSelectedIndex }) {
           </div>
         </div>
       </div>
-      <TButton className={css.tbutton} size="extra">
+      <TButton className={css.tbutton} size="extra" onClick={handleSMSClick}>
         {$L("SEE MORE")}
       </TButton>
+      {/* MobileSendPopUp */}
+      {activePopup === Config.ACTIVE_POPUP.smsPopup && (
+        <MobileSendPopUp
+          open={popupVisible}
+          onClose={onClose}
+          title={hotelInfos[selectedIndex]?.hotelNm}
+          productImg={hotelInfos[selectedIndex]?.hotelImgUrl}
+          productPrice={Price()}
+          curationId={selectedCurationId}
+          patnrId={selectedPatnrId}
+          smsTpCd={"APP00205"}
+
+          //APP00204
+        />
+      )}
     </div>
   );
 }

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeProduct.jsx

@@ -7,7 +7,12 @@ import HotelOption from './HotelOption';
 import ThemeOption from './ThemeOption';
 import css from './ThemeProduct.module.less';
 
-export default function ThemeProduct({ selectedIndex, setSelectedIndex }) {
+export default function ThemeProduct({
+  selectedIndex,
+  setSelectedIndex,
+  selectedCurationId,
+  selectedPatnrId,
+}) {
   const productInfos = useSelector(
     (state) => state.home.themeCurationDetailInfoData
   );
@@ -24,7 +29,8 @@ export default function ThemeProduct({ selectedIndex, setSelectedIndex }) {
       ) : (
         <HotelOption
           selectedIndex={selectedIndex}
-          setSelectedIndex={setSelectedIndex}
+          selectedCurationId={selectedCurationId}
+          selectedPatnrId={selectedPatnrId}
         />
       )}
     </div>

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

@@ -26,20 +26,23 @@ const Container = SpotlightContainerDecorator(
 const SpottableComponent = Spottable("div");
 const SpottableImage = Spottable(Image);
 
+const IMAGE_WIDTH = 152;
 export default function ThemeHotelIndicator({
   selectedIndex,
   setSelectedIndex,
 }) {
   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();
+  const { getScrollTo, scrollTop } = useScrollTo();
+
+  let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH;
   useEffect(() => {
     const image =
       hotelInfos[selectedIndex]?.hotelDetailInfo.imgUrls[imageSelectedIndex];
@@ -58,24 +61,27 @@ export default function ThemeHotelIndicator({
     }
   };
 
-  const handleUpClick = () => {
-    if (selectedIndex > 0) {
-      setSelectedIndex((prev) => prev - 1);
-      // scrollTop({ scaleX: , animate: true });
+  const handleUpClick = useCallback(() => {
+    if (selectedIndex === 0) {
+      return;
     }
-  };
+    setSelectedIndex((prev) => prev - 1);
+    if (hotelInfos.length - 1 !== selectedIndex) {
+      scrollTop({ y: imagePosition - IMAGE_WIDTH, animate: true });
+    }
+  }, [selectedIndex]);
 
   const handleDownClick = useCallback(() => {
-    if (hotelInfos.length - 1 !== selectedIndex) {
-      setSelectedIndex((prev) => prev + 1);
-      if (selectedIndex > 1) {
-        scrollBottom({
-          scaleY: 144 * selectedIndex,
-          animate: true,
-        });
-      }
+    if (hotelInfos.length - 1 === selectedIndex) {
+      return;
+    }
 
-      console.log("###!!");
+    setSelectedIndex((prev) => prev + 1);
+    if (selectedIndex > 1) {
+      scrollTop({
+        y: imagePosition,
+        animate: true,
+      });
     }
   }, [selectedIndex]);
 
@@ -159,10 +165,7 @@ export default function ThemeHotelIndicator({
               selectedIndex === 0 && css.disable
             )}
           />
-          <Container
-            className={css.tVirtualGridListContainer}
-            ref={containerRef}
-          >
+          <Container className={css.tVirtualGridListContainer}>
             {hotelInfos && hotelInfos.length > 0 && (
               <TVirtualGridList
                 cbScrollTo={getScrollTo}