[OnSalePanel] API 구조 변경에 따른 업데이트

Detail Notes :

1. features/onsaleController/onSaleSlice.js 생성 및 logic 추가 (store 추가완료)
2. OnSalePanel.jsx, CategoryNav.jsx logic 및 props 변경
3. api/apiConfig.js brand-controller URLS 추가

P.S : api/onSaleApi.js 파일은 현재 다른 곳에서 사용중이라 해당 commit에서는 삭제하지 않았습니다.

com.twin.app.shoptime/src/App/App.js

@@ -7,6 +7,7 @@ import MainView from "../views/MainView/MainView";
 import { useDispatch } from "react-redux";
 import { getAuthenticationCode } from "../features/device/deviceSlice";
 import { getHomeMenu } from "../features/home/homeSlice";
+import { getOnSaleInfo } from "../features/onSale/onSaleSlice";
 
 function AppBase(props) {
   const dispatch = useDispatch();
@@ -14,6 +15,7 @@ function AppBase(props) {
   useEffect(() => {
     dispatch(getAuthenticationCode());
     dispatch(getHomeMenu());
+    dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" }));
   }, [dispatch]);
 
   return <MainView />;

com.twin.app.shoptime/src/features/onSale/onSaleSlice.js

@@ -0,0 +1,51 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+
+import { URLS } from "../../api/apiConfig";
+import { TAxios } from "../../api/TAxios";
+
+// On Sale 조회 IF-LGSP-086
+export const getOnSaleInfo = createAsyncThunk(
+  "onSale/getOnSaleInfo",
+
+  async (props, thunkAPI) => {
+    const { categoryIncFlag, lgCatCd } = props;
+    const onSuccess = (response) => {
+      console.log("getOnSaleInfo onSuccess ", response.data);
+
+      thunkAPI.dispatch(onSaleSlice.actions.updateOnSaleData(response.data.data));
+    };
+
+    const onFail = (error) => {
+      console.log("getOnSaleInfo onFail", error);
+    };
+
+    TAxios(
+      thunkAPI.dispatch,
+      thunkAPI.getState,
+      "get",
+      URLS.GET_ON_SALE_INFO,
+      { categoryIncFlag, lgCatCd },
+      {},
+      onSuccess,
+      onFail
+    );
+  }
+);
+
+const initialState = {
+  onSaleData: {},
+};
+
+export const onSaleSlice = createSlice({
+  name: "onSale",
+  initialState,
+  reducers: {
+    updateOnSaleData: (state, action) => {
+      state.onSaleData = action.payload;
+    },
+  },
+});
+
+export const { updateOnSaleData } = onSaleSlice.actions;
+
+export default onSaleSlice.reducer;

com.twin.app.shoptime/src/store/store.js

@@ -5,6 +5,7 @@ import deviceReducer from "../features/device/deviceSlice";
 import commonReducer from "../features/common/commonSlice";
 import panelsReducer from "../features/panels/panelsSlice";
 import homeReducer from "../features/home/homeSlice";
+import onSaleReducer from "../features/onSale/onSaleSlice";
 
 export const store = configureStore({
   reducer: {
@@ -13,5 +14,6 @@ export const store = configureStore({
     appData: appDataReducer,
     common: commonReducer,
     home: homeReducer,
+    onSale: onSaleReducer,
   },
 });

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

@@ -17,7 +17,7 @@ const SpottableComponent = Spottable("li");
 
 export default function CategoryNav({
   categoryInfos,
-  currentLgCatCdIndex,
+  currentLgCatCd,
   onCategoryNavClick,
   ...rest
 }) {
@@ -31,15 +31,12 @@ export default function CategoryNav({
       >
         <ul>
           {categoryInfos &&
-            categoryInfos.map(({ lgCatNm, lgCatCd }, index) => {
+            categoryInfos.map(({ lgCatNm, lgCatCd }) => {
               return (
                 <SpottableComponent
-                  className={classNames(
-                    css.category,
-                    currentLgCatCdIndex === index && css.selected
-                  )}
+                  className={classNames(css.category, lgCatCd === currentLgCatCd && css.selected)}
                   key={lgCatCd}
-                  onClick={() => onCategoryNavClick(lgCatCd, index)}
+                  onClick={() => onCategoryNavClick(lgCatCd)}
                 >
                   <div>
                     <span className={css[`category-icon-${lgCatCd}`]} />

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

@@ -1,87 +1,67 @@
 import React, { useEffect, useState } from "react";
 
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
-import { getOnSaleInfo } from "../../api/onSaleApi";
 import TPanel from "../../components/TPanel/TPanel";
-import CategoryNav from "./CategoryNav/CategoryNav";
+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";
-import OnSaleProductCard from "./OnSaleProductCard/OnSaleProductCard";
-import OnSaleProductsGrid from "./OnSaleProductsGrid/OnSaleProductsGrid";
 
 export default function OnSalePanel() {
   const dispatch = useDispatch();
 
-  const [currentLgCatCdIndex, setCurrentLgCatCdIndex] = useState(0);
-  const [lgCatCd, setLgCatCd] = useState("");
-  const [categoryInfos, setCategoryInfos] = useState([]);
-  const [saleInfos, setSaleInfos] = useState([]);
-  const [saleProductInfos, setSaleProductInfos] = useState([]);
+  const categoryInfos = useSelector((state) => state.onSale.onSaleData.categoryInfos);
+  const saleInfos = useSelector((state) => state.onSale.onSaleData.saleInfos);
 
-  const handleCategoryNav = (lgCatCd, index) => {
-    if (currentLgCatCdIndex === index) {
+  const [currentLgCatCd, setCurrentLgCatCd] = useState();
+
+  const handleCategoryNav = (lgCatCd) => {
+    if (currentLgCatCd === lgCatCd) {
       return;
     }
-    setCurrentLgCatCdIndex(index);
-    setLgCatCd(lgCatCd);
-  };
 
-  const getOnSaleInfoData = async (lgCatCd) => {
-    try {
-      const onSaleInfoData = await getOnSaleInfo({
-        lgCatCd,
-        categoryIncFlag: "Y",
-      });
-      console.log("On Sale Data:", onSaleInfoData);
-
-      if (onSaleInfoData) {
-        if (lgCatCd === "") {
-          setCategoryInfos(onSaleInfoData.categoryInfos);
-        }
-
-        setSaleInfos(onSaleInfoData.saleInfos);
-
-        let saleProducts = [];
-
-        for (let index = 0; index < onSaleInfoData.saleInfos.length; index++) {
-          saleProducts.push(onSaleInfoData.saleInfos[index].saleProductInfos);
-        }
-
-        setSaleProductInfos(saleProducts);
-      }
-    } catch (error) {
-      console.error("Error fetching on sale:", error);
-    }
+    setCurrentLgCatCd(lgCatCd);
   };
 
   useEffect(() => {
-    getOnSaleInfoData(lgCatCd);
-  }, [lgCatCd, currentLgCatCdIndex]);
+    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}
-        currentLgCatCdIndex={currentLgCatCdIndex}
+        currentLgCatCd={currentLgCatCd}
         onCategoryNavClick={handleCategoryNav}
       />
-
-      <section className={css.onSaleProducts}>
-        {saleInfos.map(({ saleNm }, index) => {
-          return (
-            <OnSaleProductsGrid key={saleNm} saleNm={saleNm}>
-              {saleProductInfos[index].map((saleProduct) => {
-                return (
-                  <OnSaleProductCard
-                    key={saleProduct.prdtId}
-                    saleProduct={saleProduct}
-                  />
-                );
-              })}
-            </OnSaleProductsGrid>
-          );
-        })}
-      </section>
+      <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>
   );
 }

com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.module.less

@@ -2,8 +2,6 @@
 @import "../../style/utils.module.less";
 
 .container {
-  font-family: @baseFont;
-
   .onSaleProducts {
     margin-top: 236px;
   }