ItemDetail Tbutton TPopUp 작업

2024-02-19 18:11:54 +09:00
parent 760d046d50
commit 86a1cd403e
12 changed files with 186 additions and 74 deletions
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
@@ -47,6 +47,7 @@ export default function TPopUp({
  setSelectedOptionIdx,
  ...rest
 }) {
+  console.log("#className", className);
  useEffect(() => {
    if (KINDS.indexOf(kind) < 0) {
      console.error("TPopUp kind error");
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
@@ -63,6 +63,9 @@
  }
 }

+
+// kind 
+
 .introTermsPopup {
  .default-style();

@@ -79,6 +82,25 @@
  }
 }

+.productDetail {
+  .default-style();
+  
+
+  .info {
+    .size(@w: 1100px , @h: 824px);
+    padding: 60px 60px 0 60px;
+
+    > div {
+      display: flex;
+    }
+  }
+
+
+  img {
+    .size(@w: 200px, @h: 200px) 
+  }
+
+}
 .textPopup {
  .default-style();

--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -375,8 +375,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) {

  const handleNavigation = useCallback(
    ({ index, target }) => {
-      // setMainSelectedIndex(index);
      if (target && !showSubTab) {
+        console.log("#target", target);
        dispatch(resetPanels(target));
        deActivateTab();
        panelSwitching.current = true;
@@ -392,7 +392,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
    ({ index, target }) => {
      if (target) {
        dispatch(resetPanels(target));
-
        deActivateTab();
        panelSwitching.current = true;
        panelSwitchingJob.start(panelSwitching);
--- a/com.twin.app.shoptime/src/reducers/mainReducer.js
+++ b/com.twin.app.shoptime/src/reducers/mainReducer.js
@@ -40,13 +40,13 @@ export const mainReducer = (state = initialState, action) => {
      };
    case types.GET_PRODUCT_DETAIL: {
      const data = action.payload.product[0];
-      const images = action.payload.product[0].imgUrls;

-      console.log("images", images);
+      const images = data.imgUrls600;
+      const media = data.prdtMediaUrl;
      return {
        ...state,
        productData: data,
-        productImages: images,
+        productImages: { images, media },
      };
    }

--- a/com.twin.app.shoptime/src/reducers/panelReducer.js
+++ b/com.twin.app.shoptime/src/reducers/panelReducer.js
@@ -2,7 +2,7 @@ import { types } from "../actions/actionTypes";
 import { panel_names } from "../utils/Config";

 const initialState = {
-  panels: [],
+  panels: [{ name: panel_names.DETAIL_PANEL }],
  isModalOpen: false,
 };

--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

 import { getMainCategoryDetail } from "../../actions/mainActions";
+import { popPanel } from "../../actions/panelActions";
 import TBody from "../../components/TBody/TBody";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
@@ -11,37 +12,44 @@ import ProductThumbnail from "./container/ProductThumbnail";
 import css from "./DetailPanel.module.less";

 export default function ItemDetail() {
-  const [selectedPatnrId, setSelectedPatnrId] = useState(1);
-  const [selectedPardtId, setSelectedPardtId] = useState("A523924");
-
  const [productData, setProductData] = useState();
  const data = useSelector((state) => state.main.productData);
+  const panels = useSelector((state) => state.panels.panels);
+
+  console.log("#panels ", panels);
  const dispatch = useDispatch();

  useEffect(() => {
-    dispatch(
-      getMainCategoryDetail({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPardtId,
-      })
-    );
-  }, [dispatch]);
+    if (panels) {
+      dispatch(
+        getMainCategoryDetail({
+          patnrId: panels[1].panelInfo?.patnrId,
+          prdtId: panels[1].panelInfo?.prdtId,
+        })
+      );
+    }
+  }, [dispatch, panels]);

  useEffect(() => {
    setProductData(data);
  }, [data, productData]);
+
+  const onClick = () => {
+    dispatch(popPanel());
+  };
  return (
    <TPanel isTabActivated={false}>
      <THeader
        className={css.header}
        title={productData?.prdtNm}
        onBackButton
+        onClick={onClick}
      />
      <TBody className={css.container} scrollable={false}>
        <ProductThumbnail productData={productData} />
        <ProductOption
-          selectedPatnrId={selectedPatnrId}
-          selectedPardtId={selectedPardtId}
+          selectedPatnrId={panels[1].panelInfo?.patnrId}
+          selectedPardtId={panels[1].panelInfo?.prdtId}
        />
      </TBody>
    </TPanel>
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less
@@ -5,6 +5,7 @@
 .header {
    > div {
        .font(@fontFamily: @baseFontBold,  @fontSize: 30px) !important;
+        .elip(@clamp: 1);
    } 
    display: flex;
    width: 100%;
@@ -14,11 +15,18 @@
    color: #333333;
    padding: 0 0 0 60px;

+    
+
 }

 .container {
    display: flex;
    justify-content: space-between;
- }
+
+
+}
+
+
+


--- a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.jsx
@@ -11,7 +11,10 @@ import css from "./Indicator.module.less";
 const SpottableComponent = Spottable("button");

 export default function Indicator() {
-  const images = useSelector((state) => state.main.productImages);
+  const productImages = useSelector((state) => state.main.productImages);
+
+  const images = productImages?.images || [];
+  //const media = productImages?.media;

  const [selectedImage, setSelectedImage] = useState(null);
  const [selectedIndex, setSelectedIndex] = useState(0);
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/Indicator.module.less
@@ -2,33 +2,34 @@
@import "../../../style/utils.module.less";

 .Wrap {
-  margin: 30px 0 0 10px;
-  height: 560px;
-  display: flex;
-  .thumbnail {
-    .size(@w: 560px, @h: 560px);
-    border: solid 1px #dadada;
-    background-color: #fff;
-    margin-right: 10px;
-  }
+    margin: 30px 0 0 10px;
+    height: 560px;
+    display: flex;
+    .thumbnail {
+        .size(@w: 560px, @h: 560px);
+        border: solid 1px #dadada;
+        background-color: #fff;
+        margin-right: 10px;
+    }

-  .upButton {
-    .size(@w: 144px , @h: 48px);
-    border: none;
-    margin-bottom: 4px;
-    background-position: center;
-    background-size: cover;
-    background-image: url("../../../../assets/images/btn/btn-bk-up-nor.svg");
-  }
+    .upButton {
+        .size(@w: 144px , @h: 48px);
+        border: none;
+        margin-bottom: 4px;
+        background-position: center;
+        background-size: cover;
+        background-image: url('../../../../assets/images/btn/btn-bk-up-nor.svg');

-  .downButton {
-    .size(@w: 144px , @h: 48px);
-    border: none;
-    margin-top: 4px;
-    background-position: center;
-    background-size: cover;
-    background-image: url("../../../../assets/images/btn/btn-bk-down-nor.svg");
-  }
+    }
+
+    .downButton {
+        .size(@w: 144px , @h: 48px);
+        border: none;
+        margin-top: 4px;
+        background-position: center;
+        background-size: cover;
+        background-image: url('../../../../assets/images/btn/btn-bk-down-nor.svg');        
+    }

  .image {
    .size(@w: 144px , @h: 144px);
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useState } from "react";

 import { useSelector } from "react-redux";

 import Spottable from "@enact/spotlight/Spottable";

+import TButton from "../../../components/TButton/TButton";
+import TPopUp from "../../../components/TPopUp/TPopUp";
 import { $L } from "../../../utils/helperMethods";
 import Indicator from "../components/Indicator";
 import css from "./ProductThumbnail.module.less";
@@ -12,9 +14,33 @@ const SpottableComponent = Spottable("div");

 export default function ProductThumbnail() {
  const productData = useSelector((state) => state.main.productData);
+  const [opened, setOpened] = useState(false);
+  console.log("#productData", productData);
+
+  const onClickPopUp = (children) => {
+    setOpened((prev) => !prev);
+  };
+
+  const renderPopUp = () => {
+    return (
+      <TPopUp
+        kind="productDetail"
+        onClose={onClickPopUp}
+        open={opened}
+        hasButton
+        button1Text={"CLOSE"}
+      >
+        <div>
+          <img src={productData?.imgUrls600[0]} />
+          <span className={css.popUpIcon} />
+        </div>
+      </TPopUp>
+    );
+  };

  return (
    <SpottableComponent className={css.Wrap}>
+      {opened && renderPopUp()}
      <Indicator />
      <div className={css.order}>
        <div>{$L("Call to Order")}</div>
@@ -23,6 +49,14 @@ export default function ProductThumbnail() {
          <div>{productData?.orderPhnNo}</div>
        </div>
      </div>
+      <div className={css.buttonWrap}>
+        <div className={css.tButton}>
+          <TButton onClick={onClickPopUp}>{$L("DESCRIPTION")}</TButton>
+          <TButton onClick={onClickPopUp}>{$L("RETURN & EXCHANGES")}</TButton>
+          <TButton onClick={onClickPopUp}>{$L("SHOP BY MOBILE")}</TButton>
+        </div>
+        <div className={css.qrcode} />
+      </div>
    </SpottableComponent>
  );
 }
--- a/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less
@@ -2,28 +2,66 @@
@import "../../../style/utils.module.less";

 .Wrap {
-  padding-left: 120px;
-  .size(@w: 894px, @h: 930px);
-  .order {
-    .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
-    .size(@w: 560px, @h: 68px);
-    display: flex;
-    justify-content: space-between;
-    line-height: 68px;
-    background-color: #f2f2f2;
-    margin: 10px 0 0 10px;
-    > div {
-      padding: 0 33px 0 30px;
+    padding-left: 120px;
+    .size(@w: 894px, @h: 930px);
+
+    .popUpIcon {
+        .size(@w: 50px, @h: 50px);
+        background-color: red;
    }
-  }
-  .icon {
-    display: flex;
-    > span {
-      .size(@w: 42px, @h: 42px);
-      background-image: url("../../../../assets/images/icons/ic-gr-call.svg");
-      background-size: cover;
-      background-position: center;
-      margin: 13px 0 0 4px;
+    .order {
+        .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
+        .size(@w: 560px, @h: 68px);
+        display: flex;
+        justify-content: space-between;
+        line-height: 68px;
+        background-color: #f2f2f2;
+        margin: 10px 0 0 10px;
+        > div {
+            padding: 0 33px 0 30px;
+        }
+    }
+    .icon {
+        display: flex;
+
+        > span {
+            .size(@w: 42px, @h: 42px);
+            background-image: url("../../../../assets/images/icons/ic-gr-call.svg");
+            background-size: cover;
+            background-position: center;
+            margin: 13px 0 0 4px ;
+        }
+    }
+
+    .buttonWrap {
+        display: flex;
+    }
+
+    .tButton {
+        .size(@w: 362px, @h: 192px);
+        margin: 10px 0 0 10px;
+
+        > div {
+            .font(@fontFamily: @baseFont,  @fontSize: 24px);
+            .size(@w: 362px, @h: 60px);
+            box-shadow: 0px 3px 6px 0 rgba(2, 3, 3 , 0.1);
+            border: solid 1px var(--white);
+            background-image: linear-gradient(to top, #f5f5f5, #fff);
+            margin-bottom: 6px;
+    
+            color: #808080;
+            line-height: 60px;
+        }
+    }
+
+    .qrcode {
+        .size(@w: 192px, @h: 192px);
+        box-shadow: 0px 3px 6px 0 rgba(2, 3, 3, 0.1);
+        border-radius: 6px;
+        border: solid 1px var(--white);
+        background-image: linear-gradient(to top, #f5f5f5, #fff);
+
+        margin: 10px 0 0 6px;
    }
-  }
 }
+
--- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx
+++ b/com.twin.app.shoptime/src/views/MainView/MainView.jsx
@@ -9,7 +9,6 @@ import Spotlight from "@enact/spotlight";
 // 테스트용 - TODO: 메인 홈 화면에 나와야 하는 이미지들 추가 후 preloadImages에 추가
 import testImage from "../../../assets/images/img-banner-myinfo-login@3x.png";
 import { changeAppStatus } from "../../actions/commonActions";
-import { pushPanel } from "../../actions/panelActions";
 import PreloadImage from "../../components/PreloadImage/PreloadImage";
 import TabLayout from "../../components/TabLayout/TabLayout";
 import * as Config from "../../utils/Config";
@@ -22,7 +21,6 @@ import FeaturedBrandsPanel from "../FeaturedBrandsPanel/FeaturedBrandsPanel";
 import HomePanel from "../HomePanel/HomePanel";
 import HotPicksPanel from "../HotPicksPanel/HotPicksPanel";
 import IntroPanel from "../IntroPanel/IntroPanel";
-import LoadingPanel from "../LoadingPanel/LoadingPanel";
 import MyPagePanel from "../MyPagePanel/MyPagePanel";
 import OnSalePanel from "../OnSalePanel/OnSalePanel";
 import SearchPanel from "../SearchPanel/SearchPanel";
@@ -106,9 +104,9 @@ export default function MainView() {
    if (!showLoadingPanel.show) {
      if (isTermAgreed) {
      } else {
-        dispatch(
-          pushPanel({ name: Config.panel_names.INTRO_PANEL, panelInfo: {} })
-        );
+        // dispatch(
+        //   pushPanel({ name: Config.panel_names.INTRO_PANEL, panelInfo: {} })
+        // );
      }
    }
  }, [showLoadingPanel.show, isTermAgreed, dispatch]);
@@ -160,7 +158,7 @@ export default function MainView() {
        </div>
      )}
      <TabLayout topPanelName={topPanelName} onTabActivated={onTabActivated} />
-      <LoadingPanel showLoadingPanel={showLoadingPanel} />
+      {/* <LoadingPanel showLoadingPanel={showLoadingPanel} /> */}
    </>
  );
 }