디테일 패널 분기처리 및 파일네임 변경

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

@@ -26,9 +26,9 @@ import YouMayLike from "./container/YouMayLike";
 import css from "./DetailPanel.module.less";
 
 export default function ItemDetail() {
-  const [themeInfo, setThemeInfo] = useState("");
   const [selectedPatnrId, setSelectedPatnrId] = useState("");
   const [selectedPrdtId, setSelectedPrtdId] = useState("");
+  const [selectedCurationId, setSelectedCurationId] = useState("");
 
   const productData = useSelector((state) => state.main.productData);
   const panels = useSelector((state) => state.panels.panels);
@@ -41,7 +41,8 @@ export default function ItemDetail() {
   );
 
   const dispatch = useDispatch();
-  const getPanelInfo = useCallback(() => {
+
+  const getPanelInfo = () => {
     if (panels) {
       console.log("#panels", panels);
       for (let i = 0; i < panels.length; i++) {
@@ -49,59 +50,50 @@ export default function ItemDetail() {
           setSelectedPatnrId(panels[i].panelInfo.patnrId);
           setSelectedPrtdId(panels[i].panelInfo.prdtId);
           if (panels[0].name == "hotpickpanel") {
-            setThemeInfo(panels[i].panelInfo);
+            setSelectedPatnrId(panels[i].panelInfo.patnrId);
+            setSelectedCurationId(panels[i].panelInfo.curationId);
           }
         }
       }
     }
-  }, [panels]);
+  };
 
   useEffect(() => {
     console.log("#Detail", themeCurationDetailInfoData);
     console.log("#Hotel", themeCurationHotelDetailData);
-    console.log("#productData", productData);
-    console.log("#groupInfos", groupInfos);
-  }, [
-    themeCurationDetailInfoData,
-    themeCurationHotelDetailData,
-    productData,
-    groupInfos,
-  ]);
+  }, [themeCurationDetailInfoData, themeCurationHotelDetailData]);
 
   useEffect(() => {
     getPanelInfo();
 
-    if (themeInfo) {
-      dispatch(
-        getThemeCurationDetailInfo({
-          patnrId: themeInfo.patnrId,
-          curationId: themeInfo.curationId,
-        })
-      );
-      dispatch(
-        getThemeHotelDetailInfo({
-          patnrId: themeInfo.patnrId,
-          curationId: themeInfo.curationId,
-        })
-      );
-    }
+    console.log("#selectedPrdtId", selectedPrdtId);
+    dispatch(
+      getThemeCurationDetailInfo({
+        patnrId: selectedPatnrId,
+        curationId: selectedCurationId,
+      })
+    );
+    dispatch(
+      getThemeHotelDetailInfo({
+        patnrId: selectedPatnrId,
+        curationId: selectedCurationId,
+      })
+    );
 
-    if (!themeInfo) {
-      dispatch(
-        getMainCategoryDetail({
-          patnrId: selectedPatnrId,
-          prdtId: selectedPrdtId,
-        })
-      );
+    dispatch(
+      getMainCategoryDetail({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
 
-      dispatch(
-        getProductGroup({
-          patnrId: selectedPatnrId,
-          prdtId: selectedPrdtId,
-        })
-      );
-    }
-  }, [dispatch, panels, selectedPatnrId, selectedPrdtId, themeInfo]);
+    dispatch(
+      getProductGroup({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
+  }, [dispatch, panels, selectedPatnrId, selectedPrdtId]);
 
   const onClick = () => {
     dispatch(popPanel());
@@ -116,21 +108,21 @@ export default function ItemDetail() {
       />
       <TBody className={css.container} scrollable={false}>
         {/* 단일상품 영역  */}
-        {productData?.pmtSuptYn === "Y" && (
+        {productData?.pmtSuptYn === "Y" && selectedPrdtId && (
           <SingleProduct
             selectedPatnrId={selectedPatnrId}
             selectedPrdtId={selectedPrdtId}
           />
         )}
         {/* 구매불가상품 영역 */}
-        {productData?.pmtSuptYn === "N" && (
+        {productData?.pmtSuptYn === "N" && selectedPrdtId && (
           <UnableProduct
             selectedPatnrId={selectedPatnrId}
             selectedPrdtId={selectedPrdtId}
           />
         )}
         {/* 그룹상품 영역 */}
-        {groupInfos && (
+        {groupInfos && selectedPrdtId && (
           <GroupProduct
             selectedPatnrId={selectedPatnrId}
             selectedPrdtId={selectedPrdtId}
@@ -138,10 +130,13 @@ export default function ItemDetail() {
         )}
 
         {/* 테마그룹상품 영역*/}
-        {/* <ThemeProduct
-          selectedPatnrId={panelInfo?.patnrId}
-          selectedPrdtId={panelInfo?.prdtId}
-        /> */}
+        {(themeCurationHotelDetailData || themeCurationDetailInfoData) &&
+          !selectedPrdtId && (
+            <ThemeProduct
+              selectedPatnrId={selectedPatnrId}
+              selectedCurationId={selectedCurationId}
+            />
+          )}
       </TBody>
       <YouMayLike />
     </TPanel>