[MyPagePanel] 패널 탭 콘텐츠 추가

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx

@@ -1,18 +1,23 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import ic_profile from "../../../../../assets/images/icons/ic-profile.svg";
 import myinfo_login from "../../../../../assets/images/img-banner-myinfo-login@3x.png";
-import TButton, { TYPES } from "../../../../components/TButton/TButton";
+import { getMyInfoCardSearch } from "../../../../actions/cardActions";
+import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton";
 import TButtonTab, {
   LIST_TYPE,
 } from "../../../../components/TButtonTab/TButtonTab";
 import { $L } from "../../../../utils/helperMethods";
 import css from "../MyInfo/MyInfo.module.less";
+import BillingAddressTab from "./MyInfoTabContents/BillingAddressTab/BillingAddressTab";
+import CouponTab from "./MyInfoTabContents/CouponTab/CouponTab";
+import PaymentTab from "./MyInfoTabContents/PaymentTab/PaymentTab";
+import ShippingAddressTab from "./MyInfoTabContents/ShippingAddressTab/ShippingAddressTab";
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -42,6 +47,8 @@ export default function MyInfo() {
     buttonTabList = getButtonTabList();
   }
 
+  const dispatch = useDispatch();
+
   const { userId, userInfo, email } = useSelector(
     (state) => state.common.appStatus.loginUserData
   );
@@ -50,9 +57,20 @@ export default function MyInfo() {
 
   let timerRef = useRef();
 
+  const myInfoTabContents = {
+    0: PaymentTab,
+    1: BillingAddressTab,
+    2: ShippingAddressTab,
+    3: CouponTab,
+  };
+
+  const SelectedComponent = myInfoTabContents[tab];
+
   useEffect(() => {
     setTab(0);
-  }, [userInfo]);
+
+    dispatch(getMyInfoCardSearch(userInfo));
+  }, [userInfo, dispatch]);
 
   const handleItemClick = useCallback(
     ({ index }) => {
@@ -114,16 +132,23 @@ export default function MyInfo() {
         {userInfo ? (
           <>
             {buttonTabList && buttonTabList.length > 0 && (
-              <TabContainer>
+              <TabContainer className={css.tabContainer}>
                 <TButtonTab
                   contents={buttonTabList}
                   onItemClick={handleItemClick}
                   selectedIndex={tab}
                   listType={LIST_TYPE.medium}
                 />
-                <TButton>{$L("ADD/EDIT")}</TButton>
+                <TButton
+                  type={TYPES.mypage}
+                  size={SIZES.small}
+                  className={css.addBtn}
+                >
+                  {$L("ADD/EDIT")}
+                </TButton>
               </TabContainer>
             )}
+            {SelectedComponent && <SelectedComponent />}
           </>
         ) : (
           <div className={css.downloadImg}>

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.module.less

@@ -8,6 +8,7 @@
   .contentsBox {
     padding-top: 42px;
     margin: 0 60px 60px 60px;
+
     .infoBox {
       .size(@w: 1680px, @h: 270px);
       border-radius: 12px;
@@ -67,6 +68,18 @@
         }
       }
     }
+
+    .tabContainer {
+      position: relative;
+
+      .addBtn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 24px;
+      }
+    }
+
     .downloadImg {
       img {
         width: 100%;

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
+
+export default function BillingAddressTab() {
+  return (
+    <MyInfoTabContentsContainer>BillingAddressTab</MyInfoTabContentsContainer>
+  );
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/CouponTab/CouponTab.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
+
+export default function CouponTab() {
+  return <MyInfoTabContentsContainer>Coupon</MyInfoTabContentsContainer>;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoTabContentsContainer.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import css from "./MyInfoTabContentsContainer.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+export default function MyInfoTabContentsContainer({ children }) {
+  return <Container className={css.container}>{children}</Container>;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoTabContentsContainer.module.less

@@ -0,0 +1,10 @@
+@import "../../../../../style/CommonStyle.module.less";
+@import "../../../../../style/utils.module.less";
+
+.container {
+  min-height: 510px;
+  background-color: @BG_COLOR_02;
+  border: 1px solid @COLOR_GRAY02;
+  border-top: none;
+  padding: 60px;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.jsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+  alertToast,
+  changeAppStatus,
+} from "../../../../../../actions/commonActions";
+import TButton, {
+  SIZES,
+  TYPES,
+} from "../../../../../../components/TButton/TButton";
+import TToast from "../../../../../../components/TToast/TToast";
+import { $L } from "../../../../../../utils/helperMethods";
+import css from "./PaymentItem.module.less";
+
+export default function PaymentItem({ easyPmtSeq, cardKnd, cardNo }) {
+  const dispatch = useDispatch();
+
+  const getFormattingCardNo = (cardNumber) => {
+    return `${"*".repeat(12)}${cardNumber.slice(-4)}`
+      .replace(/(.{4})/g, "$1-")
+      .slice(0, -1);
+  };
+
+  const handleClick = useCallback(() => {
+    dispatch(alertToast($L("Deleted a Payment Method")));
+  }, [dispatch]);
+
+  return (
+    <>
+      <div className={css.itemContainer}>
+        <div className={css.card}>
+          <h2 className={css.cardKnd}>{cardKnd.toUpperCase()}</h2>
+          <p className={css.cardNo}>{getFormattingCardNo(cardNo)}</p>
+        </div>
+        <TButton
+          type={TYPES.mypage}
+          size={SIZES.small}
+          className={css.deleteBtn}
+          onClick={handleClick}
+        >
+          {$L("DELETE")}
+        </TButton>
+      </div>
+    </>
+  );
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem.module.less

@@ -0,0 +1,32 @@
+@import "../../../../../../style/CommonStyle.module.less";
+@import "../../../../../../style/utils.module.less";
+
+.itemContainer {
+  .size(@w: 402px, @h: 354px);
+
+  .card {
+    .size(@w: 100%, @h: 270px);
+    background-image: url("../../../../../../../assets/images/mypagepanel/img-card-bg.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: @COLOR_WHITE;
+
+    .cardKnd {
+      .font(@fontFamily: @baseFontBold, @fontSize: 36px);
+    }
+
+    .cardNo {
+      font-size: 24px;
+    }
+  }
+
+  .deleteBtn {
+    margin: 12px auto 0;
+    .size(@w: 138px, @h: 60px);
+    font-size: 24px;
+  }
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { useSelector } from "react-redux";
+
+import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
+import PaymentItem from "./PaymentItem";
+
+const mockData = {
+  easyPmtSeq: "202306290001561",
+  cardKnd: "Visa",
+  cardNo: "4111111111111234",
+};
+
+export default function PaymentTab() {
+  const cardDatas = useSelector((state) => state.card.cardData);
+
+  const { easyPmtSeq, cardKnd, cardNo } = mockData;
+
+  return (
+    <MyInfoTabContentsContainer>
+      {mockData ? (
+        <PaymentItem
+          easyPmtSeq={easyPmtSeq}
+          cardKnd={cardKnd}
+          cardNo={cardNo}
+        />
+      ) : (
+        <p>no card</p>
+      )}
+    </MyInfoTabContentsContainer>
+  );
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import MyInfoTabContentsContainer from "../MyInfoTabContentsContainer";
+
+export default function ShippingAddressTab() {
+  return (
+    <MyInfoTabContentsContainer>Shipping Address</MyInfoTabContentsContainer>
+  );
+}