[checkout] 미완.

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

@@ -17,7 +17,8 @@ export default function CheckOutPanel() {
   const { userInfo } = useSelector(
     (state) => state.common.appStatus.loginUserData
   );
-
+  const checkoutData = useSelector((state) => state.checkout?.checkoutData);
+  console.log("###shippingAddressList", checkoutData);
   useEffect(() => {
     dispatch(
       getMyInfoCheckoutInfo({
@@ -38,21 +39,24 @@ export default function CheckOutPanel() {
   const onBackClick = useCallback(() => {
     dispatch(popPanel());
   }, [dispatch]);
-
+  //{ name: panel_names.ON_SALE_PANEL }
   return (
-    <TPanel isTabActivated={false}>
-      <THeader
-        className={css.theader}
-        title="CHECKOUT"
-        onBackButton
-        onClick={onBackClick}
-      />
-      <TBody className={css.tbody}>
-        <div className={css.Wrap}>
-          <SummaryContainer userInfo={userInfo} />
-          <InformationContainer />
-        </div>
-      </TBody>
-    </TPanel>
+    <>
+      <TPanel isTabActivated={false}>
+        <TBody className={css.tbody}>
+          <THeader
+            className={css.theader}
+            title="CHECKOUT"
+            onBackButton
+            onClick={onBackClick}
+          />
+
+          <div className={css.Wrap}>
+            <SummaryContainer userInfo={userInfo} />
+            <InformationContainer checkoutData={checkoutData} />
+          </div>
+        </TBody>
+      </TPanel>
+    </>
   );
 }

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

@@ -1,14 +1,22 @@
 @import "../../style/CommonStyle.module.less";
 @import "../../style/utils.module.less";
-
-.theader {
-  padding-left: 60px;
-}
 .tbody {
   .size(@w: 1920px, @h: 100%);
-
+  .theader {
+    position: sticky;
+    left: 0;
+    top: 0;
+    padding-left: 60px;
+    z-index: 10;
+  }
   .Wrap {
-    height: 2050px;
+    // margin-top: 90px;
+    // height: 2050px;
     display: flex;
   }
 }
+
+.fixedSideBar {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.3);
+}

com.twin.app.shoptime/src/views/CheckOutPanel/components/BillingAddressCard.jsx

@@ -0,0 +1,77 @@
+import React, { useCallback } from "react";
+
+import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
+import useScrollTo from "../../../hooks/useScrollTo";
+import BillingAddressItem from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressItem";
+import MyInfoNoResults from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults";
+import css from "./BillingAddressCard.module.less";
+import CheckOutContainer from "./CheckOutContainer";
+
+export const ITEM_SIZE = {
+  itemWidth: 444,
+  itemHeight: 348,
+  spacing: 18,
+};
+
+export default function BillingAddressCard({ list }) {
+  const { getScrollTo, scrollLeft } = useScrollTo();
+
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const {
+        bilAddrSno,
+        bilCityNm,
+        bilCtpt,
+        bilDtlAddr,
+        bilEmalAddr,
+        bilOdrFnm,
+        bilOdrLnm,
+        bilStatNm,
+        bilStatPvc,
+        bilZpcd,
+        chgDt,
+        cntryCd,
+        cntryNm,
+        mbrNo,
+        regDt,
+        useFlag,
+      } = list[index];
+
+      return (
+        <BillingAddressItem
+          key={index}
+          bilOdrFnm={bilOdrFnm}
+          bilOdrLnm={bilOdrLnm}
+          bilZpcd={bilZpcd}
+          bilStatNm={bilStatNm}
+          bilCityNm={bilCityNm}
+          bilDtlAddr={bilDtlAddr}
+          bilCtpt={bilCtpt}
+          bilEmalAddr={bilEmalAddr}
+        />
+      );
+    },
+    [list]
+  );
+
+  return (
+    <CheckOutContainer>
+      <div className={css.billingBox}>
+        {list && list.length > 0 ? (
+          <TVirtualGridList
+            cbScrollTo={getScrollTo}
+            className={css.grid}
+            dataSize={list.length}
+            renderItem={renderItem}
+            direction="horizontal"
+            itemWidth={ITEM_SIZE.itemWidth}
+            itemHeight={ITEM_SIZE.itemHeight}
+            spacing={ITEM_SIZE.spacing}
+          />
+        ) : (
+          <MyInfoNoResults type="BILLING ADDRESS" />
+        )}
+      </div>
+    </CheckOutContainer>
+  );
+}

com.twin.app.shoptime/src/views/CheckOutPanel/components/BillingAddressCard.module.less

@@ -0,0 +1,6 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.billingBox {
+  min-height: 383px;
+}

com.twin.app.shoptime/src/views/CheckOutPanel/components/CheckOutContainer.jsx

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

com.twin.app.shoptime/src/views/CheckOutPanel/components/CheckOutContainer.module.less

@@ -0,0 +1,10 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.chekcoutBox {
+  background-color: @BG_COLOR_02;
+  border: 1px solid @COLOR_GRAY02;
+  border-top: none;
+  padding: 18px 0px 18px 60px;
+  background-color: #f2f2f2;
+}

com.twin.app.shoptime/src/views/CheckOutPanel/components/PaymentCard.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import MyInfoNoResults from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/MyInfoNoResults/MyInfoNoResults";
+import PaymentItem from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentItem";
+import CheckOutContainer from "./CheckOutContainer";
+import css from "./PaymentCard.module.less";
+
+export default function PaymentCard({ list }) {
+  return (
+    <CheckOutContainer className={css.paymentBox}>
+      {list ? (
+        <PaymentItem
+          easyPmtSeq={list.easyPmtSeq}
+          cardKnd={list.cardKnd}
+          cardNo={list.cardNo}
+        />
+      ) : (
+        <MyInfoNoResults type="PAYMENT" />
+      )}
+    </CheckOutContainer>
+  );
+}

com.twin.app.shoptime/src/views/CheckOutPanel/components/PaymentCard.module.less

@@ -0,0 +1,6 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.paymentBox {
+  min-height: 305px;
+}

com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCard.jsx

@@ -2,42 +2,61 @@ import React, { memo } from "react";
 
 import Spottable from "@enact/spotlight/Spottable";
 
+import TScroller from "../../../components/TScroller/TScroller";
+import CheckOutContainer from "./CheckOutContainer";
 import css from "./ShippingAddressCard.module.less";
 
 const ItemContainer = Spottable("div");
 
-export default memo(function ShippingAddressCard({
-  dlvrOdrFnm,
-  dlvrOdrLnm,
-  dlvrZpcd,
-  dlvrStatNm,
-  dlvrCityNm,
-  dlvrDtlAddr,
-  dlvrCtpt,
-  dlvrEmalAddr,
-}) {
+export default memo(function ShippingAddressCard({ list }) {
   return (
-    <ItemContainer className={css.itemContainer}>
-      <h2 className={css.title}>
-        {dlvrOdrFnm} {dlvrOdrLnm}
-      </h2>
-      <div className={css.addressWrap}>
-        <p>
-          {dlvrZpcd} {dlvrStatNm}, <br />
-          {dlvrCityNm} <br />
-          {dlvrDtlAddr}
-        </p>
-      </div>
-      <div className={css.cardFooter}>
-        <p className={css.callNumber}>
-          <span />
-          {dlvrCtpt?.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`)}
-        </p>
-        <p className={css.email}>
-          <span />
-          {dlvrEmalAddr}
-        </p>
-      </div>
-    </ItemContainer>
+    <CheckOutContainer className={css.shippingBox}>
+      <TScroller className={css.shipping}>
+        {list &&
+          list.map(
+            (
+              {
+                dlvrOdrFnm,
+                dlvrOdrLnm,
+                dlvrZpcd,
+                dlvrStatNm,
+                dlvrCityNm,
+                dlvrDtlAddr,
+                dlvrCtpt,
+                dlvrEmalAddr,
+              },
+              index
+            ) => {
+              return (
+                <ItemContainer className={css.itemContainer} key={index}>
+                  <h2 className={css.title}>
+                    {dlvrOdrFnm} {dlvrOdrLnm}
+                  </h2>
+                  <div className={css.addressWrap}>
+                    <p>
+                      {dlvrZpcd} {dlvrStatNm}, <br />
+                      {dlvrCityNm} <br />
+                      {dlvrDtlAddr}
+                    </p>
+                  </div>
+                  <div className={css.cardFooter}>
+                    <p className={css.callNumber}>
+                      <span />
+                      {dlvrCtpt?.replace(
+                        /^(\d{2,3})(\d{3,4})(\d{4})$/,
+                        `$1-$2-$3`
+                      )}
+                    </p>
+                    <p className={css.email}>
+                      <span />
+                      {dlvrEmalAddr}
+                    </p>
+                  </div>
+                </ItemContainer>
+              );
+            }
+          )}
+      </TScroller>
+    </CheckOutContainer>
   );
 });

com.twin.app.shoptime/src/views/CheckOutPanel/components/ShippingAddressCard.module.less

@@ -1,6 +1,10 @@
 @import "../../../style/CommonStyle.module.less";
 @import "../../../style/utils.module.less";
 
+.shippingBox {
+  min-height: 383px;
+}
+
 .itemContainer {
   .size(@w: 444px, @h: 348px);
   background-color: @BG_COLOR_05;

com.twin.app.shoptime/src/views/CheckOutPanel/container/FixedSideBar.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+
+import classNames from "classnames";
+
+import css from "./FixedSideBar.module.less";
+
+export default function FixedSideBar({ list, open }) {
+  console.log("###test", open);
+  //   const []
+  return (
+    <>
+      <div className={classNames(css.fixedBg, css.displayOff)}></div>
+      <div className={classNames(css.fixedSideBar, css.displayOff)}>
+        <div className={css.sideMainTitle}>
+          <span />
+          ORDER ITEM
+        </div>
+        <div className={css.sideLine} />
+        <div className={css.sideItemList}>
+          {list &&
+            list.length > 0 &&
+            list.map((item, index) => {
+              return (
+                <div className={css.sideItem} key={index}>
+                  <div className={css.sideTitle}>
+                    <img src={item.patncLogPath} className={css.sideLogoImg} />
+                    ID: {item.prdtId}
+                  </div>
+                  <div className={css.sideLine} />
+                  <div className={css.productInfo}>
+                    <div className={css.productImg}>
+                      <img src={item.imgUrls[0].imgUrl} />
+                    </div>
+                    <div className={css.pdInfo}>
+                      <div className={css.pdName}>{item.prdtNm}</div>
+                      <div className={css.pdOpt}>
+                        {item.prdtOpt[0].prodOptCval}
+                      </div>
+                      <div className={css.pdEa}>QTY : {item.prodQty}</div>
+                      <div className={css.pdPriceInfo}>
+                        $ {item.price3 !== 0 ? item.price3 : item.price2}
+                        <span> | S&H{item.shippingCharge}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </>
+  );
+}

com.twin.app.shoptime/src/views/CheckOutPanel/container/FixedSideBar.module.less

@@ -0,0 +1,132 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+.fixedBg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 11;
+  &.displayOn {
+    display: block;
+  }
+  &.displayOff {
+    display: none;
+  }
+}
+.fixedSideBar {
+  &.displayOn {
+    display: block;
+  }
+  &.displayOff {
+    display: none;
+  }
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 720px;
+  height: 100%;
+  background: #2c343f;
+  z-index: 12;
+  .sideMainTitle {
+    margin: 60px 13px 30px 19px;
+    font-size: 42px;
+    color: #f8f8f8;
+    height: 48px;
+    line-height: 48px;
+    display: flex;
+    flex-wrap: wrap;
+    > span {
+      background-image: url("../../../../assets/images/btn/btn-wh-arrow-left-nor.svg");
+      width: 48px;
+      height: 48px;
+      background-size: contain;
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn-wh-arrow-left-foc.svg");
+      }
+    }
+  }
+  .sideLine {
+    border-bottom: 1px solid #d9d9d9;
+  }
+  .sideItemList {
+    padding: 30px;
+    .sideItem {
+      width: 660px;
+      height: 333px;
+      background: #fff;
+      border-radius: 12px;
+      margin-bottom: 12px;
+      .sideTitle {
+        padding: 20px 30px;
+        color: #767676;
+        font-size: 30px;
+        font-weight: bold;
+        .sideLogoImg {
+          width: 42px;
+          height: 42px;
+          margin-right: 12px;
+        }
+      }
+      .productInfo {
+        padding: 20px 30px 30px;
+        display: flex;
+        flex-wrap: wrap;
+        .productImg {
+          border: 1px solid #f0f0f0;
+          width: 200px;
+          height: 200px;
+          > img {
+            width: 198px;
+            height: 198px;
+          }
+        }
+        .pdInfo {
+          width: 375px;
+          margin-left: 20px;
+          .pdName {
+            width: 375px;
+            height: 60px;
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+            line-height: 32px;
+            .elip(@clamp:2);
+          }
+          .pdOpt {
+            width: 375px;
+            height: 30px;
+            margin-top: 12px;
+            font-size: 24px;
+            font-weight: normal;
+            color: #808080;
+            .elip(@clamp:1);
+          }
+          .pdEa {
+            width: 375px;
+            height: 30px;
+            color: #808080;
+            font-weight: normal;
+            font-size: 24px;
+            .elip(@clamp:1);
+          }
+          .pdPriceInfo {
+            margin-top: 10px;
+            display: flex;
+            width: 380px;
+            height: 36px;
+            line-height: 36px;
+            color: #c70850;
+            font-size: 30px;
+            .elip(@clamp:1);
+            > span {
+              font-size: 24px;
+              color: #808080;
+            }
+          }
+        }
+      }
+    }
+  }
+}

com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.jsx

@@ -1,37 +1,61 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import BillingAddressTab from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/BillingAddressTab/BillingAddressTab";
-import PaymentTab from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/PaymentTab/PaymentTab";
-import ShippingAddressTab from "../../MyPagePanel/MyPageSub/MyInfo/MyInfoTabContents/ShippingAddressTab/ShippingAddressTab";
+import TButton from "../../../components/TButton/TButton";
+import { $L } from "../../../utils/helperMethods";
+import BillingAddressCard from "../components/BillingAddressCard";
+import PaymentCard from "../components/PaymentCard";
 import ShippingAddressCard from "../components/ShippingAddressCard";
 import Subject from "../components/Subject";
+import FixedSideBar from "./FixedSideBar.jsx";
 import css from "./InformationContainer.module.less";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
-export default function InformationContainer() {
+
+const BtnSpot = Spottable("div");
+export default function InformationContainer({ checkoutData }) {
+  console.log("###infomantion", checkoutData);
+  const [open, setOpen] = useState(false);
+  const handleClick = useCallback(() => {
+    setOpen(true);
+  }, [onClick]);
   return (
-    <Container className={css.container}>
-      <Subject title="ORDER ITEMS" />
-      <div>
-        <Subject title="SHIPPING ADDRESS" />
-        <ShippingAddressCard />
-      </div>
-      <div>
-        <Subject title="BILLING ADDRESS" />
-        <BillingAddressTab />
-      </div>
-      <div>
-        <Subject title="PATMENT METHOD" />
-        <PaymentTab />
-      </div>
-      <div>
-        <Subject title="OFFERS & PROMOTION" />
-      </div>
-    </Container>
+    <>
+      <Container className={css.container}>
+        <Subject title="ORDER ITEMS" />
+        <BtnSpot className={css.markBtn}>
+          <p>{checkoutData.productList?.length} ITEMS</p>
+          <div className={css.markImg}></div>
+        </BtnSpot>
+        <div className={css.listBox}>
+          <Subject title="SHIPPING ADDRESS" />
+          <TButton className={css.editBtn}>ADD/EDIT</TButton>
+          <ShippingAddressCard list={checkoutData?.shippingAddressList} />
+        </div>
+        <div className={css.listBox}>
+          <Subject title="BILLING ADDRESS" />
+          <TButton className={css.editBtn}>ADD/EDIT</TButton>
+          <BillingAddressCard list={checkoutData?.billingAddressList} />
+        </div>
+        <div className={css.listBox}>
+          <Subject title="PATMENT METHOD" />
+          <TButton className={css.editBtn}>ADD/EDIT</TButton>
+          <PaymentCard list={checkoutData?.cardInfo} />
+        </div>
+        <div className={css.listBox}>
+          <Subject title="OFFERS & PROMOTION" />
+          <BtnSpot className={css.markBtn}>
+            <p>$12.60</p>
+            <div className={css.markImg}></div>
+          </BtnSpot>
+        </div>
+      </Container>
+      <FixedSideBar list={checkoutData?.productList} open={open} />
+    </>
   );
 }

com.twin.app.shoptime/src/views/CheckOutPanel/container/InformationContainer.module.less

@@ -5,6 +5,72 @@
   background-color: #f8f8f8f8;
   width: 1320px;
   height: 100%;
+  position: relative;
+  .markBtn {
+    position: absolute;
+    top: 84px;
+    right: 60px;
+    height: 48px;
+    display: flex;
+    > p {
+      font-size: 30px;
+      font-weight: bold;
+      color: #c70850;
+      line-height: 48px;
+    }
+    .markImg {
+      width: 48px;
+      height: 48px;
+      background-image: url("../../../../assets/images/btn/btn-bk-arrow-right-nor.svg");
+      background-size: contain;
+    }
+    &:focus {
+      .markImg {
+        background-image: url("../../../../assets/images/btn/btn-bk-arrow-right-foc.svg");
+        background-size: contain;
+      }
+    }
+  }
+  .listBox {
+    position: relative;
+    .markBtn {
+      position: absolute;
+      top: 24px;
+      right: 60px;
+      height: 48px;
+      display: flex;
+      > p {
+        font-size: 30px;
+        font-weight: bold;
+        color: #c70850;
+        line-height: 48px;
+      }
+      .markImg {
+        width: 48px;
+        height: 48px;
+        background-image: url("../../../../assets/images/btn/btn-bk-arrow-right-nor.svg");
+        background-size: contain;
+      }
+      &:focus {
+        .markImg {
+          background-image: url("../../../../assets/images/btn/btn-bk-arrow-right-foc.svg");
+          background-size: contain;
+        }
+      }
+    }
+  }
+  .editBtn {
+    position: absolute;
+    min-width: unset;
+    max-width: unset;
+    width: 150px;
+    height: 60px;
+    font-size: 24px;
+    line-height: 60px;
+    text-align: center;
+    top: 18px;
+    right: 60px;
+  }
   .address {
     height: 383px;
     background-color: #f2f2f2;

com.twin.app.shoptime/src/views/CheckOutPanel/container/SummaryContainer.module.less

@@ -2,7 +2,7 @@
 @import "../../../style/utils.module.less";
 
 .container {
-  .size(@w: 600px , @h: 100%);
+  .size(@w: 600px , @h: inherit);
   background-color: #2c343f;
 }