[포유 작업]#3

- foryouaction,reducer 받는부분 변경 및 추가 . - 베스트셀러,픽포유,파퓰러쇼,저스트포유패널 노출 변경 및 수정 작업 - 홈배너 데이터 불러오는부분 수정 및 변경.
2025-11-10 19:31:07 +09:00
parent 0050f9043c
commit bde1fb4eef
9 changed files with 132 additions and 67 deletions
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -313,6 +313,7 @@ export const types = {
  GET_LIKE_BRAND_PRODUCT: 'GET_LIKE_BRAND_PRODUCT',
  GET_MORE_TO_CONCIDER_AT_THIS_PRICE: 'GET_MORE_TO_CONCIDER_AT_THIS_PRICE',
  GET_JUSTFORYOU_INFO: 'GET_JUSTFORYOU_INFO',
+  JUSTFORYOU: 'JUSTFORYOU',

  // 🔽 Voice Conductor 관련 액션 타입
  VOICE_REGISTER_SUCCESS: 'VOICE_REGISTER_SUCCESS',
--- a/com.twin.app.shoptime/src/actions/forYouActions.js
+++ b/com.twin.app.shoptime/src/actions/forYouActions.js
@@ -54,3 +54,34 @@ export const getJustForYouInfo = (callback) => (dispatch, getState) => {
    onFail
  );
 };
+
+export const justForYou = (callback) => (dispatch, getState) => {
+  const macAddress = getState().common.macAddress;
+  const macAddr = macAddress?.wired || macAddress?.wifi || "00:1A:2B:3C:4D:5E";
+  const onSuccess = (response) => {
+    console.log("JustForYou onSuccess", response.data);
+    dispatch({
+      type: types.JUSTFORYOU,
+      payload: get("data.data", response),
+    });
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+    callback && callback();
+  };
+
+  const onFail = (error) => {
+    console.error("JustForYou onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+    callback && callback();
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "post",
+    URLS.JUSTFORYOU,
+    {},
+    {macAddr},
+    onSuccess,
+    onFail
+  );
+};
--- a/com.twin.app.shoptime/src/api/apiConfig.js
+++ b/com.twin.app.shoptime/src/api/apiConfig.js
@@ -143,6 +143,8 @@ export const URLS = {

  // foryou controller
  GET_JUSTFORYOU_INFO: "/lgsp/v1/justforyou/list.lge",
+  JUSTFORYOU: "/lgsp/v1/recommend/justforyou.lge",
+  

  // emp controller
  GET_SHOPTIME_TERMS: "/lgsp/v1/emp/shoptime/terms.lge",
--- a/com.twin.app.shoptime/src/reducers/forYouReducer.js
+++ b/com.twin.app.shoptime/src/reducers/forYouReducer.js
@@ -13,6 +13,7 @@ import {
 // };
 const initialState = {
  justForYouInfo: {},
+  recommendInfo: {},
 };

 // const foryouReducer = (state = initialState, action) => {
@@ -47,8 +48,13 @@ const justForYouInfo = curry((state, action) =>
  set("justForYouInfo", get("payload", action), state)
 );

+const recommendInfo = curry((state, action) =>
+  set("recommendInfo", get("payload", action), state)
+);
+
 const handlers = {
  [types.GET_JUSTFORYOU_INFO]: justForYouInfo,
+  [types.JUSTFORYOU]: recommendInfo,
 };

 export const foryouReducer = (state = initialState, action = {}) => {
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -67,11 +67,13 @@ const BestSeller = ({

  const { cursorVisible } = useSelector((state) => state.common.appStatus);

-  
+  const bestSellerDatas = useSelector(
+      (state) => state.product.bestSellerData?.bestSeller
+    );

  const bestSellerNewDatas = useSelector(
    (state) =>
-    state.foryou?.justForYouInfo?.shelfInfos
+    state.foryou?.recommendInfo?.recommendProduct
  ); 


@@ -80,6 +82,7 @@ const BestSeller = ({
  const [firstChk, setFirstChk] = useState(0);

  const [bestInfos, setBestInfos] = useState(null);
+  const [bestItemNewData, setBestItemNewData] = useState([]);

  useEffect(()=>{
      setBestInfos(
@@ -89,6 +92,24 @@ const BestSeller = ({
      )    
    },[bestSellerNewDatas])

+    useEffect(() => {
+        const recommendedData = bestInfos?.[0].productInfos?.slice(0, 2).map((item) => ({
+          ...item,
+          foryou: true,
+        })) || [];
+        
+        const recommendedPrdtIds = new Set(recommendedData.map(item => item.prdtId));
+        
+        const baseData = bestSellerDatas?.filter(
+          (item) => !recommendedPrdtIds.has(item.prdtId)
+        ).map((item) => ({
+          ...item,
+          foryou: false,
+        })) || [];
+        
+        setBestItemNewData([...recommendedData, ...baseData]);
+      }, [bestSellerDatas, bestInfos?.[0].productInfos]);
+
  const orderStyle = useMemo(() => ({ order: order }), [order]);

  useEffect(() => {    
@@ -213,8 +234,8 @@ const BestSeller = ({
        cbScrollTo={getScrollTo}
        noScrollByWheel
      >
-        {bestInfos &&
-          bestInfos?.[0].productInfos.map(
+        {bestItemNewData &&
+          bestItemNewData.map(
            (
              {
                prdtId,
@@ -227,7 +248,7 @@ const BestSeller = ({
                brndNm,
                patncNm,
                //catNm, 없음
-                //foryou,
+                foryou,
                euEnrgLblInfos,
              },
              itemIndex
@@ -269,7 +290,7 @@ const BestSeller = ({
                  lastLabel=" go to detail, button"
                  euEnrgLblInfos={euEnrgLblInfos}
                >
-                  {/* {foryou === true && <Tag text={"For You"} />} */}
+                  {foryou === true && <Tag text={"For You"} />}
                </TItemCardNew>
              );
            }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx
@@ -28,7 +28,7 @@ import {
  setOptionalTermsUserDecision,
  updateOptionalTermsAgreement,
 } from '../../../actions/commonActions';
-import { getJustForYouInfo } from '../../../actions/forYouActions';
+import { justForYou } from '../../../actions/forYouActions';
 import {
  fetchCurrentUserHomeTerms,
  setDefaultFocus,
@@ -39,11 +39,11 @@ import {
  pushPanel,
 } from '../../../actions/panelActions';
 import {
+  clearAllVideoTimers,
  releasePlayControl,
  requestPlayControl,
  startVideoPlayer,
  startVideoPlayerNew,
-  clearAllVideoTimers,
 } from '../../../actions/playActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 // import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
@@ -82,8 +82,8 @@ export default function HomeBanner({
  handleShelfFocus,
 }) {
  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(getJustForYouInfo());
+  useEffect(() => {    
+    dispatch(justForYou());
  }, [dispatch]);
  const homeTopDisplayInfo = useSelector(
    (state) => state.home.homeTopDisplayInfo
--- a/com.twin.app.shoptime/src/views/HomePanel/PickedForYou/PickedForYou.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PickedForYou/PickedForYou.jsx
@@ -63,14 +63,9 @@ const PickedForYou = ({

  const { cursorVisible } = useSelector((state) => state.common.appStatus);

-  const justForYouDatas = useSelector(
-    (state) => state.product.bestSellerData?.bestSeller
-  );
-
  const justForYouDatasNew = useSelector(
-    (state) => state.foryou?.justForYouInfo?.shelfInfos    
+    (state) => state.foryou?.recommendInfo?.recommendProduct    
  )
-
  
  const [drawChk, setDrawChk] = useState(false);
  const [firstChk, setFirstChk] = useState(0);
@@ -89,7 +84,7 @@ const PickedForYou = ({
  
  useEffect(() => {
    setDrawChk(true);
-  }, [justForYouDatas]);
+  }, [justForYouDatasNew]);

  const handleCardClick = useCallback(
    (patnrId, prdtId) => () => {
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -71,17 +71,48 @@ const PopularShow = ({
  const { cursorVisible } = useSelector((state) => state.common.appStatus);

  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+  const recommendInfo = useSelector((state) => state.foryou?.recommendInfo?.recommendShow);
+  

-  const [drawChk, setDrawChk] = useState(false);

  const orderStyle = useMemo(() => ({ order: order }), [order]);
-
+  const [drawChk, setDrawChk] = useState(false);
  const [firstChk, setFirstChk] = useState(0);

+  const [showInfos, setShowInfos] = useState(null);
+  const [showNewInfos, setShowNewInfos] = useState([]);
+
  useEffect(() => {
-    setDrawChk(true);
+    setDrawChk(true);    
  }, [topInfos]);

+  useEffect(()=>{
+    setShowInfos(
+      recommendInfo?.filter(
+        (item) => item.recommendTpCd === "POPULARSHOW"
+      )
+    )
+  },[recommendInfo])
+
+  useEffect(() => {
+    const recommendedData = showInfos?.[0].showInfos?.slice(0, 2).map((item) => ({
+      ...item,
+      foryou: true,
+    })) || [];
+    
+    const recommendedPrdtIds = new Set(recommendedData?.map(item => item.showId));
+    
+    const baseData = topInfos?.filter(
+      (item) => !recommendedPrdtIds.has(item.showId)
+      ).map((item) => ({
+        ...item,
+        foryou: false,
+      })) || [];    
+    setShowNewInfos([...recommendedData, ...baseData]);
+  }, [topInfos, showInfos?.[0].showInfos]);
+
+  
+
  const handleCardClick = useCallback(
    (patnrId, showId, catCd, showUrl) => () => {
      dispatch(
@@ -187,23 +218,7 @@ const PopularShow = ({
    if (handleShelfFocus) {
      handleShelfFocus();
    }
-  }, [handleShelfFocus]);
-
-  const [topInfosNewData, setTopInfosNewData] = useState([]);
-
-  const _randomProduct = useCallback(() => {
-    const randomChk = Math.round(Math.random()) === 0 ? false : true;
-    return randomChk;
-  }, []);
-
-  useEffect(() => {
-    setTopInfosNewData(
-      topInfos?.map((item) => ({
-        ...item,
-        // foryou: _randomProduct(),
-      }))
-    );
-  }, [topInfos]);
+  }, [handleShelfFocus]);  

  return (
    <Container
@@ -225,8 +240,8 @@ const PopularShow = ({
        cbScrollTo={getScrollTo}
        noScrollByWheel
      >
-        {topInfosNewData &&
-          topInfosNewData.map(
+        {showNewInfos &&
+          showNewInfos.map(
            (
              {
                showId,
@@ -240,7 +255,7 @@ const PopularShow = ({
                patncNm,
                catCd,
                showUrl,
-                //foryou,
+                foryou,
              },
              itemIndex
            ) => {
@@ -258,9 +273,11 @@ const PopularShow = ({
                  contentId={showId}
                  contentTitle={showNm}
                  imageSource={
+                    (thumbnailUrl && thumbnailUrl960) ?
                    thumbnailUrl !== thumbnailUrl960
                      ? thumbnailUrl960
                      : thumbnailUrl
+                    : thumbnailUrl
                  }
                  imageAlt={showNm}
                  productName={showNm}
@@ -277,10 +294,10 @@ const PopularShow = ({
                  onBlur={handleBlur(itemIndex)}
                  onClick={handleCardClick(patnrId, showId, catCd, showUrl)}
                  firstLabel={patncNm + " "}
-                  label={itemIndex * 1 + 1 + " of " + topInfos.length}
+                  label={itemIndex * 1 + 1 + " of " + showNewInfos.length}
                  lastLabel=" go to detail, button"
                >
-                  {/* {foryou === true && <Tag text={"For You"} />} */}
+                  {foryou === true && <Tag text={"For You"} />}
                </TItemCardNew>
              );
            }
--- a/com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.jsx
+++ b/com.twin.app.shoptime/src/views/JustForYouTestPanel/JustForYouTestPanel.jsx
@@ -47,11 +47,11 @@ const JustForYouTestPanel = ({ panelInfo, ...rest }) => {
  
  const cbChangePageRef = useRef(null);
  const shelfInfos = useSelector(
-    (state) => state.foryou?.justForYouInfo?.shelfInfos
+    (state) => state.foryou?.recommendInfo?.recommendProduct
  );

  const justForYouInfo = useSelector(
-    (state) => state.foryou?.justForYouInfo?.justForYouInfo
+    (state) => state.foryou?.recommendInfo?.justForYouInfo
  );

  const onClick = useCallback(() => {
@@ -80,25 +80,19 @@ const JustForYouTestPanel = ({ panelInfo, ...rest }) => {
        }

        const product = productInfos[index];
-        const {
-          contentId,
-          title,
-          thumbnail,
-          price,
-          dcPrice,
-          partnerName,
-          partnerLogo,
+        const {          
+          prdtNm,
+          imgUrl,          
+          priceInfo,
+          patncNm,
+          patnrId,
+          prdtId,          
        } = product;

        const handleItemClick = () => {
-          // Extract product ID from contentId if needed
-          const tokens = contentId.split("_");
-          const patnrId = tokens?.[4] || "";
-          const prdtId = tokens?.[5] || "";
          dispatch(
            pushPanel({
-              name: panel_names.DETAIL_PANEL,
-              // panelInfo: { prdtId: contentId },
+              name: panel_names.DETAIL_PANEL,        
              panelInfo: {
                patnrId: patnrId,
                prdtId: prdtId,
@@ -109,16 +103,14 @@ const JustForYouTestPanel = ({ panelInfo, ...rest }) => {

        return (
          <TItemCardNew
-            key={contentId}
-            patnerName={partnerName}            
-            imageAlt={title}
-            imageSource={thumbnail}
+            key={prdtId}
+            patnerName={patncNm}            
+            imageAlt={prdtNm}
+            imageSource={imgUrl}
            label={`${index + 1} of ${productInfos.length}`}
            lastLabel=" go to detail, button"
-            dcPrice={dcPrice}
-            originPrice={price}
-            productName={title}
-            productId={contentId}
+            priceInfo={priceInfo}
+            productName={prdtNm}            
            onClick={handleItemClick}
            spotlightId={`spotlightId-${shelfId}-${shelfExpsOrd}-${index}`}
            {...rest}
@@ -169,7 +161,7 @@ const JustForYouTestPanel = ({ panelInfo, ...rest }) => {
                          key={shelf.shelfId}
                          className={classNames(
                            css.itemsContainer,
-                            shelfIndex === 0 && css.itemsContinerFirst
+                            shelfIndex === 1 && css.itemsContinerFirst
                          )}
                          spotlightId={`justForYouList_${shelf.shelfExpsOrd}`}
                          data-wheel-point