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

checkout data 보내기 && 주석제거

Browse Source
This commit is contained in:
고동영
2024-04-01 11:07:54 +09:00
parent bb60e1a08b
commit 02661ed000
5 changed files with 131 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
View File

@@ -1,26 +1,38 @@
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 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 { setHidePopup, setShowPopup } from "../../../actions/commonActions"; import {
import { getProductCouponSearch } from "../../../actions/couponActions"; setHidePopup,
import { pushPanel } from "../../../actions/panelActions"; setShowPopup,
import { getProductOption } from "../../../actions/productActions"; } from '../../../actions/commonActions';
import TButton from "../../../components/TButton/TButton"; import { getProductCouponSearch } from '../../../actions/couponActions';
import TPopUp from "../../../components/TPopUp/TPopUp"; import { pushPanel } from '../../../actions/panelActions';
import TScroller from "../../../components/TScroller/TScroller"; import { getProductOption } from '../../../actions/productActions';
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList"; import TButton from '../../../components/TButton/TButton';
import usePriceInfo from "../../../hooks/usePriceInfo"; import TPopUp from '../../../components/TPopUp/TPopUp';
import * as Config from "../../../utils/Config"; import TScroller from '../../../components/TScroller/TScroller';
import { $L } from "../../../utils/helperMethods"; import TVirtualGridList
import { SpotlightIds } from "../../../utils/SpotlightIds"; from '../../../components/TVirtualGridList/TVirtualGridList';
import FavoriteBtn from "../components/common/FavoriteBtn"; import usePriceInfo from '../../../hooks/usePriceInfo';
import css from "./SingleOption.module.less"; 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( const Container = SpotlightContainerDecorator(
{ enterTo: "default-element", preserveId: true }, { enterTo: "default-element", preserveId: true },
@@ -48,7 +60,8 @@ export default function SingleOption({
const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0); const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
const [quantity, setQuantity] = useState(1); const [quantity, setQuantity] = useState(1);
const [selectedOptions, setSelectedOptions] = useState([]); const [selectedOptionIdx, setSelectedOptionsIdx] = useState([]);
const [selectedOptions, setsSelectedOptions] = useState([]);
const [couponTypes, setCouponTypes] = useState(null); const [couponTypes, setCouponTypes] = useState(null);
const { priceInfo, shippingCharge } = productInfo || productData; const { priceInfo, shippingCharge } = productInfo || productData;
@@ -83,21 +96,41 @@ export default function SingleOption({
const handleOptionsClick = useCallback( const handleOptionsClick = useCallback(
(e, optionValIdx) => { (e, optionValIdx) => {
console.log( console.log("#productOptionInfos", productOptionInfos);
"#productOptionInfos",
productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx] setsSelectedOptions((prevOptions) => {
); const updatedOptions = [...prevOptions];
setSelectedOptions((prevOptions) => { updatedOptions[selectedBtnOptIdx] =
productOptionInfos[selectedBtnOptIdx].prdtOptDtl[optionValIdx];
return updatedOptions;
});
setSelectedOptionsIdx((prevOptions) => {
const updatedOptions = [...prevOptions]; const updatedOptions = [...prevOptions];
updatedOptions[selectedBtnOptIdx] = optionValIdx; updatedOptions[selectedBtnOptIdx] = optionValIdx;
return updatedOptions; return updatedOptions;
}); });
Spotlight.focus("optionButton"); Spotlight.focus("optionButton");
onClose(); onClose();
}, },
[selectedBtnOptIdx, productOptionInfos] [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(() => { const handleIncrement = useCallback(() => {
setQuantity(quantity + 1); setQuantity(quantity + 1);
}, [quantity]); }, [quantity]);
@@ -119,7 +152,18 @@ export default function SingleOption({
if (!loginUserData.userInfo) { if (!loginUserData.userInfo) {
dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup)); dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
} else { } 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]); }, [dispatch]);
@@ -199,10 +243,10 @@ export default function SingleOption({
<span className={css.optionValue}> <span className={css.optionValue}>
{ {
prdtOptDtl[ prdtOptDtl[
selectedOptions[idx] === null || selectedOptionIdx[idx] === null ||
selectedOptions[idx] === undefined selectedOptionIdx[idx] === undefined
? 0 ? 0
: selectedOptions[idx] : selectedOptionIdx[idx]
].prodOptCval ].prodOptCval
} }
</span> </span>

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

@@ -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 ProductOption from '../components/ProductOption';
import ThemeIndicator from "../ThemeProduct/indicator/ThemeIndicator"; import ThemeIndicator from '../ThemeProduct/indicator/ThemeIndicator';
import SingleOption from "./SingleOption"; import SingleOption from './SingleOption';
import css from "./SingleProduct.module.less"; import css from './SingleProduct.module.less';
export default function SingleProduct({ selectedPatnrId, selectedPrdtId }) { export default function SingleProduct({ selectedPatnrId, selectedPrdtId }) {
const productData = useSelector((state) => state.main.productData); const productData = useSelector((state) => state.main.productData);
console.log("#productData", productData);
return ( return (
<div className={css.container}> <div className={css.container}>
<ThemeIndicator <ThemeIndicator

19
com.twin.app.shoptime/src/views/PlayerPanel/PlayerItemCard/PlayerItemCard.jsx
View File

@@ -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 CustomImage from '../../../components/CustomImage/CustomImage';
import { $L } from "../../../utils/helperMethods"; import { $L } from '../../../utils/helperMethods';
import css from "./PlayerItemCard.module.less"; import css from './PlayerItemCard.module.less';
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
@@ -92,7 +98,6 @@ export default memo(function PlayerItemCard({
const progressPercentage = (elapsedTime / liveTime) * 100; const progressPercentage = (elapsedTime / liveTime) * 100;
console.log("#progressPercentage", progressPercentage);
if (elapsedTime > 0) { if (elapsedTime > 0) {
setGaugeWidth(progressPercentage); setGaugeWidth(progressPercentage);
} else { } else {

63
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
View File

@@ -4,37 +4,42 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from "react"; } from 'react';
import classNames from "classnames"; import classNames from 'classnames';
import ReactPlayer from "react-player"; import ReactPlayer from 'react-player';
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 * as CommonActions from "../../actions/commonActions"; import * as CommonActions from '../../actions/commonActions';
import { import {
getHomeFullVideoInfo, getHomeFullVideoInfo,
getMainLiveShowNowProduct, getMainLiveShowNowProduct,
} from "../../actions/mainActions"; } from '../../actions/mainActions';
import * as PanelActions from "../../actions/panelActions"; import * as PanelActions from '../../actions/panelActions';
import { MediaControls } from "../../components/MediaPlayer"; import { MediaControls } from '../../components/MediaPlayer';
import TButton from "../../components/TButton/TButton"; import TButton from '../../components/TButton/TButton';
import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab"; import TButtonTab, { LIST_TYPE } from '../../components/TButtonTab/TButtonTab';
import TItemCard, { TYPES } from "../../components/TItemCard/TItemCard"; import TItemCard, { TYPES } from '../../components/TItemCard/TItemCard';
import TPanel from "../../components/TPanel/TPanel"; import TPanel from '../../components/TPanel/TPanel';
import TVirtualGridList from "../../components/TVirtualGridList/TVirtualGridList"; import TVirtualGridList
import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer"; from '../../components/TVirtualGridList/TVirtualGridList';
import { panel_names } from "../../utils/Config"; import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
import { $L } from "../../utils/helperMethods"; import { panel_names } from '../../utils/Config';
import css from "./PlayerPanel.module.less"; import { $L } from '../../utils/helperMethods';
import FeaturedShowContents from "./PlayerTabContents/FeaturedShowContents"; import css from './PlayerPanel.module.less';
import LiveChannelContents from "./PlayerTabContents/LiveChannelContents"; import FeaturedShowContents from './PlayerTabContents/FeaturedShowContents';
import ShopNowContents from "./PlayerTabContents/ShopNowContents"; import LiveChannelContents from './PlayerTabContents/LiveChannelContents';
import YouMayLikeContents from "./PlayerTabContents/YouMayLikeContents"; import ShopNowContents from './PlayerTabContents/ShopNowContents';
import YouMayLikeContents from './PlayerTabContents/YouMayLikeContents';
const SpottableBtn = Spottable("button"); const SpottableBtn = Spottable("button");
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
@@ -217,8 +222,12 @@ const PlayerPanel = ({ hideChildren, isTabActivated, ...props }) => {
<div className={panelInfo?.type === "LIVE" && css.liveIcon} /> <div className={panelInfo?.type === "LIVE" && css.liveIcon} />
<div className={css.logo}>{"123"}</div> <div className={css.logo}>{"123"}</div>
</div> </div>
<div className={classNames(css.overIcon, css.topIcon)} /> <div className={classNames(css.overIcon, css.topIcon)}>
<div className={classNames(css.overIcon, css.downIcon)} /> <SpottableBtn />
</div>
<div className={classNames(css.overIcon, css.downIcon)}>
<SpottableBtn />
</div>
<div <div
className={classNames( className={classNames(

2
com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less
View File

@@ -97,6 +97,7 @@
&.topIcon { &.topIcon {
top: 12px; top: 12px;
left: 936px; left: 936px;
> button { > button {
.size(@w: 48px, @h: 48px); .size(@w: 48px, @h: 48px);
background-size: contain; background-size: contain;
@@ -109,6 +110,7 @@
&.downIcon { &.downIcon {
bottom: 12px; bottom: 12px;
left: 936px; left: 936px;
> button { > button {
.size(@w: 48px, @h: 48px); .size(@w: 48px, @h: 48px);
background-size: contain; background-size: contain;