From 6f4007e57e034854652cb26699cd4494e1748297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Mon, 15 Apr 2024 16:10:50 +0900 Subject: [PATCH] =?UTF-8?q?DetailPanel=20soldout=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/img-thumb-empty-144@3x.png | Bin 0 -> 5795 bytes .../src/views/DetailPanel/DetailPanel.jsx | 4 +- .../DetailPanel/GroupProduct/GroupProduct.jsx | 11 +++ .../SingleProduct/SingleOption.jsx | 5 +- .../SingleProduct/SingleProduct.jsx | 23 +++++-- .../DetailPanel/ThemeProduct/HotelOption.jsx | 1 + .../DetailPanel/ThemeProduct/ThemeOption.jsx | 14 ++++ .../UnableProduct/UnableProduct.jsx | 10 +++ .../components/indicator/Indicator.jsx | 35 +++++----- .../indicator/Indicator.module.less | 19 +++++ .../components/indicator/ThemeIndicator.jsx | 65 ++++++++++-------- .../indicator/ThemeIndicator.module.less | 18 +++++ 12 files changed, 143 insertions(+), 62 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/img-thumb-empty-144@3x.png diff --git a/com.twin.app.shoptime/assets/images/img-thumb-empty-144@3x.png b/com.twin.app.shoptime/assets/images/img-thumb-empty-144@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..32754200a705e4ec2c3d59ae2d048491e43d1475 GIT binary patch literal 5795 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 { dispatch(popPanel()); @@ -130,8 +130,6 @@ export default function ItemDetail() { } }, [panels, selectedPatnrId, selectedPatnrId, httpHeader]); - console.log("#productData", productData); - useEffect(() => { if (panels && selectedPatnrId && selectedPrdtId) { saveToLocalStorage(); diff --git a/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx b/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx index 93c00bf7..7c6e0483 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/GroupProduct/GroupProduct.jsx @@ -15,6 +15,16 @@ export default function GroupProduct({ setSelectedIndex, }) { const productData = useSelector((state) => state.main.productData); + + const isProductSoldOut = () => { + if (productData && productData.length > 0) { + return productData.soldoutFlag === "Y"; + } else { + return false; + } + }; + + const isSoldout = isProductSoldOut(); return ( <>
@@ -22,6 +32,7 @@ export default function GroupProduct({ selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} productInfo={productData} + soldoutFlag={isSoldout} /> { dispatch( @@ -178,7 +178,6 @@ export default function SingleOption({ return; } if (productOptionInfos && productOptionInfos.length > 0) { - console.log("#일반상품 옵션 포커스"); Spotlight.focus("optionBtn-0"); } else if (productData && productData.soldoutFlag === "Y") { Spotlight.focus("spotlightId_backBtn"); diff --git a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx index fb9471ab..60626ecc 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleProduct.jsx @@ -1,12 +1,12 @@ -import React from 'react'; +import React from "react"; -import { useSelector } from 'react-redux'; +import { useSelector } from "react-redux"; -import Indicator from '../components/indicator/Indicator'; -import IndicatorOptions from '../components/indicator/IndicatorOptions'; -import ProductOption from '../components/ProductOption'; -import SingleOption from './SingleOption'; -import css from './SingleProduct.module.less'; +import Indicator from "../components/indicator/Indicator"; +import IndicatorOptions from "../components/indicator/IndicatorOptions"; +import ProductOption from "../components/ProductOption"; +import SingleOption from "./SingleOption"; +import css from "./SingleProduct.module.less"; export default function SingleProduct({ selectedPatnrId, @@ -15,7 +15,15 @@ export default function SingleProduct({ setSelectedIndex, }) { const productData = useSelector((state) => state.main.productData); + const isProductSoldOut = () => { + if (productData && productData.length > 0) { + return productData.soldoutFlag === "Y"; + } else { + return false; + } + }; + const isSoldout = isProductSoldOut(); return ( <>
@@ -23,6 +31,7 @@ export default function SingleProduct({ selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} productInfo={productData} + soldoutFlag={isSoldout} /> { Spotlight.focus("seemore_Btn"); }, [hotelInfos]); + return ( <>
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeOption.jsx index 57e2691a..ab851dea 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeOption.jsx @@ -14,6 +14,19 @@ export default function ThemeOption({ selectedIndex, setSelectedIndex }) { ); const productData = useSelector((state) => state.home.productData); + const isProductSoldOut = () => { + if ( + productInfo && + productInfo.length > selectedIndex && + selectedIndex >= 0 + ) { + return productInfo[selectedIndex]?.soldoutFlag === "Y"; + } else { + return false; + } + }; + + const isSoldout = isProductSoldOut(); return ( <>
@@ -22,6 +35,7 @@ export default function ThemeOption({ selectedIndex, setSelectedIndex }) { selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} thumbnailUrls={productInfo[selectedIndex]?.imgUrls600} + soldoutFlag={isSoldout} isSpotlight /> state.main.productData); + const isProductSoldOut = () => { + if (productData && productData.length > 0) { + return productData.soldoutFlag === "Y"; + } else { + return false; + } + }; + + const soldout = isProductSoldOut(); return ( <>
@@ -24,6 +33,7 @@ export default function UnableProduct({ selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} productInfo={productData} + soldoutFlag={soldout} /> state.common.appStatus); @@ -74,7 +69,7 @@ export default function Indicator({ return ( <> + className={classNames(css.thumbnail, soldoutFlag && css.soldout)} + > + {soldoutFlag &&

SOLD OUT

} + )}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less index 212af916..3c590d6a 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less @@ -16,12 +16,31 @@ display: flex; justify-content: center; + > h3 { + font-size: 36px; + font-weight: bold; + color: #ffffff; + margin-top: 256px; + z-index: 3; + } &:focus { &::after { .focused(@boxShadow: 22px, @borderRadius:0px); } } + &.soldout { + &:before { + .size(@w: 560px , @h: 560px); + content: ""; + position: absolute; + left: 0; + top: 0; + background-color: #7a808d; + opacity: 0.7; + } + } + .thumbnailIndicator { margin-top: auto; position: relative; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx index 0932026b..49bd7ab7 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx @@ -8,6 +8,7 @@ import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import Spottable from "@enact/spotlight/Spottable"; +import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png"; import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList"; import useScrollTo from "../../../../hooks/useScrollTo"; import css from "./ThemeIndicator.module.less"; @@ -27,6 +28,7 @@ export default function ThemeIndicator({ productInfo, thumbnailUrls, isSpotlight, + soldoutFlag, }) { const [selectedImage, setSelectedImage] = useState(null); @@ -43,6 +45,7 @@ export default function ThemeIndicator({ useEffect(() => { if (thumbnailUrls) { const image = thumbnailUrls[imageSelectedIndex]; + setSelectedImage(image); } }, [thumbnailUrls, imageSelectedIndex]); @@ -93,12 +96,10 @@ export default function ThemeIndicator({ setImageSelectedIndex(0); }; - console.log("#productInfo", productInfo[index]); - return ( <> { - if ( - productInfo && - productInfo.length && - productInfo[selectedIndex].soldoutFlag === "Y" - ) { + if (soldoutFlag) { Spotlight.focus("spotlightId_backBtn"); return; } if (productInfo && productInfo.length > 0 && isSpotlight) { - console.log("#isSpotlight", isSpotlight); Spotlight.focus("IndicatorGridlistContainer"); Spotlight.focus("indicator-image-0"); } @@ -140,30 +136,39 @@ export default function ThemeIndicator({
{productInfo && ( - + - + {soldoutFlag ? ( +

SOLD OUT

+ ) : ( + <> + - - {imageSelectedIndex + 1} / {imageLength} - - + + {imageSelectedIndex + 1} / {imageLength} + + + + )} - ) )}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less index 212af916..81f8bb89 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less @@ -21,6 +21,17 @@ .focused(@boxShadow: 22px, @borderRadius:0px); } } + &.soldout { + &:before { + .size(@w: 560px , @h: 560px); + content: ""; + position: absolute; + left: 0; + top: 0; + background-color: #7a808d; + opacity: 0.7; + } + } .thumbnailIndicator { margin-top: auto; @@ -59,6 +70,13 @@ background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg"); } } + //soldout + > h3 { + font-size: 36px; + font-weight: bold; + color: #ffffff; + margin-bottom: 237px; + } > span { // .size(@w: 51px , @h: 21px); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);