diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index f45f6d96..08c9e3bd 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx @@ -1,25 +1,46 @@ // src/views/DetailPanel/DetailPanel.new.jsx -import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import React, { + useCallback, + useEffect, + useLayoutEffect, + useMemo, + useRef, + useState, +} from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { + useDispatch, + useSelector, +} from 'react-redux'; import Spotlight from '@enact/spotlight'; import { setContainerLastFocusedElement } from '@enact/spotlight/src/container'; import { getDeviceAdditionInfo } from '../../actions/deviceActions'; -import { getThemeCurationDetailInfo, updateHomeInfo } from '../../actions/homeActions'; -import { getMainCategoryDetail, getMainYouMayLike } from '../../actions/mainActions'; -import { finishModalMediaForce } from '../../actions/mediaActions'; -import { popPanel, updatePanel } from '../../actions/panelActions'; import { -// <<<<<<< HEAD + getThemeCurationDetailInfo, + updateHomeInfo, +} from '../../actions/homeActions'; +import { + getMainCategoryDetail, + getMainYouMayLike, +} from '../../actions/mainActions'; +import { finishModalMediaForce } from '../../actions/mediaActions'; +import { + popPanel, + updatePanel, +} from '../../actions/panelActions'; +import { finishVideoPreview, pauseFullscreenVideo, - resumeFullscreenVideo, pauseModalVideo, + resumeFullscreenVideo, resumeModalVideo, } from '../../actions/playActions'; -import { clearProductDetail, getProductOptionId } from '../../actions/productActions'; +import { + clearProductDetail, + getProductOptionId, +} from '../../actions/productActions'; import { clearAllToasts } from '../../actions/toastActions'; import TBody from '../../components/TBody/TBody'; import TPanel from '../../components/TPanel/TPanel'; @@ -31,6 +52,7 @@ import THeaderCustom from './components/THeaderCustom'; import css from './DetailPanel.module.less'; import ProductAllSection from './ProductAllSection/ProductAllSection'; import ThemeItemListOverlay from './ThemeItemListOverlay/ThemeItemListOverlay'; + // ======= // changeAppStatus, // changeLocalSettings, @@ -929,12 +951,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { } }, [themeData, selectedIndex]); - // 타이틀과 aria-label 메모이제이션 (성능 최적화) + // 타이틀과 aria-label 메모이제이션 (성능 최적화 // themeTitle과 haederTitle 분리.) const headerTitle = useMemo( () => fp.pipe( - () => ({ panelPrdtId, productData, panelType, themeData }), - ({ panelPrdtId, productData, panelType, themeData }) => { + () => ({ panelPrdtId, productData }), + ({ panelPrdtId, productData }) => { const productTitle = fp.pipe( () => ({ panelPrdtId, productData }), ({ panelPrdtId, productData }) => @@ -943,7 +965,17 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { ? fp.pipe(() => productData, fp.get('prdtNm'))() : null )(); + return productTitle || ''; + } + )(), + [panelPrdtId, productData] + ); + const themeHeaderTitle = useMemo( + () => + fp.pipe( + () => ({ panelType, themeData }), + ({ panelType, themeData }) => { const themeTitle = fp.pipe( () => ({ panelType, themeData }), ({ panelType, themeData }) => @@ -952,12 +984,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { : null )(); - return productTitle || themeTitle || ''; + return themeTitle || ''; } )(), - [panelPrdtId, productData, panelType, themeData] + [panelType, themeData] ); + + const ariaLabel = useMemo( () => fp.pipe( @@ -1071,6 +1105,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { className={css.header} prdtId={productData?.prdtId} title={headerTitle} + themeTitle={themeHeaderTitle} + selectedIndex={selectedIndex} + type={panelInfo?.type === "theme" ? "theme" : null} onBackButton onClick={onBackClick(false)} onBackButtonFocus={onBackButtonFocus} @@ -1079,8 +1116,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { onSpotlightLeft={onSpotlightUpTButton} marqueeDisabled={false} ariaLabel={ariaLabel} - logoImg={productData?.patncLogoPath} + logoImg={productData?.patncLogoPath ? productData?.patncLogoPath : themeData?.productInfos[0]?.patncLogoPath} patnrId={panelPatnrId} + themeData={themeData} />
{isShowQRCode ? ( - + <> + {/* */} + + ) : (
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less index 75f94b57..4057b505 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less @@ -321,12 +321,12 @@ .qrcode { > div:first-child { // 명시적으로 크기 고정 및 오버플로우 처리 - width: 240px !important; - height: 240px !important; - max-width: 240px !important; - max-height: 240px !important; - min-width: 240px !important; - min-height: 240px !important; + width: 190px !important; + height: 190px !important; + max-width: 190px !important; + max-height: 190px !important; + min-width: 190px !important; + min-height: 190px !important; overflow: hidden; box-sizing: border-box; @@ -346,8 +346,8 @@ justify-content: center; align-items: center; text-align: center; - width: 240px; - height: 240px; + width: 190px; + height: 190px; background: #fff; border: 1px solid #fff; .innerText { @@ -355,7 +355,7 @@ padding: 0 20px; h3 { word-break: break-word; - font-size: 36px; + font-size: 30px; font-weight: bold; color: @PRIMARY_COLOR_RED; & + p { @@ -363,7 +363,7 @@ } } p { - font-size: 24px; + font-size: 18px; font-weight: bold; line-height: 1.17; color: @COLOR_GRAY05; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less index 4742a306..cc2ceaea 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less @@ -11,13 +11,13 @@ } &.detailQrcode { > div:first-child { - width: 240px; - height: 240px; + width: 190px; + height: 190px; } } .tooltip { margin-top: 10px; - width: 240px; + width: 190px; height: 60px; background: #000; color: #fff; @@ -39,7 +39,7 @@ position: relative; width: 100%; height: 44px; - font-size: 20px; + font-size: 16px; line-height: 22px; letter-spacing: -1px; display: flex; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less index f2504c26..393e786d 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less @@ -2,10 +2,12 @@ @import "../../../style/utils.module.less"; .container { + margin-bottom: 10px; // .size(@w:100%,@h:100%); - .size(@w:100%,@h:334px); + .size(@w:100%,@h:370px); .productInfoWrapper { .flex(@justifyCenter:flex-start,@alignCenter:flex-start); + flex-wrap: wrap; // margin: 54px 0 10px 0; margin: 20px 0 10px 0; // 고정 높이로 인해 QR 영역과 하단 버튼 영역 사이에 과도한 여백이 생김 diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx index 15031a90..d6ddc9f7 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx @@ -171,48 +171,53 @@ export default function ProductPriceDisplay({ productType, productInfo }) { <> {productType && productInfo && ( /*
*/ -
- {/* shop by mobile (구매불가) 상품 price render */} - {(productType === "shopByMobile" || isThemeShopByMobile) && ( - - )} - - {/* buy now (결제 가능) 상품 price render */} - {(productType === "buyNow" || isThemeBuyNow) && ( - - )} -
- {euEnrgLblInfos && (countryCode === "GB" || countryCode === "DE") && euEnrgLblInfos.map((item, index)=>{ - return( - onEnergyClick(e, item.enrgLblUrl)} - aria-label={`Energy Efficiency ${item.enrgGrade || ""}`} - className={css.enrgLbImg} - > - - - ) - })} + <> +
+ {productInfo.prdtNm}
-
+
+ {/* shop by mobile (구매불가) 상품 price render */} + {(productType === "shopByMobile" || isThemeShopByMobile) && ( + + )} + + {/* buy now (결제 가능) 상품 price render */} + {(productType === "buyNow" || isThemeBuyNow) && ( + + )} +
+ {euEnrgLblInfos && (countryCode === "GB" || countryCode === "DE") && euEnrgLblInfos.map((item, index)=>{ + return( + onEnergyClick(e, item.enrgLblUrl)} + aria-label={`Energy Efficiency ${item.enrgGrade || ""}`} + className={css.enrgLbImg} + > + + + ) + })} +
+
+ )} {(() => { // 팝업이 표시되어야 하는 조건 검증 diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less index 54a40c92..00ab657b 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less @@ -184,3 +184,13 @@ height: auto; object-fit: contain; // 비율 유지하면서 컨테이너에 맞춤 } + +.productNm { + width: 100%; + font-weight: bold; + font-size: 36px; + color: @COLOR_WHITE; + flex:none; + .elip(2); + margin-bottom: 20px; +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx index c4dea289..a46fb901 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx @@ -123,14 +123,16 @@ export default function ShopByMobilePriceDisplay({ {isDiscountedPriceEmpty ? offerInfo : discountedPrice} - {isDiscounted && ( - - {originalPrice && isOriginalPriceEmpty - ? offerInfo - : originalPrice} - - )}
+ {isDiscounted && ( +
+ + {originalPrice && isOriginalPriceEmpty + ? offerInfo + : originalPrice} + +
+ )}
); } else if (TYPE_CASE.case3) { @@ -150,14 +152,17 @@ export default function ShopByMobilePriceDisplay({ {isDiscountedPriceEmpty ? offerInfo : discountedPrice} - {isDiscounted && ( - - {originalPrice && isOriginalPriceEmpty - ? offerInfo - : originalPrice} - - )}
+ {isDiscounted && ( +
+ + {originalPrice && isOriginalPriceEmpty + ? offerInfo + : originalPrice} + +
+ )} + {/* 할부 */}
); @@ -172,7 +177,7 @@ export default function ShopByMobilePriceDisplay({ )} {$L("Shop Time Price")}
-
+
{discountedPrice} {discountedPrice !== originalPrice && ( diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less index 8e4071cb..5db90963 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less @@ -40,6 +40,11 @@ display: flex; align-items: center; } + .btmLayer2 { + margin: 5px 0; + display: flex; + align-items: center; + } .price { font-weight: bold; font-size: 52px; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx index bad17487..32b7380d 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx @@ -24,6 +24,9 @@ const SpottableComponent = Spottable("button"); export default function THeaderCustom({ prdtId, title, + type, + themeTitle, + selectedIndex, className, onBackButton, onSpotlightUp, @@ -36,15 +39,18 @@ export default function THeaderCustom({ kind, logoImg, patnrId, + themeData, ...rest }) { const convertedTitle = useMemo(() => { if (title && typeof title === "string") { const cleanedTitle = title.replace(/(\r\n|\n)/g, ""); return $L(marqueeDisabled ? title : cleanedTitle); + } else if(type === "theme") { + return themeData?.productInfos[selectedIndex].prdtNm; } return ""; - }, [marqueeDisabled, title]); + }, [marqueeDisabled, title, selectedIndex, themeData, type]); const _onClick = useCallback( (e) => { @@ -87,6 +93,9 @@ export default function THeaderCustom({ role="button" /> )} + {type === "theme" && themeTitle && ( + + )} {kind ? ( "" ) : ( diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less index 33fd8abf..062658c5 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less @@ -54,3 +54,11 @@ margin-right: 10px; // 파트너사 로고 후 10px gap border-radius: 100%; } + +.themeTitle { + font-size: 25px; + font-weight: 600; + color: #eaeaea; + width: max-content; + margin-right: 20px; +} \ No newline at end of file