checkout data 보내기 && 주석제거

2024-04-01 11:07:54 +09:00
parent bb60e1a08b
commit 02661ed000
5 changed files with 131 additions and 71 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
@@ -1,26 +1,38 @@
-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 Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

-import { setHidePopup, setShowPopup } from "../../../actions/commonActions";
-import { getProductCouponSearch } from "../../../actions/couponActions";
-import { pushPanel } from "../../../actions/panelActions";
-import { getProductOption } from "../../../actions/productActions";
-import TButton from "../../../components/TButton/TButton";
-import TPopUp from "../../../components/TPopUp/TPopUp";
-import TScroller from "../../../components/TScroller/TScroller";
-import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
-import usePriceInfo from "../../../hooks/usePriceInfo";
-import * as Config from "../../../utils/Config";
-import { $L } from "../../../utils/helperMethods";
-import { SpotlightIds } from "../../../utils/SpotlightIds";
-import FavoriteBtn from "../components/common/FavoriteBtn";
-import css from "./SingleOption.module.less";
+import {
+  setHidePopup,
+  setShowPopup,
+} from '../../../actions/commonActions';
+import { getProductCouponSearch } from '../../../actions/couponActions';
+import { pushPanel } from '../../../actions/panelActions';
+import { getProductOption } from '../../../actions/productActions';
+import TButton from '../../../components/TButton/TButton';
+import TPopUp from '../../../components/TPopUp/TPopUp';
+import TScroller from '../../../components/TScroller/TScroller';
+import TVirtualGridList
+  from '../../../components/TVirtualGridList/TVirtualGridList';
+import usePriceInfo from '../../../hooks/usePriceInfo';
+import * as Config from '../../../utils/Config';
+import { $L } from '../../../utils/helperMethods';
+import { SpotlightIds } from '../../../utils/SpotlightIds';
+import FavoriteBtn from '../components/common/FavoriteBtn';
+import css from './SingleOption.module.less';

 const Container = SpotlightContainerDecorator(
  { enterTo: "default-element", preserveId: true },
@@ -48,7 +60,8 @@ export default function SingleOption({

  const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
  const [quantity, setQuantity] = useState(1);
-  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [selectedOptionIdx, setSelectedOptionsIdx] = useState([]);
+  const [selectedOptions, setsSelectedOptions] = useState([]);
  const [couponTypes, setCouponTypes] = useState(null);

  const { priceInfo, shippingCharge } = productInfo || productData;
@@ -83,21 +96,41 @@ export default function SingleOption({

  const handleOptionsClick = useCallback(
    (e, optionValIdx) => {
-      console.log(
-        "#productOptionInfos",
-        productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx]
-      );
-      setSelectedOptions((prevOptions) => {
+      console.log("#productOptionInfos", productOptionInfos);
+
+      setsSelectedOptions((prevOptions) => {
+        const updatedOptions = [...prevOptions];
+        updatedOptions[selectedBtnOptIdx] =
+          productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx];
+        return updatedOptions;
+      });
+      setSelectedOptionsIdx((prevOptions) => {
        const updatedOptions = [...prevOptions];
        updatedOptions[selectedBtnOptIdx] = optionValIdx;
        return updatedOptions;
      });
+
      Spotlight.focus("optionButton");
      onClose();
    },
    [selectedBtnOptIdx, productOptionInfos]
  );

+  useEffect(() => {
+    if (!selectedOptionIdx || selectedOptionIdx.length < 0) {
+      setsSelectedOptions((prevOptions) => {
+        const updatedOptions = [...prevOptions];
+        updatedOptions[selectedBtnOptIdx] =
+          productOptionInfos[selectedBtnOptIdx].prdtOptDtl[0];
+        return updatedOptions;
+      });
+    }
+
+    console.log("#selectedoptions", selectedOptions);
+    console.log("#selectedoptionIdx", selectedOptionIdx);
+    console.log("#discountedPrice", discountedPrice);
+  }, [selectedOptions]);
+
  const handleIncrement = useCallback(() => {
    setQuantity(quantity + 1);
  }, [quantity]);
@@ -119,7 +152,18 @@ export default function SingleOption({
    if (!loginUserData.userInfo) {
      dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
    } else {
-      dispatch(pushPanel({ name: Config.panel_names.CHECKOUT_PANEL }));
+      dispatch(
+        pushPanel({
+          name: Config.panel_names.CHECKOUT_PANEL,
+          panelInfo: {
+            quantity: quantity,
+            patnrId: selectedPatnrId,
+            prdtId: selectedPrdtId,
+            proice: discountedPrice ? discountedPrice : originalPrice,
+            selectedOption: selectedOptions,
+          },
+        })
+      );
    }
  }, [dispatch]);

@@ -199,10 +243,10 @@ export default function SingleOption({
                    <span className={css.optionValue}>
                      {
                        prdtOptDtl[
-                          selectedOptions[idx] === null ||
-                          selectedOptions[idx] === undefined
+                          selectedOptionIdx[idx] === null ||
+                          selectedOptionIdx[idx] === undefined
                            ? 0
-                            : selectedOptions[idx]
+                            : selectedOptionIdx[idx]
                        ].prodOptCval
                      }
                    </span>
--- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx
@@ -1,15 +1,15 @@
-import React from "react";
+import React from 'react';

-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';

-import ProductOption from "../components/ProductOption";
-import ThemeIndicator from "../ThemeProduct/indicator/ThemeIndicator";
-import SingleOption from "./SingleOption";
-import css from "./SingleProduct.module.less";
+import ProductOption from '../components/ProductOption';
+import ThemeIndicator from '../ThemeProduct/indicator/ThemeIndicator';
+import SingleOption from './SingleOption';
+import css from './SingleProduct.module.less';

 export default function SingleProduct({ selectedPatnrId, selectedPrdtId }) {
  const productData = useSelector((state) => state.main.productData);
-  console.log("#productData", productData);
+
  return (
    <div className={css.container}>
      <ThemeIndicator
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
@@ -1,12 +1,18 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

-import classNames from "classnames";
+import classNames from 'classnames';

-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';

-import CustomImage from "../../../components/CustomImage/CustomImage";
-import { $L } from "../../../utils/helperMethods";
-import css from "./PlayerItemCard.module.less";
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import { $L } from '../../../utils/helperMethods';
+import css from './PlayerItemCard.module.less';

 const SpottableComponent = Spottable("div");

@@ -92,7 +98,6 @@ export default memo(function PlayerItemCard({

    const progressPercentage = (elapsedTime / liveTime) * 100;

-    console.log("#progressPercentage", progressPercentage);
    if (elapsedTime > 0) {
      setGaugeWidth(progressPercentage);
    } else {
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -4,37 +4,42 @@ import React, {
  useMemo,
  useRef,
  useState,
-} from "react";
+} from 'react';

-import classNames from "classnames";
-import ReactPlayer from "react-player";
-import { useDispatch, useSelector } from "react-redux";
+import classNames from 'classnames';
+import ReactPlayer from 'react-player';
+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 * as CommonActions from "../../actions/commonActions";
+import * as CommonActions from '../../actions/commonActions';
 import {
  getHomeFullVideoInfo,
  getMainLiveShowNowProduct,
-} from "../../actions/mainActions";
-import * as PanelActions from "../../actions/panelActions";
-import { MediaControls } from "../../components/MediaPlayer";
-import TButton from "../../components/TButton/TButton";
-import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
-import TItemCard, { TYPES } from "../../components/TItemCard/TItemCard";
-import TPanel from "../../components/TPanel/TPanel";
-import TVirtualGridList from "../../components/TVirtualGridList/TVirtualGridList";
-import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
-import { panel_names } from "../../utils/Config";
-import { $L } from "../../utils/helperMethods";
-import css from "./PlayerPanel.module.less";
-import FeaturedShowContents from "./PlayerTabContents/FeaturedShowContents";
-import LiveChannelContents from "./PlayerTabContents/LiveChannelContents";
-import ShopNowContents from "./PlayerTabContents/ShopNowContents";
-import YouMayLikeContents from "./PlayerTabContents/YouMayLikeContents";
+} from '../../actions/mainActions';
+import * as PanelActions from '../../actions/panelActions';
+import { MediaControls } from '../../components/MediaPlayer';
+import TButton from '../../components/TButton/TButton';
+import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
+import TItemCard, { TYPES } from '../../components/TItemCard/TItemCard';
+import TPanel from '../../components/TPanel/TPanel';
+import TVirtualGridList
+  from '../../components/TVirtualGridList/TVirtualGridList';
+import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
+import { panel_names } from '../../utils/Config';
+import { $L } from '../../utils/helperMethods';
+import css from './PlayerPanel.module.less';
+import FeaturedShowContents from './PlayerTabContents/FeaturedShowContents';
+import LiveChannelContents from './PlayerTabContents/LiveChannelContents';
+import ShopNowContents from './PlayerTabContents/ShopNowContents';
+import YouMayLikeContents from './PlayerTabContents/YouMayLikeContents';

 const SpottableBtn = Spottable("button");
 const SpottableComponent = Spottable("div");
@@ -217,8 +222,12 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
        <div className={panelInfo?.type === "LIVE" && css.liveIcon} />
        <div className={css.logo}>{"123"}</div>
      </div>
-      <div className={classNames(css.overIcon, css.topIcon)} />
-      <div className={classNames(css.overIcon, css.downIcon)} />
+      <div className={classNames(css.overIcon, css.topIcon)}>
+        <SpottableBtn />
+      </div>
+      <div className={classNames(css.overIcon, css.downIcon)}>
+        <SpottableBtn />
+      </div>

      <div
        className={classNames(
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less
@@ -97,6 +97,7 @@
    &.topIcon {
      top: 12px;
      left: 936px;
+
      > button {
        .size(@w: 48px, @h: 48px);
        background-size: contain;
@@ -109,6 +110,7 @@
    &.downIcon {
      bottom: 12px;
      left: 936px;
+
      > button {
        .size(@w: 48px, @h: 48px);
        background-size: contain;