디테일패널 폴더구조 변경 및 인디게이터 구현

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

@@ -1,32 +1,42 @@
-import React, { useEffect, useState } from "react";
+import React, {
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import {
   getThemeCurationDetailInfo,
   getThemeHotelDetailInfo,
-} from "../../actions/homeActions";
-import { getMainCategoryDetail } from "../../actions/mainActions";
-import { popPanel } from "../../actions/panelActions";
-import { getProductGroup } from "../../actions/productActions";
-import TBody from "../../components/TBody/TBody";
-import THeader from "../../components/THeader/THeader";
-import TPanel from "../../components/TPanel/TPanel";
-import GroupProduct from "./container/GroupProduct";
-import SingleProduct from "./container/SingleProduct";
-import ThemeProduct from "./container/ThemeProduct";
-import UnableProduct from "./container/UnableProduct";
-import YouMayLike from "./container/YouMayLike";
-import css from "./DetailPanel.module.less";
+} from '../../actions/homeActions';
+import { getMainCategoryDetail } from '../../actions/mainActions';
+import { popPanel } from '../../actions/panelActions';
+import { getProductGroup } from '../../actions/productActions';
+import TBody from '../../components/TBody/TBody';
+import THeader from '../../components/THeader/THeader';
+import TPanel from '../../components/TPanel/TPanel';
+import css from './DetailPanel.module.less';
+import GroupProduct from './GroupProduct/GroupProduct';
+import SingleProduct from './SingleProduct/SingleProduct';
+import ThemeProduct from './ThemeProduct/ThemeProduct';
+import UnableProduct from './UnableProduct/UnableProduct';
+import YouMayLike from './YouMayLike/YouMayLike';
 
 export default function ItemDetail() {
   const [selectedPatnrId, setSelectedPatnrId] = useState("");
   const [selectedPrdtId, setSelectedPrtdId] = useState("");
   const [selectedCurationId, setSelectedCurationId] = useState("");
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const productData = useSelector((state) => state.main.productData);
   const panels = useSelector((state) => state.panels.panels);
   const groupInfos = useSelector((state) => state.product.groupInfo);
+  const hotelInfos = useSelector(
+    (state) => state.home.themeCurationHotelDetailData
+  );
 
   const dispatch = useDispatch();
 
@@ -48,33 +58,37 @@ export default function ItemDetail() {
   useEffect(() => {
     getPanelInfo();
 
-    dispatch(
-      getThemeCurationDetailInfo({
-        patnrId: selectedPatnrId,
-        curationId: selectedCurationId,
-      })
-    );
-    dispatch(
-      getThemeHotelDetailInfo({
-        patnrId: selectedPatnrId,
-        curationId: selectedCurationId,
-      })
-    );
+    if (selectedCurationId) {
+      dispatch(
+        getThemeCurationDetailInfo({
+          patnrId: selectedPatnrId,
+          curationId: selectedCurationId,
+        })
+      );
+      dispatch(
+        getThemeHotelDetailInfo({
+          patnrId: selectedPatnrId,
+          curationId: selectedCurationId,
+        })
+      );
+    }
 
-    dispatch(
-      getMainCategoryDetail({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPrdtId,
-      })
-    );
+    if (selectedPrdtId) {
+      dispatch(
+        getMainCategoryDetail({
+          patnrId: selectedPatnrId,
+          prdtId: selectedPrdtId,
+        })
+      );
 
-    dispatch(
-      getProductGroup({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPrdtId,
-      })
-    );
-  }, [dispatch, panels, selectedPatnrId, selectedPrdtId]);
+      dispatch(
+        getProductGroup({
+          patnrId: selectedPatnrId,
+          prdtId: selectedPrdtId,
+        })
+      );
+    }
+  }, [dispatch, panels, selectedPatnrId, selectedPrdtId, selectedCurationId]);
 
   const onClick = () => {
     dispatch(popPanel());
@@ -83,18 +97,32 @@ export default function ItemDetail() {
     <TPanel isTabActivated={false}>
       <THeader
         className={css.header}
-        title={productData?.prdtNm}
+        title={
+          (selectedPrdtId && productData?.prdtNm) ||
+          (selectedCurationId && hotelInfos[selectedIndex]?.hotelNm)
+        }
         onBackButton
         onClick={onClick}
       />
-      <TBody className={css.container} scrollable={false}>
+      <TBody className={css.tbody} scrollable={false}>
         {/* 단일상품 영역  */}
-        {productData?.pmtSuptYn === "Y" && selectedPrdtId && (
-          <SingleProduct
-            selectedPatnrId={selectedPatnrId}
-            selectedPrdtId={selectedPrdtId}
-          />
-        )}
+        {productData?.pmtSuptYn === "Y" &&
+          productData?.grPrdtProcFlag === "N" &&
+          selectedPrdtId && (
+            <SingleProduct
+              selectedPatnrId={selectedPatnrId}
+              selectedPrdtId={selectedPrdtId}
+            />
+          )}
+        {/* 그룹상품 영역 */}
+        {productData?.pmtSuptYn === "Y" &&
+          productData?.grPrdtProcFlag === "Y " &&
+          selectedPrdtId && (
+            <GroupProduct
+              selectedPatnrId={selectedPatnrId}
+              selectedPrdtId={selectedPrdtId}
+            />
+          )}
         {/* 구매불가상품 영역 */}
         {productData?.pmtSuptYn === "N" && selectedPrdtId && (
           <UnableProduct
@@ -102,18 +130,16 @@ export default function ItemDetail() {
             selectedPrdtId={selectedPrdtId}
           />
         )}
-        {/* 그룹상품 영역 */}
-        {groupInfos && selectedPrdtId && (
-          <GroupProduct
-            selectedPatnrId={selectedPatnrId}
-            selectedPrdtId={selectedPrdtId}
-          />
-        )}
 
         {/* 테마그룹상품 영역*/}
-        {!selectedPrdtId && <ThemeProduct />}
+        {selectedCurationId && (
+          <ThemeProduct
+            selectedIndex={selectedIndex}
+            setSelectedIndex={setSelectedIndex}
+          />
+        )}
       </TBody>
-      <YouMayLike />
+      {selectedPrdtId && <YouMayLike />}
     </TPanel>
   );
 }