From 83905a092dcc5bba9eab75577aa57f7ff651bc4a Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Tue, 16 Dec 2025 13:55:51 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=83=81=ED=92=88=EC=83=81=EC=84=B8]=20descri?= =?UTF-8?q?ption=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=ED=8C=9D=EC=97=85=20?= =?UTF-8?q?=EB=85=B8=EC=B6=9C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 너무 긴경우 포커스가 넘어가는문제가 있어 클릭시에는 팝업이 노출되어 전체 영역을 확인할수있도록 수정. --- .../components/TPopUp/TNewPopUp.module.less | 2 +- com.twin.app.shoptime/src/utils/Config.js | 3 +- .../ProductDescription/ProductDescription.jsx | 143 +++++++++++++----- .../ProductDescription.module.less | 5 + 4 files changed, 114 insertions(+), 39 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less index 228386e0..6f519dd2 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less +++ b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less @@ -483,7 +483,7 @@ .default-style(); .scrollInfo { - width: 900px; + width: 850px; background-color: @BG_COLOR_01; color: @COLOR_GRAY03; display: flex; diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index eaf9c51e..0e9c76eb 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -113,7 +113,8 @@ export const ACTIVE_POPUP = { toast: 'toast', optionalConfirm: 'optionalConfirm', energyPopup: 'energyPopup', - addCartPopup: 'addCartPopup', + addCartPopup: 'addCartPopup', + scrollPopup: 'scrollPopup', }; export const DEBUG_VIDEO_SUBTITLE_TEST = false; export const AUTO_SCROLL_DELAY = 600; diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.jsx index 8768b092..10cd5771 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.jsx @@ -1,9 +1,32 @@ -import React, { useCallback } from "react"; -import css from "./ProductDescription.module.less"; -import { $L, removeSpecificTags } from "../../../../utils/helperMethods"; -import Spottable from "@enact/spotlight/Spottable"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spotlight from "@enact/spotlight"; +import React, { + useCallback, + useMemo, +} from 'react'; + +import { + useDispatch, + useSelector, +} from 'react-redux'; + +import Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import Spottable from '@enact/spotlight/Spottable'; + +import { + setHidePopup, + setShowPopup, +} from '../../../../actions/commonActions'; +import TButtonScroller + from '../../../../components/TButtonScroller/TButtonScroller'; +import TNewPopUp from '../../../../components/TPopUp/TNewPopUp'; +import * as Config from '../../../../utils/Config'; +import { + $L, + removeSpecificTags, +} from '../../../../utils/helperMethods'; +import css from './ProductDescription.module.less'; + // TVerticalPagenator 제거됨 - TScrollerNew와 충돌 문제로 인해 const SpottableComponent = Spottable("div"); @@ -18,12 +41,23 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function ProductDescription({ productInfo }) { +export default function ProductDescription({ productInfo }) { + const { popupVisible, activePopup } = useSelector( + (state) => state.common.popup + ); + + const dispatch = useDispatch(); + + const productDescription = useCallback(() => { const sanitizedString = removeSpecificTags(productInfo?.prdtDesc); return { __html: sanitizedString }; }, [productInfo?.prdtDesc]); + const productDescriptionText = useMemo(() => { + return removeSpecificTags(productInfo?.prdtDesc); + }, [productInfo?.prdtDesc]); + // 왼쪽 화살표 키 이벤트 처리 const handleKeyDown = useCallback((ev) => { if (ev.keyCode === 37) { // 왼쪽 화살표 키 @@ -34,6 +68,16 @@ export default function ProductDescription({ productInfo }) { } }, []); + const descriptionClick = useCallback(() => { + dispatch(setShowPopup(Config.ACTIVE_POPUP.scrollPopup)); + }, + [dispatch] + ); + + const _onClose = useCallback(()=>{ + dispatch(setHidePopup()); + },[dispatch]) + // ProductDescription: Container 직접 사용 패턴 // prdtDesc가 없으면 렌더링하지 않음 if (!productInfo?.prdtDesc) { @@ -41,36 +85,61 @@ export default function ProductDescription({ productInfo }) { } return ( - - {/* console.log("[ProductDescription] Title clicked")} - onFocus={() => console.log("[ProductDescription] Title focused")} - onBlur={() => console.log("[ProductDescription] Title blurred")} - > */} -
-
{$L("DESCRIPTION")}
-
- - {/* */} - - console.log("[ProductDescription] Content clicked")} - onFocus={() => console.log("[ProductDescription] Content focused")} - onBlur={() => console.log("[ProductDescription] Content blurred")} - onKeyDown={handleKeyDown} + <> + -
- - + {/* console.log("[ProductDescription] Title clicked")} + onFocus={() => console.log("[ProductDescription] Title focused")} + onBlur={() => console.log("[ProductDescription] Title blurred")} + > */} +
+
{$L("DESCRIPTION")}
+
+ + {/* */} + + console.log("[ProductDescription] Content clicked")} + onClick={descriptionClick} + onFocus={() => console.log("[ProductDescription] Content focused")} + onBlur={() => console.log("[ProductDescription] Content blurred")} + onKeyDown={handleKeyDown} + > +
+ + + {activePopup === Config.ACTIVE_POPUP.scrollPopup && ( + + +
+ + + )} + ); } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less index e651bc82..ca1faaf7 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less @@ -51,3 +51,8 @@ } } +.scrollContainer { + padding: 31px; + font-size: 26px; + line-height: 1.5; +}