[FeaturedBrandsPanel] 추가

Detail Notes :

1. dispatch 추가, (getBrandRecommendedShowInfo)
2. component 추가, RecommendedShows

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

@@ -9,6 +9,7 @@ import {
   getBrandLayoutInfo,
   getBrandList,
   getBrandLiveChannelInfo,
+  getBrandRecommendedShowInfo,
   getBrandTSVInfo,
 } from "../../actions/brandActions";
 import TBody from "../../components/TBody/TBody";
@@ -18,6 +19,7 @@ import FeaturedBestSeller from "./FeaturedBestSeller/FeaturedBestSeller";
 import css from "./FeaturedBrandsPanel.module.less";
 import LiveChannels from "./LiveChannels/LiveChannels";
 import QuickMenu from "./QuickMenu/QuickMenu";
+import RecommendedShows from "./RecommendedShows/RecommendedShows";
 import TodaysDeals from "./TodaysDeals/TodaysDeals";
 import UpComing from "./UpComing/UpComing";
 
@@ -52,9 +54,17 @@ export default function FeaturedBrandsPanel() {
   const brandBestSellerInfo = useSelector(
     (state) => state.brand.brandBestSellerData.brandBestSellerInfo
   );
+  const brandRecommendedShowCategoryInfo = useSelector(
+    (state) =>
+      state.brand.brandRecommendedShowInfoData.brandRecommendedShowCategoryInfo
+  );
+  const brandRecommendedShowInfo = useSelector(
+    (state) => state.brand.brandRecommendedShowInfoData.brandRecommendedShowInfo
+  );
 
   const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo));
   const [selectedBrandInfo, setSelectedBrandInfo] = useState();
+  const [brandCategoryInfo, setBrandCategoryInfo] = useState();
 
   useEffect(() => {
     if (!brandInfo) {
@@ -63,15 +73,29 @@ export default function FeaturedBrandsPanel() {
   }, [brandInfo, dispatch]);
 
   useEffect(() => {
+    console.log("@@ [brand sideEffect]");
     if (brandInfo && selectedPatnrId) {
       setSelectedBrandInfo(findItemByPatnrId(brandInfo, selectedPatnrId));
       dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
       dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
       dispatch(getBrandTSVInfo({ patnrId: selectedPatnrId }));
       dispatch(getBrandBestSeller({ patnrId: selectedPatnrId }));
+      dispatch(getBrandRecommendedShowInfo({ patnrId: selectedPatnrId }));
     }
   }, [brandInfo, dispatch, selectedPatnrId]);
 
+  useEffect(() => {
+    console.log("@@ [category sideEffect]");
+    if (brandCategoryInfo) {
+      dispatch(
+        getBrandRecommendedShowInfo({
+          catCd: brandCategoryInfo,
+          patnrId: selectedPatnrId,
+        })
+      );
+    }
+  }, [brandCategoryInfo, dispatch]);
+
   useEffect(() => {
     // @@pyh Todo, loading 적용 이후 loading으로 조건 추가
     if (selectedPatnrId) {
@@ -117,6 +141,17 @@ export default function FeaturedBrandsPanel() {
           {brandBestSellerInfo && ( // @@pyh Todo, 추후 노출 조건 전달 (현재 노출 조건 존재 하지 않음)
             <FeaturedBestSeller brandBestSellerInfo={brandBestSellerInfo} />
           )}
+
+          {brandRecommendedShowCategoryInfo &&
+            brandRecommendedShowInfo && ( // @@pyh Todo, 노출 조건 문의 (현재 노출 조건 존재 하지 않음)
+              <RecommendedShows
+                brandRecommendedShowCategoryInfo={
+                  brandRecommendedShowCategoryInfo
+                }
+                brandRecommendedShowInfo={brandRecommendedShowInfo}
+                setBrandCategoryInfo={setBrandCategoryInfo}
+              />
+            )}
         </div>
       </TBody>
     </TPanel>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.jsx

@@ -0,0 +1,33 @@
+import React, { memo } from "react";
+
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import { $L } from "../../../utils/helperMethods";
+import css from "./RecommendedShows.module.less";
+
+const STRING_CONF = {
+  RECOMMENDED_SHOWS: $L("RECOMMENDED SHOWS"),
+};
+
+export default function RecommendedShows({
+  brandRecommendedShowCategoryInfo,
+  brandRecommendedShowInfo,
+  setBrandCategoryInfo,
+}) {
+  const handleClick = (catCd) => {
+    console.log("@@catCd", catCd);
+    setBrandCategoryInfo(String(catCd));
+  };
+
+  return (
+    <div className={css.container}>
+      <SectionTitle title={STRING_CONF.RECOMMENDED_SHOWS} />
+
+      {brandRecommendedShowCategoryInfo &&
+        brandRecommendedShowCategoryInfo.map(({ catNm, catCd }) => (
+          <div key={catNm} onClick={() => handleClick(catCd)}>
+            {catNm} {catCd}
+          </div>
+        ))}
+    </div>
+  );
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShows.module.less

@@ -0,0 +1,10 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.container {
+  margin-bottom: 58px;
+
+  h2 {
+    margin-bottom: 24px;
+  }
+}

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "RecommendedShows.jsx",
+  "styles": [
+    "RecommendedShows.module.less"
+  ]
+}