[홈패널] 퓨처드브랜드 전송 방식 변경

2024-04-08 20:24:42 +09:00
parent 85d5e34e34
commit b08ca83bfc
7 changed files with 3379 additions and 3364 deletions
--- a/com.twin.app.shoptime/package-lock.json
+++ b/com.twin.app.shoptime/package-lock.json
@@ -22,7 +22,7 @@
        "raw-loader": "^4.0.2",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
-				"react-player": "^2.15.1",
+        "react-player": "^1.15.3",
        "react-redux": "^7.2.3",
        "redux": "^3.7.2",
        "redux-thunk": "^2.3.0"
@@ -1085,11 +1085,6 @@
        "loose-envify": "cli.js"
      }
    },
-		"node_modules/memoize-one": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-			"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
-		},
    "node_modules/merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -1325,29 +1320,22 @@
        "react": "^16.14.0"
      }
    },
-		"node_modules/react-fast-compare": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-			"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
-		},
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/react-player": {
-			"version": "2.15.1",
-			"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.15.1.tgz",
-			"integrity": "sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-1.15.3.tgz",
+      "integrity": "sha512-8fc0R1AipFIy7l4lKgnIg+gMU2IY32ZMxxBlINjXAq/YnN3HUP3hOaE+aQ0lQv+a1/MMZgbekWD86ZGDO7kB8g==",
      "dependencies": {
        "deepmerge": "^4.0.0",
        "load-script": "^1.0.0",
-				"memoize-one": "^5.1.1",
-				"prop-types": "^15.7.2",
-				"react-fast-compare": "^3.0.1"
+        "prop-types": "^15.7.2"
      },
      "peerDependencies": {
-				"react": ">=16.6.0"
+        "react": "*"
      }
    },
    "node_modules/react-redux": {
@@ -2743,11 +2731,6 @@
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
-		"memoize-one": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-			"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
-		},
    "merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -2928,26 +2911,19 @@
        "scheduler": "^0.19.1"
      }
    },
-		"react-fast-compare": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-			"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
-		},
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "react-player": {
-			"version": "2.15.1",
-			"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.15.1.tgz",
-			"integrity": "sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-1.15.3.tgz",
+      "integrity": "sha512-8fc0R1AipFIy7l4lKgnIg+gMU2IY32ZMxxBlINjXAq/YnN3HUP3hOaE+aQ0lQv+a1/MMZgbekWD86ZGDO7kB8g==",
      "requires": {
        "deepmerge": "^4.0.0",
        "load-script": "^1.0.0",
-				"memoize-one": "^5.1.1",
-				"prop-types": "^15.7.2",
-				"react-fast-compare": "^3.0.1"
+        "prop-types": "^15.7.2"
      }
    },
    "react-redux": {
--- a/com.twin.app.shoptime/src/actions/myPageActions.js
+++ b/com.twin.app.shoptime/src/actions/myPageActions.js
@@ -252,7 +252,7 @@ export const getMyUpcomingAlertShow = () => (dispatch, getState) => {

 // MyPage UpComing Alert Show 삭제 (IF-LGSP-042)
 export const deleteMyUpcomingAlertShow = (params) => (dispatch, getState) => {
-  const { patnrId, showId } = params;
+  const { showList } = params;

  const onSuccess = (response) => {
    console.log("deleteMyUpcomingAlertShow onSuccess ", response.data);
@@ -273,7 +273,7 @@ export const deleteMyUpcomingAlertShow = (params) => (dispatch, getState) => {
    "post",
    URLS.DELETE_MY_UPCOMING_ALERT_SHOW,
    {},
-    { patnrId, showId },
+    { showList },
    onSuccess,
    onFail
  );
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less
@@ -19,13 +19,25 @@
      left: 18px;
      top: 18px;
    }
-
    .imgBanner {
      > img {
        border-radius: 12px;
        .size(@w: 486px, @h: 858px);
      }
    }
+    .btnPlay {
+      .size(@w: 100%, @h: 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      > img {
+        .size(@w: 120px, @h: 120px);
+      }
+    }
    &.isHorizontal {
      .size(@w: 744px, @h: 420px);
      .imgBanner {
@@ -34,6 +46,24 @@
        }
      }
    }
+    .errorContents {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .errorlogo {
+        width: 120px;
+        height: 120px;
+        object-fit: cover;
+      }
+
+      .errorText {
+        margin-top: 30px;
+        color: #ff0000;
+        padding-top: 10px;
+      }
+    }
+
    &.todaysDeals {
      background-image: url(../../../../assets/images/img_home_banner_td_ver.png);
      background-size: 486px 858px;
@@ -73,7 +103,6 @@
          .size(@w: 354px, @h: 354px);
        }
      }
-
      &.isHorizontal {
        background-image: url(../../../../assets/images/img_home_banner_td_hor.png);
        background-size: 744px 420px;
@@ -118,6 +147,27 @@
    }
  }

+  .arrow {
+    z-index: 10;
+    .size(@w: 42px, @h: 42px);
+    background-size: 42px 42px;
+    background-position: center center;
+    &.leftBtn {
+      .position(@position: absolute, @top: 406px, @left: 18px);
+      background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
+      }
+    }
+    &.rightBtn {
+      .position(@position: absolute, @top: 406px, @right: 18px);
+      background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
+      }
+    }
+  }
+
  &.isHorizontalWrap {
    .arrow {
      &.leftBtn {
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
@@ -152,12 +152,6 @@ export default function RollingUnit({
    rollingData[startIndex].priceInfo
  );

-  // 투데이즈 딜 가격 정보
-  // const { originalPrice, discountedPrice } =
-  //   usePriceInfo(rollingData[startIndex].priceInfo) || {};
-
-  // console.log(rollingData[startIndex].priceInfo);
-
  // 이미지 배너 클릭
  const imageBannerClick = useCallback(() => {
    let panelName = "";
@@ -166,7 +160,7 @@ export default function RollingUnit({
      return dispatch(
        pushPanel({
          name: panel_names.FEATURED_BRANDS_PANEL,
-          panelInfo: rollingData[startIndex].patnrId,
+          panelInfo: { patnrId: rollingData[startIndex].patnrId },
        })
      );
    } else if (rollingData[startIndex].shptmLnkTpNm === "Trending now") {
--- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx
+++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx
@@ -160,7 +160,7 @@ export default function MainView() {
          onTabActivated={onTabActivated}
        />
      </div>
-      <LoadingPanel showLoadingPanel={showLoadingPanel} />
+      {/* <LoadingPanel showLoadingPanel={showLoadingPanel} /> */}
      {isLoading && <Loader />}
      {toast && <TToast text={toastText} />}
    </>
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
@@ -26,15 +26,7 @@ import { $L } from "../../../../utils/helperMethods";
 import css from "./Reminders.module.less";
 import RemindersCard, { SIZES } from "./RemindersCard";

-const HeaderButtonContainer = SpotlightContainerDecorator(
-  {
-    leaveFor: {
-      left: "",
-      right: "",
-    },
-  },
-  "div"
-);
+const HeaderButtonContainer = SpotlightContainerDecorator("div");

 export default function Reminders({ title, cbScrollTo }) {
  const dispatch = useDispatch();
@@ -44,7 +36,6 @@ export default function Reminders({ title, cbScrollTo }) {
    upComingAlertShow,
    upComingAlertShowKeys,
    upComingAlertShowChangeInfo,
-    deleteMyUpcomingAlertShow,
  } = useSelector((state) => state.myPage.upComingData);
  const { popupVisible, activePopup } = useSelector(
    (state) => state.common.popup
@@ -57,6 +48,9 @@ export default function Reminders({ title, cbScrollTo }) {
  const [selectedItems, setSelectedItems] = useState({});
  const [selectAll, setSelectAll] = useState(false);

+  // let timerRef = useRef();
+
+  // 스위치 on, off
  useEffect(() => {
    setUseAlarm(upComingAlertShow?.upcomAlamUseFlag === "Y");
  }, [upComingAlertShow]);
@@ -66,21 +60,23 @@ export default function Reminders({ title, cbScrollTo }) {
    dispatch(getMyUpcomingAlertShow());
    dispatch(getMyUpcomingAlertShowKeys());
    dispatch(getUpcomingAlertShowChangeInfo());
-    // dispatch(deleteMyUpcomingAlertShow());
  }, [dispatch]);

+  // useEffect(() => {
+  //   return () => timerRef.current && clearTimeout(timerRef.current);
+  // }, []);
+
  // 아이템 설정
  useEffect(() => {
    const initialSelectedItems = upComingAlertShow.alertShows?.reduce(
      (acc, item, index) => {
        acc[item.showId] = false;
-
        return acc;
      },
      {}
    );
    setSelectedItems(initialSelectedItems);
-  }, [upComingAlertShow]);
+  }, [upComingAlertShow.alertShows]);

  // 스위치 버튼
  const handleToggleSwitchButton = useCallback(() => {
@@ -94,21 +90,6 @@ export default function Reminders({ title, cbScrollTo }) {
    setUseAlarm(!useAlarm);
  }, [dispatch, useAlarm]);

-  // 전체 선택
-  const handleSelectAllToggle = useCallback(() => {
-    const newState = !selectAll;
-
-    setSelectedItems(
-      Object.keys(selectedItems).reduce((acc, key) => {
-        acc[key] = newState;
-
-        return acc;
-      }, {})
-    );
-
-    setSelectAll(newState);
-  }, [selectAll, selectedItems]);
-
  // 삭제 버튼
  const handleDeleteBtnClick = useCallback(() => {
    if (activeDelete) {
@@ -133,22 +114,39 @@ export default function Reminders({ title, cbScrollTo }) {
      Object.entries(selectedItems).forEach(([id, selected]) => {
        if (selected) {
          const item = upComingAlertShow.alertShows.find(
-            (item) => item.showId === id
+            (item) => item.patnrId === id || item.showId === id
          );
-          if (item.showId === id) {
-            showList.push({ showId: item.showId });
+          if (item.showId === id || item.patnrId === id) {
+            showList.push({ patnrId: item.patnrId, showId: item.showId });
          }
        }
      });

+      console.log(showList, "쇼리스트");
+
      if (showList.length > 0) {
-        // dispatch(deleteMyUpcomingAlertShow({ showList }));
+        dispatch(deleteMyUpcomingAlertShow({ showList }));
      }
    }

    setActiveDelete((prev) => !prev);
  }, [dispatch, upComingAlertShow, selectedItems, activeDelete]);

+  // 전체 선택
+  const handleSelectAllToggle = useCallback(() => {
+    const newState = !selectAll;
+
+    setSelectedItems(
+      Object.keys(selectedItems).reduce((acc, key) => {
+        acc[key] = newState;
+
+        return acc;
+      }, {})
+    );
+
+    setSelectAll(newState);
+  }, [selectAll, selectedItems]);
+
  // 아이템 토글 버튼
  const handleItemToggle = useCallback(
    (showId) => {
@@ -163,7 +161,6 @@ export default function Reminders({ title, cbScrollTo }) {
    [selectedItems]
  );

-  //
  const handleCancel = useCallback(() => {
    dispatch(setHidePopup());
  }, [dispatch]);
@@ -187,8 +184,6 @@ export default function Reminders({ title, cbScrollTo }) {
    ({ index, ...rest }) => {
      const item = upComingAlertShow.alertShows[index];

-      console.log(selectedItems[item.showId], "아이템");
-
      return (
        <RemindersCard
          {...rest}
@@ -217,17 +212,23 @@ export default function Reminders({ title, cbScrollTo }) {
    [upComingAlertShow, activeDelete, selectedItems, handleItemToggle]
  );

-  // console.log("--------------------");
-  // console.log("upComingChangeInfo", upComingChangeInfo);
-  // console.log("upComingAlertShow", upComingAlertShow);
-  // console.log("upComingAlertShowKeys", upComingAlertShowKeys);
-  // console.log("upComingAlertShowChangeInfo", upComingAlertShowChangeInfo);
-  // console.log("--------------------");
+  console.log("--------------------");
+  console.log("upComingChangeInfo", upComingChangeInfo);
+  console.log("upComingAlertShow", upComingAlertShow);
+  console.log("upComingAlertShowKeys", upComingAlertShowKeys);
+  console.log("upComingAlertShowChangeInfo", upComingAlertShowChangeInfo);
+  console.log("--------------------");

  return (
    <>
      <THeader title={title} className={css.remindersHeader}>
        <HeaderButtonContainer className={css.headerButtonContainer}>
+          <TSwitch
+            className={css.switchBtn}
+            selected={useAlarm}
+            onClick={handleToggleSwitchButton}
+          />
+
          {activeDelete && (
            <>
              <div className={css.deleteAll}>
@@ -250,12 +251,6 @@ export default function Reminders({ title, cbScrollTo }) {
          {upComingAlertShow.alertShows &&
          upComingAlertShow.alertShows.length > 0 ? (
            <>
-              <TSwitch
-                className={css.switchBtn}
-                selected={useAlarm}
-                onClick={handleToggleSwitchButton}
-              />
-
              <TButton
                type={TYPES.mypage}
                className={css.deleteBtn}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/RemindersCard.jsx
@@ -76,13 +76,13 @@ export default memo(function RemindersCard({
        className={css.patncLogo}
      />

-      <div className={css.imgWrap}>
+      {/* <div className={css.imgWrap}>
        {soldOutYn === "Y" && (
          <div className={css.soldOutOverlay}>
            <p className={css.soldOutText}>{"Comming Soon"}</p>
          </div>
        )}
-      </div>
+      </div> */}

      {activeDelete && (
        <div