[DetailPanel] webOSVersion < 6 조건일때 결제가능상품 분기처리

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

@@ -65,6 +65,11 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
+  const webOSVersion = useSelector(
+    (state) => state.common.appStatus.webOSVersion
+  );
+
+  console.log("#webOSVersion", webOSVersion);
   const dispatch = useDispatch();
 
   const shopByMobileLogRef = useRef(null);
@@ -223,6 +228,37 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     }
   }, [themeProductInfos, hotelInfos, selectedIndex, productData, type]);
 
+  const isBillingProductVisible = useMemo(() => {
+    return (
+      productData?.pmtSuptYn === "Y" &&
+      productData?.grPrdtProcYn === "N" &&
+      prdtId &&
+      Number(webOSVersion) >= 6.0
+    );
+  }, [productData, webOSVersion, prdtId]);
+
+  const isUnavailableProductVisible = useMemo(() => {
+    return (
+      productData?.pmtSuptYn === "N" ||
+      (productData?.pmtSuptYn === "Y" &&
+        productData?.grPrdtProcYn === "N" &&
+        Number(webOSVersion) < 6.0 &&
+        prdtId)
+    );
+  }, [productData, webOSVersion, prdtId]);
+
+  const isGroupProductVisible = useMemo(() => {
+    return (
+      productData?.pmtSuptYn === "Y" &&
+      productData?.grPrdtProcYn === "Y" &&
+      groupInfos
+    );
+  }, [productData, groupInfos]);
+
+  const isTravelProductVisible = useMemo(() => {
+    return curationId && (hotelInfos || themeData);
+  }, [curationId, hotelInfos, themeData]);
+
   const Price = () => {
     return (
       <>
@@ -297,36 +333,20 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           scrollable={false}
           spotlightDisabled={!isOnTop}
         >
-          {/* 단일상품 영역  */}
-          {productData?.pmtSuptYn === "Y" &&
-            productData?.grPrdtProcYn === "N" &&
-            prdtId && (
-              <SingleProduct
-                isOnTop={isOnTop}
-                panelInfo={panelInfo}
-                selectedPatnrId={patnrId}
-                selectedPrdtId={prdtId}
-                selectedIndex={selectedIndex}
-                setSelectedIndex={setSelectedIndex}
-                shopByMobileLogRef={shopByMobileLogRef}
-              />
-            )}
-          {/* 그룹상품 영역 */}
-          {productData?.pmtSuptYn === "Y" &&
-            productData?.grPrdtProcYn === "Y" &&
-            groupInfos && (
-              <GroupProduct
-                isOnTop={isOnTop}
-                panelInfo={panelInfo}
-                selectedPatnrId={patnrId}
-                selectedPrdtId={prdtId}
-                selectedIndex={selectedIndex}
-                setSelectedIndex={setSelectedIndex}
-                shopByMobileLogRef={shopByMobileLogRef}
-              />
-            )}
+          {/* 결제가능상품 영역 */}
+          {isBillingProductVisible && (
+            <SingleProduct
+              isOnTop={isOnTop}
+              panelInfo={panelInfo}
+              selectedPatnrId={patnrId}
+              selectedPrdtId={prdtId}
+              selectedIndex={selectedIndex}
+              setSelectedIndex={setSelectedIndex}
+              shopByMobileLogRef={shopByMobileLogRef}
+            />
+          )}
           {/* 구매불가상품 영역 */}
-          {productData?.pmtSuptYn === "N" && prdtId && (
+          {isUnavailableProductVisible && (
             <UnableProduct
               isOnTop={isOnTop}
               panelInfo={panelInfo}
@@ -337,8 +357,21 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
               shopByMobileLogRef={shopByMobileLogRef}
             />
           )}
+
+          {/* 그룹상품 영역 */}
+          {isGroupProductVisible && (
+            <GroupProduct
+              isOnTop={isOnTop}
+              panelInfo={panelInfo}
+              selectedPatnrId={patnrId}
+              selectedPrdtId={prdtId}
+              selectedIndex={selectedIndex}
+              setSelectedIndex={setSelectedIndex}
+              shopByMobileLogRef={shopByMobileLogRef}
+            />
+          )}
           {/* 테마그룹상품 영역*/}
-          {curationId && (hotelInfos || themeData) && (
+          {isTravelProductVisible && (
             <ThemeProduct
               isOnTop={isOnTop}
               panelInfo={panelInfo}