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

import React, { useEffect, useState } from "react";

import { useDispatch, useSelector } from "react-redux";

import TPanel from "../../components/TPanel/TPanel";
import { getOnSaleInfo } from "../../features/onSale/onSaleSlice";
import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav";
import OnSaleProductCard from "../OnSalePanel/OnSaleProductCard/OnSaleProductCard";
import OnSaleProductsGrid from "../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid";
import css from "./OnSalePanel.module.less";

export default function OnSalePanel() {
  const dispatch = useDispatch();

  const categoryInfos = useSelector((state) => state.onSale.onSaleData.categoryInfos);
  const saleInfos = useSelector((state) => state.onSale.onSaleData.saleInfos);

  const [currentLgCatCd, setCurrentLgCatCd] = useState();

  const handleCategoryNav = (lgCatCd) => {
    if (currentLgCatCd === lgCatCd) {
      return;
    }

    setCurrentLgCatCd(lgCatCd);
  };

  useEffect(() => {
    if (categoryInfos && !currentLgCatCd) {
      const initialLgCatCd = categoryInfos[0].lgCatCd;
      setCurrentLgCatCd(initialLgCatCd);
    }
  }, []);

  useEffect(() => {
    if (currentLgCatCd) {
      dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentLgCatCd }));
    }
  }, [currentLgCatCd]);

  useEffect(() => {
    console.log(categoryInfos);
    console.log(saleInfos);
  }, []);

  return (
    <TPanel className={css.container}>
      <CategoryNav
        categoryInfos={categoryInfos}
        currentLgCatCd={currentLgCatCd}
        onCategoryNavClick={handleCategoryNav}
      />
      <div className={css.onSaleProducts}>
        {saleInfos &&
          saleInfos.map(({ saleNm, saleProductInfos }) => {
            return (
              <OnSaleProductsGrid key={saleNm} saleNm={saleNm}>
                {saleProductInfos.map((saleProduct) => {
                  return <OnSaleProductCard key={saleProduct.prdtId} saleProduct={saleProduct} />;
                })}
              </OnSaleProductsGrid>
            );
          })}
      </div>
    </TPanel>
  );
}