[상품상세] description 클릭시 팝업 노출 처리

- 너무 긴경우 포커스가 넘어가는문제가 있어 클릭시에는 팝업이 노출되어 전체 영역을 확인할수있도록 수정.

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;

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;

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.jsx

@@ -1,9 +1,32 @@
-import React, { useCallback } from "react";
+import React, {
-import css from "./ProductDescription.module.less";
+  useCallback,
-import { $L, removeSpecificTags } from "../../../../utils/helperMethods";
+  useMemo,
-import Spottable from "@enact/spotlight/Spottable";
+} from 'react';
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
-import Spotlight from "@enact/spotlight";
+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 (
-    <Container 
+    <>
-      className={css.descriptionContainer}
+      <Container 
-      spotlightId="product-description-container"
+        className={css.descriptionContainer}
-    >
+        spotlightId="product-description-container"
-      {/* <SpottableComponent 
-        className={css.titleWrapper}
-        spotlightId="product-description-title"
-        onClick={() => console.log("[ProductDescription] Title clicked")}
-        onFocus={() => console.log("[ProductDescription] Title focused")}
-        onBlur={() => console.log("[ProductDescription] Title blurred")}
-      > */}
-      <div className={css.titleWrapper}>
-        <div className={css.title}>{$L("DESCRIPTION")}</div>
-      </div>
-      
-      {/* </SpottableComponent> */}
-      
-      <SpottableComponent 
-        className={css.descriptionWrapper}
-        spotlightId="product-description-content"
-        onClick={() => console.log("[ProductDescription] Content clicked")}
-        onFocus={() => console.log("[ProductDescription] Content focused")}
-        onBlur={() => console.log("[ProductDescription] Content blurred")}
-        onKeyDown={handleKeyDown}
       >
-        <div
+        {/* <SpottableComponent 
-          className={css.productDescription}
+          className={css.titleWrapper}
-          dangerouslySetInnerHTML={productDescription()}
+          spotlightId="product-description-title"
-        />
+          onClick={() => console.log("[ProductDescription] Title clicked")}
-      </SpottableComponent>
+          onFocus={() => console.log("[ProductDescription] Title focused")}
-    </Container>
+          onBlur={() => console.log("[ProductDescription] Title blurred")}
+        > */}
+        <div className={css.titleWrapper}>
+          <div className={css.title}>{$L("DESCRIPTION")}</div>
+        </div>
+        
+        {/* </SpottableComponent> */}
+        
+        <SpottableComponent 
+          className={css.descriptionWrapper}
+          spotlightId="product-description-content"
+          // onClick={() => console.log("[ProductDescription] Content clicked")}
+          onClick={descriptionClick}
+          onFocus={() => console.log("[ProductDescription] Content focused")}
+          onBlur={() => console.log("[ProductDescription] Content blurred")}
+          onKeyDown={handleKeyDown}
+        >
+          <div
+            className={css.productDescription}
+            dangerouslySetInnerHTML={productDescription()}
+          />
+        </SpottableComponent>
+      </Container>
+      {activePopup === Config.ACTIVE_POPUP.scrollPopup && (
+      <TNewPopUp
+        kind="scrollPopup"
+        open={popupVisible}
+        hasText
+        title={$L("DESCRIPTION")}        
+        onClick={_onClose}
+        hasButton
+        button1Text={$L("OK")}
+      >
+        <TButtonScroller
+          boxHeight={460} 
+          width={844} 
+          kind={"figmaTermsPopup"}
+        >
+          <div
+            className={css.scrollContainer}
+            dangerouslySetInnerHTML={{ __html: productDescriptionText }}
+          />
+        </TButtonScroller>
+      </TNewPopUp>
+      )}
+    </>
   );
 }

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;
+}