myOrder change ui / focus / api

com.twin.app.shoptime/src/actions/orderActions.js

@@ -2,64 +2,117 @@ import axios from "axios";
 
 import { URLS } from "../api/apiConfig";
 import { TAxios } from "../api/TAxios";
+import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../utils/Config";
 import { types } from "./actionTypes";
-import { getTermsAgreeYn } from "./commonActions";
+import { changeAppStatus, getTermsAgreeYn } from "./commonActions";
 
 // 회원 주문 정보 조회 (IF-LGSP-340)
-export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
+let getMyinfoOrderSearchKey = null;
-  const {
+let lastMyinfoOrderSearchParams = {};
-    mbrNo,
+export const getMyinfoOrderSearch =
-    srchMonth,
+  (params, orderInfoDataIdx = 1, key, loading = true) =>
-    cancelOrderYn,
+  (dispatch, getState) => {
-    keyword,
+    const { mbrNo, srchMonth, cancelOrderYn } = params;
-    limitNum,
+    let limitNum = params.limitNum || GET_MY_INFO_ORDER_SEARCH_LIMIT;
-    orderInfoDataIdx,
-    orderInfo,
-    orderInfoCount,
-  } = params;
 
-  const onSuccess = (response) => {
+    if (orderInfoDataIdx === 1) {
-    console.log("getMyinfoOrderSearch onSuccess ", response.data);
+      if (
+        JSON.stringify(lastMyinfoOrderSearchParams) === JSON.stringify(params)
+      ) {
+        console.log("getMyinfoOrderSearch ignore patch");
+        return;
+      }
 
-    dispatch({
+      lastMyinfoOrderSearchParams = params;
-      type: types.GET_MY_INFO_ORDER_SEARCH,
+    }
-      payload: response.data.data,
+
-    });
+    if (loading) {
+      dispatch(
+        changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
+      );
+    }
+
+    let currentKey = key;
+    const onSuccess = (response) => {
+      console.log("getMyinfoOrderSearch onSuccess ", response.data);
+
+      if (orderInfoDataIdx === 1) {
+        getMyinfoOrderSearchKey = new Date();
+        currentKey = getMyinfoOrderSearchKey;
+
+        dispatch({
+          type: types.GET_MY_INFO_ORDER_SEARCH,
+          payload: response.data.data,
+          orderSearchParams: {
+            mbrNo,
+            srchMonth,
+            cancelOrderYn,
+            limitNum,
+          },
+        });
+      } else if (getMyinfoOrderSearchKey === currentKey) {
+        dispatch({
+          type: types.GET_MY_INFO_ORDER_SEARCH,
+          payload: response.data.data,
+          append: true,
+          startIndex: (orderInfoDataIdx - 1) * limitNum,
+        });
+      }
+
+      if (loading) {
+        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      }
+    };
+
+    const onFail = (error) => {
+      console.error("getMyinfoOrderSearch onFail ", error);
+      if (loading) {
+        dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+      }
+      if (orderInfoDataIdx === 1) {
+        lastMyinfoOrderSearchParams = {};
+      }
+    };
+
+    TAxios(
+      dispatch,
+      getState,
+      "get",
+      URLS.GET_MY_INFO_ORDER_SEARCH,
+      {
+        mbrNo,
+        srchMonth,
+        cancelOrderYn,
+        limitNum,
+        orderInfoDataIdx,
+      },
+      {},
+      onSuccess,
+      onFail
+    );
   };
 
-  const onFail = (error) => {
+export const continueGetMyinfoOrderSearch =
-    console.error("getMyinfoOrderSearch onFail ", error);
+  (orderInfoDataIdx = 2) =>
+  (dispatch, getState) => {
+    const orderInfoData = getState().order.orderInfoData || {};
+    const totalCount = orderInfoData.orderInfoCount ?? 0;
+    const startIndex = GET_MY_INFO_ORDER_SEARCH_LIMIT * (orderInfoDataIdx - 1);
+
+    if (startIndex <= 1 || totalCount < startIndex) {
+      return;
+    }
+
+    dispatch(
+      getMyinfoOrderSearch(
+        { ...lastMyinfoOrderSearchParams },
+        orderInfoDataIdx,
+        getMyinfoOrderSearchKey,
+        false
+      )
+    );
   };
 
-  let apiUrl;
-
-  if (cancelOrderYn === "Y") {
-    apiUrl = URLS.GET_MY_INFO_ORDER_SEARCH_CANCEL;
-  } else if (cancelOrderYn === "N") {
-    apiUrl = URLS.GET_MY_INFO_ORDER_SEARCH;
-  }
-
-  TAxios(
-    dispatch,
-    getState,
-    "get",
-    apiUrl,
-    {
-      mbrNo,
-      srchMonth,
-      cancelOrderYn,
-      keyword,
-      limitNum,
-      orderInfoDataIdx,
-      orderInfo,
-      orderInfoCount,
-    },
-    {},
-    onSuccess,
-    onFail
-  );
-};
-
 // 회원 주문 상세 정보 조회 (IF-LGSP-341)
 export const getMyinfoOrderDetailSearch = (params) => (dispatch, getState) => {
   const { mbrNo, ordNo, prdtId } = params;

com.twin.app.shoptime/src/api/apiConfig.js

@@ -115,7 +115,6 @@ export const URLS = {
   SET_PURCHASE_TERMS_AGREE: "/lgsp/v1/myinfo/purchaseTerms/agree.lge",
   SET_PURCHASE_TERMS_WITHDRAW: "/lgsp/v1/myinfo/purchaseTerms/withdraw.lge",
   GET_MY_INFO_ORDER_SEARCH: "/lgsp/v1/myinfo/order/info.lge",
-  GET_MY_INFO_ORDER_SEARCH_CANCEL: "/lgsp/v1/myinfo/order/info.lge",
   GET_MY_INFO_ORDER_DETAIL_SEARCH: "/lgsp/v1/myinfo/order/detail.lge",
   GET_MY_INFO_ORDER_SHIPPING_SEARCH: "/lgsp/v1/myinfo/order/shipping.lge",
 

com.twin.app.shoptime/src/reducers/orderReducer.js

@@ -1,10 +1,17 @@
 import { types } from "../actions/actionTypes";
+import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../utils/Config";
 
 const initialState = {
   orderDetailData: {},
   orderInfoData: {},
   orderCancelData: {},
   orderShippingData: {},
+  orderSearchParams: {
+    mbrNo: null,
+    srchMonth: null,
+    cancelOrderYn: null,
+    limitNum: GET_MY_INFO_ORDER_SEARCH_LIMIT,
+  },
 };
 
 export const orderReducer = (state = initialState, action) => {
@@ -15,11 +22,32 @@ export const orderReducer = (state = initialState, action) => {
         orderDetailData: action.payload,
       };
 
-    case types.GET_MY_INFO_ORDER_SEARCH:
+    case types.GET_MY_INFO_ORDER_SEARCH: {
-      return {
+      const newResults = action.payload.orderInfo || [];
-        ...state,
+      const orderInfoCount = action.payload.orderInfoCount;
-        orderInfoData: action.payload,
+
-      };
+      if (action.append) {
+        const existingData = state.orderInfoData.orderInfo || [];
+        const combinedData = [...existingData, ...newResults];
+
+        return {
+          ...state,
+          orderInfoData: {
+            ...state.orderInfoData,
+            orderInfo: combinedData,
+            orderInfoCount,
+          },
+        };
+      } else {
+        return {
+          ...state,
+          orderInfoData: {
+            ...action.payload,
+          },
+          orderSearchParams: action.orderSearchParams,
+        };
+      }
+    }
 
     case types.GET_MY_INFO_ORDER_SEARCH_CANCEL:
       return {

com.twin.app.shoptime/src/utils/Config.js

@@ -43,6 +43,9 @@ export const SEARCH_DATA_MAX_RESULTS_LIMIT = 30;
 // getSubCategory data
 export const CATEGORY_DATA_MAX_RESULTS_LIMIT = 20;
 
+// getMyinfoOrderSearch data
+export const GET_MY_INFO_ORDER_SEARCH_LIMIT = 5;
+
 // popup
 export const ACTIVE_POPUP = {
   alarmOffPopup: "alarmOffPopup",

com.twin.app.shoptime/src/utils/helperMethods.js

@@ -397,3 +397,9 @@ export const getRectDiff = (element1, element2) => {
     bottom: element1Rect.bottom - element2Rect.bottom,
   };
 };
+
+export const getFormattingCardNo = (cardNumber) => {
+  return `${"*".repeat(12)}${cardNumber.slice(-4)}`
+    .replace(/(.{4})/g, "$1-")
+    .slice(0, -1);
+};

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

@@ -2,17 +2,12 @@ import React, { memo } from "react";
 
 import Spottable from "@enact/spotlight/Spottable";
 
+import { getFormattingCardNo } from "../../../../../../utils/helperMethods";
 import css from "./PaymentItem.module.less";
 
 const CardItem = Spottable("div");
 
 export default memo(function PaymentItem({ easyPmtSeq, cardKnd, cardNo }) {
-  const getFormattingCardNo = (cardNumber) => {
-    return `${"*".repeat(12)}${cardNumber.slice(-4)}`
-      .replace(/(.{4})/g, "$1-")
-      .slice(0, -1);
-  };
-
   return (
     <CardItem className={css.card} aria-label={cardKnd + ", 1 of 1"}>
       <h2 className={css.cardKnd}>{cardKnd.toUpperCase()}</h2>

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

@@ -1,8 +1,15 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
 
+import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
@@ -20,6 +27,7 @@ import {
 // getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회 - 디테일
 // getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회
 import {
+  continueGetMyinfoOrderSearch,
   getMyinfoOrderDetailSearch,
   getMyinfoOrderSearch,
   getMyinfoOrderShippingSearch,
@@ -30,36 +38,116 @@ import TButtonTab, {
 } from "../../../../components/TButtonTab/TButtonTab";
 import TDropDown from "../../../../components/TDropDown/TDropDown";
 import THeader from "../../../../components/THeader/THeader";
-import TPanel from "../../../../components/TPanel/TPanel";
 import TVerticalPagenator from "../../../../components/TVerticalPagenator/TVerticalPagenator";
+import usePrevious from "../../../../hooks/usePrevious";
+import { GET_MY_INFO_ORDER_SEARCH_LIMIT } from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
+import NoOrderList from "./components/NoOrderList";
+import OrderListCard from "./components/OrderListCard";
 import css from "./MyOrders.module.less";
-import CancelOrderList from "./OrderList/CancelOrderList";
+
-import OrderList from "./OrderList/OrderList";
+const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
 
-export default function MyOrders({ title, panelInfo }) {
+const getButtonTabList = () => {
-  const { appStatus } = useSelector((state) => state.common);
+  return [$L("ORDERS"), $L("CANCELLED ORDERS")];
-  const [selectedTab, setSelectedTab] = useState(0);
+};
-  const [dropDownTab, setDropDownTab] = useState(0);
+
-  const filterMethods = ["Last 3Month", "Last 6Month"];
+let buttonTabList = null;
-  const tabList = [$L("ORDERS"), $L("CANCELLED ORDERS")];
+
+export default function MyOrders({ title, panelInfo, isOnTop }) {
+  if (!buttonTabList) {
+    buttonTabList = getButtonTabList();
+  }
 
   const dispatch = useDispatch();
 
-  const { userNumber } = useSelector(
+  const dataAppendJob = useRef(new Job((func) => func(), 1000));
-    (state) => state.common.appStatus.loginUserData
+
+  const userNumber = useSelector(
+    (state) => state.common.appStatus?.loginUserData?.userNumber
+  );
+  const orderInfoData = useSelector((state) => state.order?.orderInfoData);
+  const isLoading = useSelector(
+    (state) => state.common.appStatus?.showLoadingPanel?.show
+  );
+  const orderSearchParams = useSelector(
+    (state) => state.order?.orderSearchParams
   );
 
-  let timerRef = useRef();
+  const orderInfo = orderInfoData?.orderInfo || {};
+
+  const cbChangePageRef = useRef(null);
+  const focusedContainerIdRef = useRef(null);
+
+  const [selectedTab, setSelectedTab] = useState(0);
+  const [dropDownTab, setDropDownTab] = useState(0);
+  const [styleChange, setStyleChange] = useState(false);
+
+  const tabRef = usePrevious(selectedTab);
+  const dropDownTabRef = usePrevious(dropDownTab);
+  const orderInfoDataRef = usePrevious(orderInfoData);
+
+  const filterMethods = useMemo(
+    () => [$L("Last 3 Month"), $L("Last 6 Month")],
+    []
+  );
+
+  const getSearchParams = useCallback((selectedTab, dropDownTab) => {
+    let cancelOrderYn = selectedTab === 1 ? "Y" : "N";
+    let srchMonth = dropDownTab === 1 ? 6 : 3;
+
+    return { cancelOrderYn, srchMonth };
+  }, []);
+
+  const reload = useCallback(() => {
+    const { cancelOrderYn, srchMonth } = getSearchParams(
+      tabRef.current,
+      dropDownTabRef.current
+    );
+    const params = { mbrNo: userNumber, srchMonth, cancelOrderYn };
+
+    if (
+      orderSearchParams.mbrNo !== params.mbrNo ||
+      orderSearchParams.srcMonth !== params.srchMonth ||
+      orderSearchParams.cancelOrderYn !== params.cancelOrderYn
+    ) {
+      dispatch(getMyinfoOrderSearch(params));
+    }
+  }, [
+    getSearchParams,
+    userNumber,
+    orderSearchParams,
+    dispatch,
+    tabRef,
+    dropDownTabRef,
+  ]);
+
+  useEffect(() => {
+    if (userNumber) {
+      reload();
+    }
+  }, [userNumber, dropDownTab, selectedTab, reload]);
+
+  useEffect(() => {
+    const c = document.getElementById("floatLayer");
+
+    c.classList.add("myOrders_dropdown");
+    return () => {
+      c.classList.remove("myOrders_dropdown");
+    };
+  }, []);
 
   const handleItemClick = useCallback(
     ({ index, ...rest }) => {
-      console.log("#TButtonTab onItemClick", index, rest);
+      if (index === selectedTab) {
+        return;
+      }
+
       setSelectedTab(index);
     },
     [selectedTab]
@@ -75,58 +163,97 @@ export default function MyOrders({ title, panelInfo }) {
     [dropDownTab]
   );
 
-  useEffect(() => {
+  const handleStyle = useCallback(() => {
-    const initFoucsedItem = document.querySelector(
+    setStyleChange(true);
-      '[data-spotlight-id="tab-0"]'
-    );
-
-    timerRef.current = setTimeout(() => {
-      Spotlight.focus(initFoucsedItem);
-    }, 0);
-  }, [userNumber]);
-
-  useEffect(() => {
-    return () => {
-      clearTimeout(timerRef.current);
-    };
   }, []);
 
+  const handleStyleOut = useCallback(() => {
+    setStyleChange(false);
+  }, []);
+
+  const onFocusedContainerId = useCallback((containerId) => {
+    focusedContainerIdRef.current = containerId;
+  }, []);
+
+  const onScrollStop = useCallback(
+    (event) => {
+      if (event && event.reachedEdgeInfo) {
+        if (event.reachedEdgeInfo.bottom) {
+          const currentCount = orderInfoDataRef.current?.orderInfo?.length ?? 1;
+
+          const nextPage =
+            Math.ceil(currentCount / GET_MY_INFO_ORDER_SEARCH_LIMIT) + 1;
+
+          dataAppendJob.current.throttle(() => {
+            dispatch(continueGetMyinfoOrderSearch(nextPage));
+          });
+        }
+      }
+    },
+    [dispatch, orderInfoDataRef]
+  );
+
   return (
     <>
       <THeader title={title} />
-      <TBody scrollable={false}>
+      <TBody
-        <div className={css.myorderscontainer}>
+        className={css.tBody}
-          <TabContainer className={css.tabContainer}>
+        scrollable={false}
-            <TButtonTab
+        spotlightDisabled={!isOnTop}
-              contents={tabList}
+      >
-              onItemClick={handleItemClick}
+        <TVerticalPagenator
-              selectedIndex={selectedTab && selectedTab}
+          className={css.tVerticalPagenator}
-              listType={LIST_TYPE.large}
+          spotlightId="myOrders_verticalPagenator"
-              className={css.ordersTab}
+          onFocusedContainerId={onFocusedContainerId}
-            />
+          cbChangePageRef={cbChangePageRef}
-            <TDropDown
+          onScrollStop={onScrollStop}
-              className={css.dropdown}
+          topMargin={40}
-              onSelect={handleSelectFilter}
+        >
-              selectedIndex={dropDownTab && dropDownTab}
+          <Container
-              width="small"
+            spotlightId={"myOrders_top_point_area"}
-            >
+            data-wheel-point={true}
-              {filterMethods}
+          >
-            </TDropDown>
+            {buttonTabList && buttonTabList.length > 0 && (
-          </TabContainer>
+              <TabContainer className={css.tabContainer}>
-
+                <TButtonTab
-          <div className={css.orderlist}>
+                  contents={buttonTabList}
-            {selectedTab === 0 && (
+                  onItemClick={handleItemClick}
-              <OrderList onOrderDetailPopup={""} dropDownTab={dropDownTab} />
+                  selectedIndex={selectedTab && selectedTab}
+                  listType={LIST_TYPE.medium}
+                />
+                <TDropDown
+                  className={classNames(
+                    css.dropdown,
+                    styleChange === true ? css.myOrdersDropdown : null
+                  )}
+                  onOpen={handleStyle}
+                  onClose={handleStyleOut}
+                  onSelect={handleSelectFilter}
+                  selectedIndex={dropDownTab}
+                  width="small"
+                >
+                  {filterMethods}
+                </TDropDown>
+              </TabContainer>
             )}
+            {!isLoading &&
+              (orderInfo && orderInfo.length > 0 ? (
+                orderInfo.map((item, index) => {
+                  const lastItem = index === orderInfo.length - 1;
 
-            {selectedTab === 1 && (
+                  return (
-              <CancelOrderList
+                    <OrderListCard
-                onOrderCancelPopUp={""}
+                      item={item}
-                dropDownTab={dropDownTab}
+                      key={index}
-              />
+                      lastItem={lastItem}
-            )}
+                    />
-          </div>
+                  );
-        </div>
+                })
+              ) : (
+                <NoOrderList />
+              ))}
+          </Container>
+        </TVerticalPagenator>
       </TBody>
     </>
   );

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

@@ -1,252 +1,333 @@
 @import "../../../../style/CommonStyle.module.less";
 @import "../../../../style/utils.module.less";
 
-.myorderscontainer {
+.tBody {
-  background: #f8f8f8;
+  width: 100%;
-  padding: 60px 60px 0;
+  height: calc(100% - 90px);
-  .tabContainer {
+  background-color: @BG_COLOR_01;
-    .ordersTab {
+
-      width: 100%;
+  .tVerticalPagenator {
-      > div {
+    padding-left: 60px;
-        width: 360px;
+    height: 100%;
-        height: 66px;
+
-      }
+    .test {
-    }
-    .dropdown {
       position: absolute;
-      right: 60px;
+      width: 100px;
-      top: 60px;
+      height: 100px;
+      top: 100px;
+      right: 100px;
+      background-color: red;
+      z-index: 9999;
     }
-  }
-  .noOrderList {
-    margin-top: 180px;
-    .noOrderBox {
-      width: 540px;
-      height: 252px;
-      text-align: center;
-      margin: 0 auto;
-      > img {
-        width: 100%;
-      }
-      .noOrderTitle {
-        font-size: 36px;
-        color: #a3a3a3;
-        font-weight: bold;
-      }
-      .noOrderSub {
-        font-size: 24px;
-        color: #b5b5b5;
-        font-weight: normal;
-      }
-    }
-  }
-  .orderlist {
-    margin-top: 40px;
-  }
-}
 
-.scrollBox {
+    .tabContainer {
-  margin: 30px 60px;
+      padding-top: 60px;
-  width: 780px;
+      width: -webkit-fit-content;
-  height: 460px;
+      height: auto;
-  overflow: hidden auto;
+      position: relative;
 
-  > ul {
+      .dropdown {
-    border: 1px solid #dadada;
+        position: absolute;
-    > li {
+        right: 0px;
-      width: 100%;
+        bottom: 5px;
-      height: 90px;
+
-      border-bottom: 1px solid #dadada;
+        &.myOrdersDropdown {
-      background: #fff;
+          > div {
-      padding: 0 30px;
-      display: flex;
-      justify-content: space-between;
-      &.hideInfo {
-        padding: 30px;
-        background: #f2f2f2;
-        height: auto;
-        display: inline-block;
-        > h5 {
-          width: 100%;
-          color: #333;
-          font-size: 24px;
-          font-weight: bold;
-          margin-bottom: 14px;
-        }
-        .shippingInfo {
-          width: 100%;
-          list-style: none;
-          height: 230px;
-          margin-bottom: 20px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-          > li {
-            width: 100%;
-            font-size: 24px;
-            font-weight: normal;
-            color: #808080;
-            line-height: 1.33;
-          }
-        }
-        .deliveryInfo {
-          width: 100%;
-          list-style: none;
-          height: auto;
-          > li {
-            width: 100%;
-            font-size: 24px;
-            font-weight: normal;
-            color: #808080;
-            line-height: 1.33;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            &.imgLiner {
-              height: 30px;
-              width: calc(100% - 23px);
-              margin-left: 23px;
-              border-left: 3px solid #808080;
-              &.active {
-                border-left: 3px solid #ce1c5e;
-              }
-            }
             > div {
-              margin-left: 17px;
+              border-radius: 6px 6px 0 0 !important;
-              width: calc(100% - 65px);
-              flex: none;
-              line-height: 1;
-              > h6 {
-                font-size: 24px;
-                font-weight: bold;
-                color: #333;
-                display: inline-block;
-                width: 100%;
-              }
-              > span {
-                font-size: 24px;
-                color: #808080;
-                font-weight: normal;
-                display: inline-block;
-                width: 100%;
-              }
-            }
-            > span {
-              flex: none;
-              width: 48px;
-              height: 48px;
-              display: inline-block;
-              &.notYet {
-                background: url("../../../../../assets/images/icons/ic-track-scheduled@3x.png");
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-size: 48px 48px;
-              }
-              &.delivering {
-                background: url("../../../../../assets/images/icons/ic-track-ongoing@3x.png");
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-size: 48px 48px;
-              }
-              &.complete {
-                background: url("../../../../../assets/images/icons/ic-track-completed@3x.png");
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-size: 48px 48px;
-              }
-            }
-          }
-        }
-        .shipmentDetail {
-          width: 100%;
-          list-style: none;
-          height: auto;
-          margin-bottom: 20px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-          > li {
-            width: 100%;
-            font-size: 24px;
-            font-weight: normal;
-            color: #808080;
-            line-height: 1.33;
-          }
-        }
-        .orderInfo {
-          width: 100%;
-          list-style: none;
-          > li {
-            display: flex;
-            flex-wrap: wrap;
-            width: 100%;
-            height: 30px;
-            margin-bottom: 20px;
-            justify-content: space-between;
-            &:last-child {
-              margin-bottom: 0;
-            }
-            .title {
-              color: #333;
-              font-size: 24px;
-              font-weight: normal;
-            }
-            .info {
-              font-size: 24px;
-              font-weight: normal;
-              color: #808080;
             }
           }
         }
       }
-      .leftBox {
+    }
-        flex: none;
+
-        font-size: 24px;
+    // .noOrderList {
-        font-weight: bold;
+    //   margin-top: 180px;
-        color: #333;
+    //   .noOrderBox {
-        line-height: 90px;
+    //     width: 540px;
-      }
+    //     height: 252px;
-      .rightBox {
+    //     text-align: center;
-        flex: none;
+    //     margin: 0 auto;
-        font-size: 24px;
+    //     > img {
-        font-weight: normal;
+    //       width: 100%;
-        color: #222;
+    //     }
-        line-height: 90px;
+    //     .noOrderTitle {
-      }
+    //       font-size: 36px;
-      .textList {
+    //       color: #a3a3a3;
-        color: #333;
+    //       font-weight: bold;
-        font-size: 24px;
+    //     }
-        font-weight: bold;
+    //     .noOrderSub {
-        width: 720px;
+    //       font-size: 24px;
-        margin: 24px 0;
+    //       color: #b5b5b5;
-        height: 42px;
+    //       font-weight: normal;
-        line-height: 42px;
+    //     }
-        .elip(@clamp:1);
+    //   }
-        .productLogo {
+    // }
-          width: 42px;
+    // .orderlist {
-          height: 42px;
+    //   margin-top: 40px;
-          background: #c70850;
+    // }
-          margin-right: 6px;
+
-          display: inline-block;
+    // .scrollBox {
-          vertical-align: top;
+    //   margin: 30px 60px;
-        }
+    //   width: 780px;
-      }
+    //   height: 460px;
-      &.blackLi {
+    //   overflow: hidden auto;
-        background: #2c343f;
+
-        height: 100px;
+    //   > ul {
-        line-height: 100px;
+    //     border: 1px solid #dadada;
-        display: flex;
+    //     > li {
-        flex-wrap: wrap;
+    //       width: 100%;
-        justify-content: space-between;
+    //       height: 90px;
-        .totalList {
+    //       border-bottom: 1px solid #dadada;
-          font-size: 30px;
+    //       background: #fff;
-          font-weight: bold;
+    //       padding: 0 30px;
-          color: #fff;
+    //       display: flex;
-        }
+    //       justify-content: space-between;
-        .totalAccountList {
+    //       &.hideInfo {
-          font-size: 42px;
+    //         padding: 30px;
-          font-weight: bold;
+    //         background: #f2f2f2;
-          color: #fff;
+    //         height: auto;
+    //         display: inline-block;
+    //         > h5 {
+    //           width: 100%;
+    //           color: #333;
+    //           font-size: 24px;
+    //           font-weight: bold;
+    //           margin-bottom: 14px;
+    //         }
+    //         .shippingInfo {
+    //           width: 100%;
+    //           list-style: none;
+    //           height: 230px;
+    //           margin-bottom: 20px;
+    //           &:last-child {
+    //             margin-bottom: 0;
+    //           }
+    //           > li {
+    //             width: 100%;
+    //             font-size: 24px;
+    //             font-weight: normal;
+    //             color: #808080;
+    //             line-height: 1.33;
+    //           }
+    //         }
+    //         .deliveryInfo {
+    //           width: 100%;
+    //           list-style: none;
+    //           height: auto;
+    //           > li {
+    //             width: 100%;
+    //             font-size: 24px;
+    //             font-weight: normal;
+    //             color: #808080;
+    //             line-height: 1.33;
+    //             display: flex;
+    //             flex-wrap: wrap;
+    //             align-items: center;
+    //             &.imgLiner {
+    //               height: 30px;
+    //               width: calc(100% - 23px);
+    //               margin-left: 23px;
+    //               border-left: 3px solid #808080;
+    //               &.active {
+    //                 border-left: 3px solid #ce1c5e;
+    //               }
+    //             }
+    //             > div {
+    //               margin-left: 17px;
+    //               width: calc(100% - 65px);
+    //               flex: none;
+    //               line-height: 1;
+    //               > h6 {
+    //                 font-size: 24px;
+    //                 font-weight: bold;
+    //                 color: #333;
+    //                 display: inline-block;
+    //                 width: 100%;
+    //               }
+    //               > span {
+    //                 font-size: 24px;
+    //                 color: #808080;
+    //                 font-weight: normal;
+    //                 display: inline-block;
+    //                 width: 100%;
+    //               }
+    //             }
+    //             > span {
+    //               flex: none;
+    //               width: 48px;
+    //               height: 48px;
+    //               display: inline-block;
+    //               &.notYet {
+    //                 background: url("../../../../../assets/images/icons/ic-track-scheduled@3x.png");
+    //                 background-size: contain;
+    //                 background-repeat: no-repeat;
+    //                 background-size: 48px 48px;
+    //               }
+    //               &.delivering {
+    //                 background: url("../../../../../assets/images/icons/ic-track-ongoing@3x.png");
+    //                 background-size: contain;
+    //                 background-repeat: no-repeat;
+    //                 background-size: 48px 48px;
+    //               }
+    //               &.complete {
+    //                 background: url("../../../../../assets/images/icons/ic-track-completed@3x.png");
+    //                 background-size: contain;
+    //                 background-repeat: no-repeat;
+    //                 background-size: 48px 48px;
+    //               }
+    //             }
+    //           }
+    //         }
+    //         .shipmentDetail {
+    //           width: 100%;
+    //           list-style: none;
+    //           height: auto;
+    //           margin-bottom: 20px;
+    //           &:last-child {
+    //             margin-bottom: 0;
+    //           }
+    //           > li {
+    //             width: 100%;
+    //             font-size: 24px;
+    //             font-weight: normal;
+    //             color: #808080;
+    //             line-height: 1.33;
+    //           }
+    //         }
+    //         .orderInfo {
+    //           width: 100%;
+    //           list-style: none;
+    //           > li {
+    //             display: flex;
+    //             flex-wrap: wrap;
+    //             width: 100%;
+    //             height: 30px;
+    //             margin-bottom: 20px;
+    //             justify-content: space-between;
+    //             &:last-child {
+    //               margin-bottom: 0;
+    //             }
+    //             .title {
+    //               color: #333;
+    //               font-size: 24px;
+    //               font-weight: normal;
+    //             }
+    //             .info {
+    //               font-size: 24px;
+    //               font-weight: normal;
+    //               color: #808080;
+    //             }
+    //           }
+    //         }
+    //       }
+    //       .leftBox {
+    //         flex: none;
+    //         font-size: 24px;
+    //         font-weight: bold;
+    //         color: #333;
+    //         line-height: 90px;
+    //       }
+    //       .rightBox {
+    //         flex: none;
+    //         font-size: 24px;
+    //         font-weight: normal;
+    //         color: #222;
+    //         line-height: 90px;
+    //       }
+    //       .textList {
+    //         color: #333;
+    //         font-size: 24px;
+    //         font-weight: bold;
+    //         width: 720px;
+    //         margin: 24px 0;
+    //         height: 42px;
+    //         line-height: 42px;
+    //         .elip(@clamp:1);
+    //         .productLogo {
+    //           width: 42px;
+    //           height: 42px;
+    //           background: #c70850;
+    //           margin-right: 6px;
+    //           display: inline-block;
+    //           vertical-align: top;
+    //         }
+    //       }
+    //       &.blackLi {
+    //         background: #2c343f;
+    //         height: 100px;
+    //         line-height: 100px;
+    //         display: flex;
+    //         flex-wrap: wrap;
+    //         justify-content: space-between;
+    //         .totalList {
+    //           font-size: 30px;
+    //           font-weight: bold;
+    //           color: #fff;
+    //         }
+    //         .totalAccountList {
+    //           font-size: 42px;
+    //           font-weight: bold;
+    //           color: #fff;
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  }
+}
+
+[class="myOrders_dropdown"] {
+  > div > div[id] > div:nth-child(2) {
+    -webkit-filter: none !important;
+    filter: none !important;
+    > div:nth-child(1) {
+      height: 123px !important;
+      width: 270px !important;
+      margin-top: 0 !important;
+      border-radius: 0 0 6px 6px !important;
+      background-color: @COLOR_GRAY03 !important;
+      > div {
+        width: 270px !important;
+        height: 144px !important;
+        border-radius: 0 !important;
+        padding-top: 0 !important;
+        > div {
+          > div {
+            > div {
+              padding: 0 !important;
+              &:first-child {
+                > div:nth-child(1) {
+                  border-radius: 6px 6px 0 0 !important;
+                  overflow: hidden;
+                  &:focus {
+                    border-radius: 0 !important;
+                  }
+                  > div:first-child {
+                    will-change: unset !important;
+                  }
+                }
+              }
+              &:last-child {
+                > div:nth-child(1) {
+                  border-radius: 0 0 6px 6px !important;
+                  overflow: hidden;
+                  &:focus {
+                    border-radius: 0 0 6px 6px !important;
+                  }
+                }
+              }
+              > div:nth-child(1) {
+                height: 63px !important;
+                padding: 20px 19px !important;
+                &:focus {
+                  background-color: @PRIMARY_COLOR_RED !important;
+                  color: @COLOR_WHITE !important;
+                  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+                }
+              }
+            }
+          }
         }
       }
     }

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx

@@ -1,209 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-
-import { useDispatch, useSelector } from "react-redux";
-
-import Spottable from "@enact/spotlight/Spottable";
-
-import noOrderImg from "../../../../../../assets/images/img-my-info-billing@3x.png";
-import {
-  getMyinfoOrderDetailSearch,
-  getMyinfoOrderSearch,
-  getMyinfoOrderShippingSearch,
-} from "../../../../../actions/orderActions";
-import TButton from "../../../../../components/TButton/TButton";
-import { $L } from "../../../../../utils/helperMethods";
-import css from "./CancelOrderList.module.less";
-
-const SpottableComponent = Spottable("div");
-
-export default function OrderList({ onOrderCancelPopUp, dropDownTab }) {
-  const dispatch = useDispatch();
-
-  const { appStatus } = useSelector((state) => state.common);
-
-  const orderInfoData = useSelector((state) => state.order?.orderInfoData);
-  const orderInfo = orderInfoData?.orderInfo;
-  const orderDetailData = useSelector(
-    (state) => state.order?.orderDetailData?.data?.orderInfo[0]
-  );
-
-  const onCancel = useCallback(() => {}, []);
-
-  // 주문 상세(취소) 팝업
-  const handleOrderDetailClick = useCallback(
-    (orderInfo) => () => {
-      onOrderCancelPopUp(orderInfo);
-    },
-    [onOrderCancelPopUp]
-  );
-
-  // 주문 정보
-  useEffect(() => {
-    if (
-      appStatus &&
-      appStatus.loginUserData &&
-      appStatus.loginUserData.userNumber
-    ) {
-      dispatch(
-        getMyinfoOrderSearch({
-          mbrNo: appStatus.loginUserData.userNumber,
-          srchMonth: dropDownTab === 0 ? 3 : 6,
-          cancelOrderYn: "Y",
-        })
-      );
-    }
-  }, [dispatch, dropDownTab]);
-
-  if (!orderInfo || orderInfo.length === 0) {
-    return (
-      <div className={css.noOrderList}>
-        <div className={css.noOrderBox}>
-          <img src={noOrderImg} alt="No order" />
-          <span className={css.noOrderTitle}>
-            {$L("THERE IS NO ORDER HISTORY")}
-          </span>
-          <br />
-          <span className={css.noOrderSub}>
-            {$L("Use search above to find past orders.")}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {orderInfo &&
-        orderInfo.map((order, index) => {
-          return (
-            <div className={css.orderBorder} key={index}>
-              <div className={css.orderNmInfo}>
-                <p className={css.orderTitle}>
-                  {$L("ORDER NUMBER")} :{" "}
-                  <span className={css.orderNm}>{order.ordNo}</span>
-                </p>
-              </div>
-              <div className={css.orderInfo}>
-                <div className={css.infoBox}>
-                  <div className={css.leftBox}>
-                    <div className={css.topBox}>
-                      <h4>{$L("payment method")}</h4>
-                      <span>
-                        {order.cardKnd} / {order.cardNo}
-                      </span>
-                    </div>
-                    <div className={css.underBox}>
-                      <h4>{$L("order date")}</h4>
-                      <span>January 5, 2023 : 취소 날짜 확인</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div className={css.orderItemList}>
-                  <ul>
-                    {order.orderProductInfo &&
-                      order.orderProductInfo.map((product, prodIndex) => {
-                        return (
-                          <li key={prodIndex}>
-                            <div className={css.topBox}>
-                              <div className={css.leftSmallBox}>
-                                {product.shptmDlvrStCd === "ORD00201" ? (
-                                  <span className={css.orderGreen}>
-                                    Ordered
-                                  </span>
-                                ) : product.shptmDlvrStCd === "ORD00202" ? (
-                                  <span className={css.orderGreen}>
-                                    Out for delivery
-                                  </span>
-                                ) : product.shptmDlvrStCd === "ORD00203" ? (
-                                  <span className={css.orderGreen}>
-                                    Arriving
-                                  </span>
-                                ) : product.shptmDlvrStCd === "ORD00204" ? (
-                                  <span className={css.orderBlue}>
-                                    Shipping
-                                  </span>
-                                ) : product.shptmDlvrStCd === "ORD00205" ? (
-                                  <span className={css.orderRed}>Canceled</span>
-                                ) : null}
-                                Arriving January 10 ~ January 15 - API 확인 필요{" "}
-                              </div>
-
-                              <TButton
-                                size="small"
-                                className={css.orderDetailBtn}
-                                onClick={handleOrderDetailClick(
-                                  order.orderProductInfo[prodIndex]
-                                )}
-                              >
-                                {$L("view cancelled details")}
-                              </TButton>
-                            </div>
-
-                            <div className={css.underBox}>
-                              <div className={css.leftBox}>
-                                <div className={css.productBox}>
-                                  <div className={css.logo}>
-                                    <span className={css.logoImg}>
-                                      <img src={product.logoImgPath} />
-                                    </span>
-                                    <p>{product.prdtNm}</p>
-                                  </div>
-                                  <div className={css.orderPdInfo}>
-                                    <img
-                                      className={css.productImg}
-                                      src={product.prdtImgUrl}
-                                    ></img>
-                                    <div className={css.pdInfo}>
-                                      <ul>
-                                        <li>
-                                          {$L("ID")}: {product.prdtId}
-                                        </li>
-                                        <li>
-                                          {$L("Qty")}: {product.prodQty}
-                                        </li>
-                                        <li>
-                                          Silver Metallic / XL : API 확인 필요
-                                        </li>
-                                      </ul>
-                                      <div className={css.orderAcc}>
-                                        ${product.prodPrc}
-                                        <span>|</span>
-                                        <span>
-                                          ${$L("OPTIONS TOTAL")}: $
-                                          {product.prdtOptPrc}
-                                        </span>
-                                        <span>|</span>
-                                        <span>
-                                          {$L("S&H")}: ${product.dlvrAmt}
-                                        </span>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-
-                              {/* 디테일 버튼 */}
-                              <div className={css.rightBox}>
-                                <ul>
-                                  <li>
-                                    <SpottableComponent className={css.divBtn}>
-                                      {$L("BUY IT AGAIN")}
-                                    </SpottableComponent>
-                                  </li>
-                                </ul>
-                              </div>
-                              {/* 디테일 버튼 */}
-                            </div>
-                          </li>
-                        );
-                      })}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-    </>
-  );
-}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less

@@ -1,385 +0,0 @@
-@import "../../../../../style/CommonStyle.module.less";
-@import "../../../../../style/utils.module.less";
-.orderBorder {
-  background: #f8f8f8;
-  width: 100%;
-  overflow: hidden;
-  border-radius: 12px;
-  border: 1px solid #dadada;
-  margin-bottom: 30px;
-  &:last-child {
-    margin-bottom: 93px;
-  }
-  .orderNmInfo {
-    height: 90px;
-    width: 100%;
-    display: flex;
-    background: #2c343f;
-    line-height: 90px;
-    padding: 0 60px;
-    justify-content: space-between;
-    .orderTitle {
-      color: @COLOR_WHITE;
-      font-size: 30px;
-      font-weight: bold;
-      font-family: @baseFont;
-      .orderNm {
-        font-size: 30px;
-        color: @COLOR_WHITE;
-        font-weight: normal;
-        font-family: @baseFont;
-      }
-    }
-    .orderCancelBtn {
-      .size(@w:224px,@h:60px);
-      align-self: center;
-    }
-  }
-  .orderInfo {
-    background-color: #f8f8f8;
-    .infoBox {
-      background: #f2f2f2;
-      width: 1680px;
-      padding: 40px 60px;
-      display: flex;
-      flex-wrap: wrap;
-
-      .leftBox {
-        width: 400px;
-        margin-right: 30px;
-        .topBox {
-          > h4 {
-            text-transform: uppercase;
-            font-size: 24px;
-            color: #222;
-            width: 400px;
-            height: 30px;
-            font-weight: bold;
-          }
-          > span {
-            display: inline-block;
-            margin: 6px 0 20px 0;
-            font-size: 24px;
-            color: #808080;
-            width: 400px;
-            height: 30px;
-            font-weight: 300;
-          }
-          border-bottom: 1px solid #dadada;
-        }
-        .underBox {
-          > h4 {
-            margin-top: 20px;
-            text-transform: uppercase;
-            font-size: 24px;
-            color: #222;
-            width: 400px;
-            height: 30px;
-            font-weight: bold;
-          }
-          > span {
-            display: inline-block;
-            margin: 6px 0 0 0;
-            font-size: 24px;
-            color: #808080;
-            width: 400px;
-            height: 30px;
-            font-weight: 300;
-          }
-        }
-      }
-      .rightBox {
-        width: 1130px;
-        height: 173px;
-        background-color: #fff;
-        border: 1px solid #dadada;
-        border-radius: 6px;
-        > ul {
-          list-style: none;
-          display: flex;
-          > li {
-            width: 188px;
-            height: 173px;
-            border-right: 1px solid #dadada;
-            &:last-child {
-              border-right: none;
-            }
-            > div {
-              border-bottom: 1px solid #dadada;
-              text-align: center;
-              line-height: 86px;
-              &:first-child {
-                width: 188px;
-                height: 86px;
-                text-transform: uppercase;
-                font-size: 24px;
-                font-weight: bold;
-                color: #222;
-              }
-              &:last-child {
-                width: 188px;
-                height: 86px;
-                border-bottom: none;
-                font-size: 30px;
-                color: #808080;
-              }
-            }
-          }
-        }
-      }
-    }
-    .totalAccount {
-      width: 100%;
-      height: 80px;
-      padding: 18px 60px;
-      background: #dadada;
-      display: flex;
-      justify-content: space-between;
-      .accTitle {
-        text-transform: uppercase;
-        line-height: 44px;
-        color: #222;
-        font-size: 30px;
-        font-weight: bold;
-      }
-      .accountNum {
-        color: #c70850;
-        font-weight: bold;
-        font-size: 40px;
-        line-height: 44px;
-      }
-    }
-    .orderItemList {
-      background: #f8f8f8;
-      padding: 60px;
-      width: 100%;
-      > ul {
-        list-style: none;
-        > li {
-          width: 1560px;
-          // height: 423px;
-          background: #fff;
-          display: flex;
-          flex-wrap: wrap;
-          border: 1px solid #dadada;
-          border-radius: 12px;
-          margin-bottom: 40px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-          .topBox {
-            padding: 20px 60px;
-            flex: none;
-            width: 100%;
-            height: 100px;
-            border-bottom: 1px solid #dadada;
-            align-content: center;
-            display: flex;
-            justify-content: space-between;
-            .leftSmallBox {
-              color: #222;
-              font-size: 24px;
-              margin: 9px 0;
-              .orderGreen {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(8, 199, 73, 0.3);
-                border: 3px solid #08c749;
-                border-radius: 6px;
-                color: #08c749;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-              .orderBlue {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(8, 199, 199, 0.3);
-                border: 3px solid #0877c7;
-                border-radius: 6px;
-                color: #0877c7;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-              .orderRed {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(199, 8, 80, 0.3);
-                border: 3px solid #c70850;
-                border-radius: 6px;
-                color: #c70850;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-              .orderBlack {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(20, 20, 20, 0.3);
-                border: 3px solid #141414;
-                border-radius: 6px;
-                color: #141414;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-            }
-
-            .orderDetailBtn {
-              width: 400px;
-              height: 60px;
-              font-size: 24px;
-              font-weight: bold;
-              vertical-align: middle;
-              font-weight: bold;
-              text-transform: uppercase;
-            }
-          }
-          .underBox {
-            flex: none;
-            display: flex;
-            width: 100%;
-            // height: 322px;
-            .leftBox {
-              width: 1059px;
-              // height: 322px;
-              border-right: 1px solid #dadada;
-              padding: 30px 60px;
-              .productBox {
-                .logo {
-                  display: flex;
-                  font-size: 30px;
-                  font-weight: bold;
-                  color: #222;
-                  line-height: 42px;
-                  margin-bottom: 20px;
-                  .logoImg {
-                    width: 42px;
-                    height: 42px;
-                    margin-right: 13px;
-                    > img {
-                      .size(@w:42px, @h:42px);
-                    }
-                  }
-                  > p {
-                    width: calc(100% - 55px);
-                  }
-                }
-                .orderPdInfo {
-                  display: flex;
-                  flex-wrap: wrap;
-                  .productImg {
-                    flex: none;
-                    width: 200px;
-                    height: 200px;
-                    border: 1px solid #dadada;
-                  }
-                  .pdInfo {
-                    margin-left: 20px;
-                    > ul {
-                      list-style: none;
-                      > li {
-                        font-size: 24px;
-                        font-weight: normal;
-                        color: #808080;
-                        margin-bottom: 6px;
-                        &:last-child {
-                          margin-bottom: 0;
-                        }
-                      }
-                    }
-                    .orderAcc {
-                      margin-top: 54px;
-                      color: #c70850;
-                      font-size: 30px;
-                      font-weight: bold;
-                      height: 36px;
-                      line-height: 36px;
-                      > span {
-                        color: #808080;
-                        font-size: 24px;
-                        font-weight: normal;
-                        margin: 0 5.5px;
-                        line-height: 36px;
-                        &:first-child {
-                          margin: 0 5.5px 0 11px;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            .noOrderList {
-              margin-top: 180px;
-              .noOrderBox {
-                width: 540px;
-                height: 252px;
-                text-align: center;
-                margin: 0 auto;
-                > img {
-                  width: 100%;
-                }
-                .noOrderTitle {
-                  font-size: 36px;
-                  color: #a3a3a3;
-                  font-weight: bold;
-                }
-                .noOrderSub {
-                  font-size: 24px;
-                  color: #b5b5b5;
-                  font-weight: normal;
-                }
-              }
-            }
-            .rightBox {
-              width: 500px;
-              // height: 322px;
-              display: flex;
-              align-items: center;
-              padding: 0 60px;
-              > ul {
-                list-style: none;
-                height: 100%;
-                > li {
-                  align-content: center;
-                  display: flex;
-                  flex-wrap: wrap;
-                  height: 100%;
-                  .divBtn {
-                    width: 380px;
-                    height: 60px;
-                    border: 1px solid #dadada;
-                    box-sizing: border-box;
-                    text-align: center;
-                    line-height: 58px;
-                    font-size: 24px;
-                    color: #808080;
-                    font-weight: 600;
-                    border-radius: 6px;
-                    background-image: linear-gradient(to top, #f5f5f5, #fff);
-                    margin-bottom: 6px;
-                    position: relative;
-                    &:focus {
-                      &::after {
-                        .focused(@boxShadow: 0, @borderRadius: 6px);
-                      }
-                    }
-                    &:last-child {
-                      margin-bottom: 0;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx

@@ -1,354 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-
-import { useDispatch, useSelector } from "react-redux";
-
-import Spottable from "@enact/spotlight/Spottable";
-
-import noOrderImg from "../../../../../../assets/images/img-my-info-billing@3x.png";
-import {
-  setHidePopup,
-  setShowPopup,
-} from "../../../../../actions/commonActions";
-import {
-  getMyinfoOrderDetailSearch,
-  getMyinfoOrderSearch,
-  getMyinfoOrderShippingSearch,
-} from "../../../../../actions/orderActions";
-import { pushPanel } from "../../../../../actions/panelActions";
-import TButton from "../../../../../components/TButton/TButton";
-import { ACTIVE_POPUP, panel_names } from "../../../../../utils/Config";
-import { $L } from "../../../../../utils/helperMethods";
-import MyOrdersPopUp from "../MyOrdersPopUp";
-import css from "./OrderList.module.less";
-
-const SpottableComponent = Spottable("div");
-
-export default function OrderList({ onOrderDetailPopup, dropDownTab }) {
-  const dispatch = useDispatch();
-
-  const { appStatus } = useSelector((state) => state.common);
-  const orderInfoData = useSelector((state) => state.order?.orderInfoData);
-  const orderInfo = useMemo(() => orderInfoData?.orderInfo, [orderInfoData]);
-  const orderDetailData = useSelector(
-    (state) => state.order?.orderDetailData?.data?.orderInfo[0]
-  );
-  const { popupVisible, activePopup } = useSelector(
-    (state) => state.common.popup
-  );
-
-  const onCancel = useCallback(() => {}, []);
-
-  // 주문 상세 팝업
-  const handleOrderDetailClick = useCallback(
-    (product) => {
-      dispatch(
-        getMyinfoOrderDetailSearch({
-          mbrNo: appStatus.loginUserData.userNumber,
-          ordNo: product.ordNo,
-          prdtId: product.prdtId,
-        })
-      );
-
-      dispatch(setShowPopup(ACTIVE_POPUP.orderDetailPopup));
-    },
-    [dispatch]
-  );
-
-  // 다시 주문 (주문 상세 페이지)
-  const handleBuyClick = useCallback(
-    (product) => () => {
-      return dispatch(
-        pushPanel({
-          name: panel_names.DETAIL_PANEL,
-          panelInfo: {
-            patnrId: product.patnrId,
-            prdtId: product.prdtId,
-          },
-        })
-      );
-    },
-    [dispatch]
-  );
-
-  // 아이템 취소
-  const handleCancelClick = useCallback(() => {
-    dispatch(setShowPopup(ACTIVE_POPUP.orderCancelReason));
-  }, []);
-
-  useEffect(() => {
-    if (
-      appStatus &&
-      appStatus.loginUserData &&
-      appStatus.loginUserData.userNumber
-    ) {
-      dispatch(
-        getMyinfoOrderSearch({
-          mbrNo: appStatus.loginUserData.userNumber,
-          srchMonth: dropDownTab === 0 ? 3 : 6,
-          cancelOrderYn: "N",
-        })
-      );
-    }
-  }, [dispatch, dropDownTab, appStatus]);
-
-  return (
-    <>
-      {!orderInfo || orderInfo.length === 0 ? (
-        <div className={css.noOrderList}>
-          <div className={css.noOrderBox}>
-            <img src={noOrderImg} alt="No order" />
-            <span className={css.noOrderTitle}>
-              {$L("THERE IS NO ORDER HISTORY")}
-            </span>
-            <br />
-            <span className={css.noOrderSub}>
-              {$L("Use search above to find past orders.")}
-            </span>
-          </div>
-        </div>
-      ) : (
-        orderInfo.map((order) => (
-          <div className={css.orderBorder} key={order.ordNo}>
-            <div className={css.orderNmInfo}>
-              <p className={css.orderTitle}>
-                {$L("ORDER NUMBER")} :{" "}
-                <span className={css.orderNm}>{order.ordNo}</span>
-              </p>
-              <TButton
-                size="small"
-                className={css.orderCancelBtn}
-                onClick={onCancel}
-              >
-                {$L("Cancel order")}
-              </TButton>
-            </div>
-
-            <div className={css.orderInfo}>
-              <div className={css.infoBox}>
-                <div className={css.leftBox}>
-                  <div className={css.topBox}>
-                    <h4>{$L("payment method")}</h4>
-                    <span>
-                      {order.cardKnd} / {order.cardNo}
-                    </span>
-                  </div>
-                  <div className={css.underBox}>
-                    <h4>{$L("order date")}</h4>
-                    <span>{order?.regDt}</span>
-                  </div>
-                </div>
-                <div className={css.rightBox}>
-                  <ul>
-                    <li>
-                      <div>{$L("item")}</div>
-                      <div>{order?.totProdQty}</div>
-                    </li>
-                    <li>
-                      <div>{$L("item total")}</div>
-                      <div>${order?.totProdPrc}</div>
-                    </li>
-                    <li>
-                      <div>{$L("coupon")}</div>
-                      <div>-${order?.totDcAmt}</div>
-                    </li>
-                    <li>
-                      <div>{$L("OPTIONS TOTAL")}</div>
-                      <div>${order?.totOptPrc}</div>
-                    </li>
-                    <li>
-                      <div>{$L("s&h")}</div>
-                      <div>${order?.totDlvrAmt}</div>
-                    </li>
-                    <li>
-                      <div>{$L("tax")}</div>
-                      <div>${order?.ordTotTaxAmt}</div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-
-              <div className={css.totalAccount}>
-                <div className={css.accTitle}>{$L("order total")}</div>
-                <div className={css.accountNum}>${order?.ordPmtReqAmt}</div>
-              </div>
-
-              <div className={css.orderItemList}>
-                <ul>
-                  {order.orderProductInfo.map((product) => (
-                    <li key={product.prdtId}>
-                      <div className={css.topBox}>
-                        <div className={css.leftSmallBox}>
-                          {product.shptmOrdStCd === "ORD00601" ? (
-                            <span className={css.orderGreen}>
-                              Order completed
-                            </span>
-                          ) : product.shptmOrdStCd === "ORD00602" ? (
-                            <span className={css.orderGreen}>
-                              Preparing for shipment
-                            </span>
-                          ) : product.shptmOrdStCd === "ORD00603" ? (
-                            <span className={css.orderGreen}>In Transit</span>
-                          ) : product.shptmOrdStCd === "ORD00604" ? (
-                            <span className={css.orderBlue}>Delivered</span>
-                          ) : product.shptmOrdStCd === "ORD00605" ? (
-                            <span className={css.orderRed}>Cancel order</span>
-                          ) : product.shptmOrdStCd === "ORD00606" ? (
-                            <span className={css.orderRed}>
-                              Cancellation processing
-                            </span>
-                          ) : product.shptmOrdStCd === "ORD00607" ? (
-                            <span className={css.orderRed}>
-                              Cancellation completed
-                            </span>
-                          ) : null}
-                          {/* Arriving January 10 ~ January 15 - API 확인 필요 */}
-                        </div>
-
-                        <TButton
-                          size="small"
-                          className={css.orderDetailBtn}
-                          onClick={() => handleOrderDetailClick(product)}
-                        >
-                          {$L("view order details")}
-                        </TButton>
-                      </div>
-
-                      <div className={css.underBox}>
-                        <div className={css.leftBox}>
-                          <div className={css.productBox}>
-                            <div className={css.logo}>
-                              <span className={css.logoImg}>
-                                <img
-                                  src={product.logoImgPath}
-                                  alt="Product Logo"
-                                />
-                              </span>
-                              <p>{product.prdtNm}</p>
-                            </div>
-                            <div className={css.orderPdInfo}>
-                              <img
-                                className={css.productImg}
-                                src={product.prdtImgUrl}
-                                alt="Product Image"
-                              />
-                              <div className={css.pdInfo}>
-                                <ul>
-                                  <li>
-                                    {$L("ID")}: {product.prdtId}
-                                  </li>
-                                  <li>
-                                    {$L("Qty")}: {product.prodQty}
-                                  </li>
-                                  {/* <li>Silver Metallic / XL : API 확인 필요</li> */}
-                                </ul>
-                                <div className={css.orderAcc}>
-                                  ${product.prodPrc}
-                                  <span>|</span>
-                                  <span>
-                                    ${$L("OPTIONS TOTAL")}: $
-                                    {product.prdtOptPrc}
-                                  </span>
-                                  <span>|</span>
-                                  <span>
-                                    {$L("S&H")}: ${product.dlvrAmt}
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className={css.rightBox}>
-                          <ul>
-                            <li>
-                              {product.shptmOrdStCd === "ORD00601" ? (
-                                <>
-                                  <SpottableComponent
-                                    className={css.divBtn}
-                                    onClick={handleBuyClick(product)}
-                                  >
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                  <SpottableComponent
-                                    className={css.divBtn}
-                                    onClick={handleCancelClick}
-                                  >
-                                    {$L("CANCEL ITEM")}
-                                  </SpottableComponent>
-                                </>
-                              ) : product.shptmOrdStCd === "ORD00602" ? (
-                                <>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("CANCEL ITEM")}
-                                  </SpottableComponent>
-                                </>
-                              ) : product.shptmOrdStCd === "ORD00603" ? (
-                                <>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("RETURN ITEM")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("EXCHANGE ITEM")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("TRACK PACKAGE")}
-                                  </SpottableComponent>
-                                </>
-                              ) : product.shptmOrdStCd === "ORD00604" ? (
-                                <>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("RETURN ITEM")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("EXCHANGE ITEM")}
-                                  </SpottableComponent>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("TRACK PACKAGE")}
-                                  </SpottableComponent>
-                                </>
-                              ) : product.shptmOrdStCd === "ORD00605" ? (
-                                <>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                </>
-                              ) : product.shptmOrdStCd === "ORD00606" ? (
-                                <>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                </>
-                              ) : product.shptmOrdStCd === "ORD00607" ? (
-                                <>
-                                  <SpottableComponent className={css.divBtn}>
-                                    {$L("BUY IT AGAIN")}
-                                  </SpottableComponent>
-                                </>
-                              ) : null}
-                            </li>
-                          </ul>
-                        </div>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        ))
-      )}
-
-      {(activePopup === ACTIVE_POPUP.orderDetailPopup ||
-        activePopup === ACTIVE_POPUP.orderCancelReason) && <MyOrdersPopUp />}
-    </>
-  );
-}

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

@@ -1,367 +0,0 @@
-@import "../../../../../style/CommonStyle.module.less";
-@import "../../../../../style/utils.module.less";
-.orderBorder {
-  background: #f8f8f8;
-  width: 100%;
-  overflow: hidden;
-  border-radius: 12px;
-  border: 1px solid #dadada;
-  margin-bottom: 30px;
-  &:last-child {
-    margin-bottom: 93px;
-  }
-  .orderNmInfo {
-    height: 90px;
-    width: 100%;
-    display: flex;
-    background: #2c343f;
-    line-height: 90px;
-    padding: 0 60px;
-    justify-content: space-between;
-    .orderTitle {
-      color: @COLOR_WHITE;
-      font-size: 30px;
-      font-weight: bold;
-      font-family: @baseFont;
-      .orderNm {
-        font-size: 30px;
-        color: @COLOR_WHITE;
-        font-weight: normal;
-        font-family: @baseFont;
-      }
-    }
-    .orderCancelBtn {
-      max-width: none;
-      min-width: auto;
-      height: 60px;
-      align-self: center;
-    }
-  }
-  .orderInfo {
-    background-color: #f8f8f8;
-    .infoBox {
-      background: #f2f2f2;
-      width: 1680px;
-      padding: 40px 60px;
-      display: flex;
-      flex-wrap: wrap;
-
-      .leftBox {
-        width: 400px;
-        margin-right: 30px;
-        .topBox {
-          > h4 {
-            text-transform: uppercase;
-            font-size: 24px;
-            color: #222;
-            width: 400px;
-            height: 30px;
-            font-weight: bold;
-          }
-          > span {
-            display: inline-block;
-            margin: 6px 0 20px 0;
-            font-size: 24px;
-            color: #808080;
-            width: 400px;
-            height: 30px;
-            font-weight: 300;
-          }
-          border-bottom: 1px solid #dadada;
-        }
-        .underBox {
-          > h4 {
-            margin-top: 20px;
-            text-transform: uppercase;
-            font-size: 24px;
-            color: #222;
-            width: 400px;
-            height: 30px;
-            font-weight: bold;
-          }
-          > span {
-            display: inline-block;
-            margin: 6px 0 0 0;
-            font-size: 24px;
-            color: #808080;
-            width: 400px;
-            height: 30px;
-            font-weight: 300;
-          }
-        }
-      }
-      .rightBox {
-        width: 1130px;
-        height: 173px;
-        background-color: #fff;
-        border: 1px solid #dadada;
-        border-radius: 6px;
-        > ul {
-          list-style: none;
-          display: flex;
-          > li {
-            width: 188px;
-            height: 173px;
-            border-right: 1px solid #dadada;
-            &:last-child {
-              border-right: none;
-            }
-            > div {
-              border-bottom: 1px solid #dadada;
-              text-align: center;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              &:first-child {
-                width: 188px;
-                height: 86px;
-                text-transform: uppercase;
-                font-size: 24px;
-                font-weight: bold;
-                color: #222;
-              }
-              &:last-child {
-                width: 188px;
-                height: 86px;
-                border-bottom: none;
-                font-size: 30px;
-                color: #808080;
-              }
-            }
-          }
-        }
-      }
-    }
-    .totalAccount {
-      width: 100%;
-      height: 80px;
-      padding: 18px 60px;
-      background: #dadada;
-      display: flex;
-      justify-content: space-between;
-      .accTitle {
-        text-transform: uppercase;
-        line-height: 44px;
-        color: #222;
-        font-size: 30px;
-        font-weight: bold;
-      }
-      .accountNum {
-        color: #c70850;
-        font-weight: bold;
-        font-size: 40px;
-        line-height: 44px;
-      }
-    }
-    .orderItemList {
-      background: #f8f8f8;
-      padding: 60px;
-      width: 100%;
-      > ul {
-        list-style: none;
-        > li {
-          width: 1560px;
-          // height: 423px;
-          background: #fff;
-          display: flex;
-          flex-wrap: wrap;
-          border: 1px solid #dadada;
-          border-radius: 12px;
-          margin-bottom: 40px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-          .topBox {
-            padding: 20px 60px;
-            flex: none;
-            width: 100%;
-            height: 100px;
-            border-bottom: 1px solid #dadada;
-            align-content: center;
-            display: flex;
-            justify-content: space-between;
-            .leftSmallBox {
-              color: #222;
-              font-size: 24px;
-              margin: 9px 0;
-              .orderGreen {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(8, 199, 73, 0.3);
-                border: 3px solid #08c749;
-                border-radius: 6px;
-                color: #08c749;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-              .orderBlue {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(8, 199, 199, 0.3);
-                border: 3px solid #0877c7;
-                border-radius: 6px;
-                color: #0877c7;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-              .orderRed {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(199, 8, 80, 0.3);
-                border: 3px solid #c70850;
-                border-radius: 6px;
-                color: #c70850;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-              .orderBlack {
-                margin-right: 14px;
-                height: 42px;
-                padding: 9px 15px;
-                background: rgba(20, 20, 20, 0.3);
-                border: 3px solid #141414;
-                border-radius: 6px;
-                color: #141414;
-                font-size: 20px;
-                line-height: 36px;
-                font-weight: normal;
-              }
-            }
-
-            .orderDetailBtn {
-              width: 300px;
-              height: 60px;
-              font-size: 24px;
-              font-weight: bold;
-              vertical-align: middle;
-              font-weight: bold;
-              text-transform: uppercase;
-            }
-          }
-          .underBox {
-            flex: none;
-            display: flex;
-            width: 100%;
-            // height: 322px;
-            .leftBox {
-              width: 1059px;
-              // height: 322px;
-              border-right: 1px solid #dadada;
-              padding: 30px 60px;
-              .productBox {
-                .logo {
-                  display: flex;
-                  font-size: 30px;
-                  font-weight: bold;
-                  color: #222;
-                  line-height: 42px;
-                  margin-bottom: 20px;
-                  .logoImg {
-                    width: 42px;
-                    height: 42px;
-                    margin-right: 13px;
-                    > img {
-                      .size(@w:42px, @h:42px);
-                    }
-                  }
-                  > p {
-                    width: calc(100% - 55px);
-                  }
-                }
-                .orderPdInfo {
-                  display: flex;
-                  flex-wrap: wrap;
-                  .productImg {
-                    flex: none;
-                    width: 200px;
-                    height: 200px;
-                    border: 1px solid #dadada;
-                  }
-                  .pdInfo {
-                    margin-left: 20px;
-                    > ul {
-                      list-style: none;
-                      > li {
-                        font-size: 24px;
-                        font-weight: normal;
-                        color: #808080;
-                        margin-bottom: 6px;
-                        &:last-child {
-                          margin-bottom: 0;
-                        }
-                      }
-                    }
-                    .orderAcc {
-                      margin-top: 54px;
-                      color: #c70850;
-                      font-size: 30px;
-                      font-weight: bold;
-                      height: 36px;
-                      line-height: 36px;
-                      > span {
-                        color: #808080;
-                        font-size: 24px;
-                        font-weight: normal;
-                        margin: 0 5.5px;
-                        line-height: 36px;
-                        &:first-child {
-                          margin: 0 5.5px 0 11px;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            .rightBox {
-              width: 500px;
-              // height: 322px;
-              display: flex;
-              align-items: center;
-              padding: 0 60px;
-              > ul {
-                list-style: none;
-                height: 100%;
-                > li {
-                  align-content: center;
-                  display: flex;
-                  flex-wrap: wrap;
-                  height: 100%;
-                  .divBtn {
-                    width: 380px;
-                    height: 60px;
-                    border: 1px solid #dadada;
-                    box-sizing: border-box;
-                    text-align: center;
-                    line-height: 58px;
-                    font-size: 24px;
-                    color: #808080;
-                    font-weight: 600;
-                    border-radius: 6px;
-                    background-image: linear-gradient(to top, #f5f5f5, #fff);
-                    margin-bottom: 6px;
-                    position: relative;
-                    &:focus {
-                      &::after {
-                        .focused(@boxShadow: 0, @borderRadius: 6px);
-                      }
-                    }
-                    &:last-child {
-                      margin-bottom: 0;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import noOrderImg from "../../../../../../assets/images/img-my-info-billing.png";
+import CustomImage from "../../../../../components/CustomImage/CustomImage";
+import { $L } from "../../../../../utils/helperMethods";
+import css from "./NoOrderList.module.less";
+
+export default function NoOrderList() {
+  return (
+    <div className={css.noOrderList}>
+      <CustomImage src={noOrderImg} alt="No Data" />
+      <p className={css.title}>{$L("THERE IS NO ORDER HISTORY")}</p>
+      <span className={css.desc}>
+        {$L("Use search above to find past orders.")}
+      </span>
+    </div>
+  );
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/NoOrderList.module.less

@@ -0,0 +1,19 @@
+@import "../../../../../style/CommonStyle.module.less";
+@import "../../../../../style/utils.module.less";
+
+.noOrderList {
+  margin: 180px auto 0;
+  text-align: center;
+
+  .title {
+    font-size: 36px;
+    font-weight: bold;
+    color: @COLOR_GRAY10;
+    margin-bottom: 12px;
+  }
+
+  .desc {
+    font-size: 24px;
+    color: #b5b5b5;
+  }
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.jsx

@@ -0,0 +1,87 @@
+import React, { memo, useCallback } from "react";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import TButton from "../../../../../components/TButton/TButton";
+import { $L } from "../../../../../utils/helperMethods";
+import css from "./OrderListCard.module.less";
+import OrderListCardStatus from "./OrderListCardStatus";
+import OrderListCardTopContents from "./OrderListCardTopContents";
+
+const OrderListCardContainer = SpotlightContainerDecorator(
+  { leaveFor: { left: "", right: "" } },
+  "div"
+);
+
+export default memo(function OrderListCard({ item, lastItem }) {
+  const {
+    ordNo,
+    currSign,
+    currSignLoc,
+    ordPmtReqAmt,
+    cardKnd,
+    cardNo,
+    regDt,
+    totProdQty,
+    totProdPrc,
+    totDcAmt,
+    totOptPrc,
+    totDlvrAmt,
+    ordTotTaxAmt,
+    orderProductInfo,
+  } = item || {};
+
+  const paymentInfo = {
+    cardKnd,
+    cardNo,
+    regDt,
+    totProdQty,
+    totProdPrc,
+    totDcAmt,
+    totOptPrc,
+    totDlvrAmt,
+    ordTotTaxAmt,
+    currSign,
+    currSignLoc,
+  };
+
+  const onSpotlightLeft = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <OrderListCardContainer
+      className={css.itemContainer}
+      data-wheel-point={!lastItem}
+    >
+      <div
+        className={css.cardHeader}
+        data-wheel-point={lastItem}
+        data-spotlight-id="lastItemOfOrderListCard"
+      >
+        <h2 className={css.orderNumber}>
+          {$L("ORDER NUMBER")} : <span className={css.ordNo}>{ordNo}</span>
+        </h2>
+        <TButton
+          size="small"
+          className={css.orderCancelButton}
+          onSpotlightLeft={onSpotlightLeft}
+        >
+          {$L("CANCEL ORDER")}
+        </TButton>
+      </div>
+      <OrderListCardTopContents paymentInfo={paymentInfo} />
+      <div className={css.orderTotal}>
+        <span className={css.orderTotalTitle}>{$L("ORDER TOTAL")}</span>
+        <span className={css.orderTotalPrice}>
+          {currSign} {ordPmtReqAmt}
+        </span>
+      </div>
+      <OrderListCardStatus
+        orderProductInfo={orderProductInfo?.[0]}
+        lastItem={lastItem}
+      />
+    </OrderListCardContainer>
+  );
+});

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCard.module.less

@@ -0,0 +1,52 @@
+@import "../../../../../style/CommonStyle.module.less";
+@import "../../../../../style/utils.module.less";
+
+.itemContainer {
+  .size(@w: 1680px, @h: auto);
+  background-color: @BG_COLOR_02;
+  border: 1px solid @COLOR_GRAY02;
+  margin-top: 40px;
+  border-radius: 12px;
+  overflow: hidden;
+  padding-bottom: 60px;
+
+  &:last-of-type {
+    margin-bottom: 80px;
+  }
+
+  .cardHeader {
+    height: 90px;
+    background-color: @COLOR_NAVY;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 60px;
+
+    .orderNumber {
+      .font(@fontFamily: @baseFont, @fontSize: 30px);
+      font-weight: bold;
+      color: @COLOR_WHITE;
+
+      .ordNo {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .orderTotal {
+    padding: 28px 60px;
+    display: flex;
+    justify-content: space-between;
+    background-color: @COLOR_GRAY02;
+
+    .orderTotalTitle {
+      font-weight: bold;
+      color: @COLOR_GRAY07;
+    }
+
+    .orderTotalPrice {
+      font-weight: bold;
+      color: @PRIMARY_COLOR_RED;
+    }
+  }
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.jsx

@@ -0,0 +1,173 @@
+import React, { useMemo } from "react";
+
+import defaultLogoImg from "../../../../../../assets/images/ic-tab-partners-default@3x.png";
+import defaultImageItem from "../../../../../../assets/images/img-thumb-empty-product@3x.png";
+import CustomImage from "../../../../../components/CustomImage/CustomImage";
+import TButton from "../../../../../components/TButton/TButton";
+import { $L } from "../../../../../utils/helperMethods";
+import css from "./OrderListCardStatus.module.less";
+
+const getStatusMessageAndClass = (shptmOrdStCd) => {
+  switch (shptmOrdStCd) {
+    case "ORD00601":
+      return { message: $L("Order completed"), className: css.orderGreen };
+    case "ORD00602":
+      return {
+        message: $L("Preparing for shipment"),
+        className: css.orderGreen,
+      };
+    case "ORD00603":
+      return { message: $L("In Transit"), className: css.orderGreen };
+    case "ORD00604":
+      return { message: $L("Delivered"), className: css.orderBlue };
+    case "ORD00605":
+      return { message: $L("Cancel order"), className: css.orderRed };
+    case "ORD00606":
+      return {
+        message: $L("Cancellation processing"),
+        className: css.orderRed,
+      };
+    case "ORD00607":
+      return { message: $L("Cancellation completed"), className: css.orderRed };
+    default:
+      return { message: "TODO: 케이스 추가", className: css.orderBlue };
+  }
+};
+
+const renderButtonsByStatus = (shptmOrdStCd) => {
+  switch (shptmOrdStCd) {
+    case "ORD00601":
+    case "ORD00602":
+      return (
+        <>
+          <TButton size="small" className={css.actionButton}>
+            {$L("BUY IT AGAIN")}
+          </TButton>
+          {shptmOrdStCd === "ORD00601" || shptmOrdStCd === "ORD00602" ? (
+            <TButton size="small" className={css.actionButton}>
+              {$L("CANCEL ITEM")}
+            </TButton>
+          ) : null}
+        </>
+      );
+    case "ORD00603":
+    case "ORD00604":
+      return (
+        <>
+          <TButton size="small" className={css.actionButton}>
+            {$L("BUY IT AGAIN")}
+          </TButton>
+          <TButton size="small" className={css.actionButton}>
+            {$L("RETURN ITEM")}
+          </TButton>
+          <TButton size="small" className={css.actionButton}>
+            {$L("EXCHANGE ITEM")}
+          </TButton>
+          <TButton size="small" className={css.actionButton}>
+            {$L("TRACK PACKAGE")}
+          </TButton>
+        </>
+      );
+    case "ORD00605":
+    case "ORD00606":
+    case "ORD00607":
+      return (
+        <>
+          <TButton size="small" className={css.actionButton}>
+            {$L("BUY IT AGAIN")}
+          </TButton>
+        </>
+      );
+    default:
+      return "TODO: 케이스 추가";
+  }
+};
+
+export default function OrderListCardStatus({ orderProductInfo, lastItem }) {
+  const {
+    prdtId,
+    shptmOrdStCd,
+    logoImgPath,
+    prdtNm,
+    prdtImgUrl,
+    prodQty,
+    prdtOpt,
+    prodPrc,
+    currSign,
+    currSignLoc,
+    prdtOptPrc,
+    dlvrAmt,
+    auctProdYn,
+  } = orderProductInfo || {};
+
+  const { message, className } = useMemo(() =>
+    getStatusMessageAndClass(shptmOrdStCd)
+  );
+
+  return (
+    <div
+      className={css.itemListStatusContainer}
+      data-wheel-point={lastItem}
+      data-spotlight-id="lastItemOfOrderListCard1"
+    >
+      <div className={css.statusCardHeader}>
+        <div className={css.wrap}>
+          <span className={className}>{message}</span>
+          <span className={css.arrivingDate}>
+            Arriving January 10 - January 15
+          </span>
+        </div>
+        <TButton size="small" className={css.viewOrderDetailsBtn}>
+          {$L("VIEW ORDER DETAILS")}
+        </TButton>
+      </div>
+      <div className={css.statusCardBody}>
+        <div className={css.productDetails}>
+          <div className={css.productDetailsTitle}>
+            <CustomImage
+              src={logoImgPath}
+              alt="Product logo"
+              fallbackSrc={defaultLogoImg}
+            />
+            <h2 className={css.productName}>{prdtNm}</h2>
+          </div>
+          <div className={css.productDescWrap}>
+            <div className={css.productImage}>
+              <CustomImage
+                src={prdtImgUrl}
+                alt="Product Image"
+                fallbackSrc={defaultImageItem}
+              />
+            </div>
+            <div className={css.productDesc}>
+              <p>
+                {$L("ID")} : {prdtId}
+              </p>
+              <p>
+                {$L("Qty")} : {prodQty}
+              </p>
+              <p>
+                {prdtOpt && prdtOpt[0] && prdtOpt[0].optNm
+                  ? `${prdtOpt[0].optNm} / `
+                  : " "}
+                {prdtOpt && prdtOpt[0] && prdtOpt[0].prodOptCval
+                  ? prdtOpt[0].prodOptCval
+                  : " "}
+              </p>
+              <p className={css.price}>
+                <strong>
+                  {currSign} {prodPrc}
+                </strong>{" "}
+                | {$L("OPTIONS TOTAL")}: {currSign} {prdtOptPrc} | {$L("S&H")}:{" "}
+                {currSign} {dlvrAmt}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className={css.actionButtons}>
+          {useMemo(() => renderButtonsByStatus(shptmOrdStCd))}
+        </div>
+      </div>
+    </div>
+  );
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardStatus.module.less

@@ -0,0 +1,175 @@
+@import "../../../../../style/CommonStyle.module.less";
+@import "../../../../../style/utils.module.less";
+
+.itemListStatusContainer {
+  width: 1560px;
+  margin: 60px auto 0;
+  background-color: @COLOR_WHITE;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+
+  .statusCardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 60px;
+    border-bottom: 1px solid @COLOR_GRAY02;
+
+    .wrap {
+      display: flex;
+      align-items: center;
+
+      .orderGreen {
+        margin-right: 14px;
+        height: 42px;
+        padding: 9px 15px;
+        background: rgba(8, 199, 73, 0.3);
+        border: 3px solid #08c749;
+        border-radius: 6px;
+        color: #08c749;
+        font-size: 20px;
+        line-height: 20px;
+        font-weight: normal;
+      }
+      .orderBlue {
+        margin-right: 14px;
+        height: 42px;
+        padding: 9px 15px;
+        background: rgba(8, 199, 199, 0.3);
+        border: 3px solid #0877c7;
+        border-radius: 6px;
+        color: #0877c7;
+        font-size: 20px;
+        line-height: 20px;
+        font-weight: normal;
+      }
+      .orderRed {
+        margin-right: 14px;
+        height: 42px;
+        padding: 9px 15px;
+        background: rgba(199, 8, 80, 0.3);
+        border: 3px solid #c70850;
+        border-radius: 6px;
+        color: #c70850;
+        font-size: 20px;
+        line-height: 20px;
+        font-weight: normal;
+      }
+      .orderBlack {
+        margin-right: 14px;
+        height: 42px;
+        padding: 9px 15px;
+        background: rgba(20, 20, 20, 0.3);
+        border: 3px solid #141414;
+        border-radius: 6px;
+        color: #141414;
+        font-size: 20px;
+        line-height: 20px;
+        font-weight: normal;
+      }
+
+      .arrivingDate {
+        color: @COLOR_GRAY07;
+        font-size: 24px;
+        font-weight: normal;
+      }
+    }
+
+    .viewOrderDetailsBtn {
+      width: 350px !important;
+      max-width: unset !important;
+    }
+  }
+
+  .statusCardBody {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .productDetails {
+      border-right: 1px solid @COLOR_GRAY02;
+      padding: 40px 60px;
+      width: 70%;
+
+      .productDetailsTitle {
+        display: flex;
+
+        > img {
+          width: 40px;
+          height: 40px;
+          margin-right: 10px;
+        }
+
+        .productName {
+          font-size: 30px;
+          font-weight: bold;
+          margin-bottom: 20px;
+          color: @COLOR_GRAY07;
+          .elip(@clamp:1);
+        }
+      }
+
+      .productDescWrap {
+        display: flex;
+
+        .productImage {
+          .size(@w: 200px, @h: 200px);
+          background-color: @COLOR_WHITE;
+          border: 1px solid @COLOR_GRAY02;
+          margin-right: 20px;
+
+          > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+
+        .productDesc {
+          p {
+            font-size: 24px;
+            color: @COLOR_GRAY03;
+          }
+
+          .price {
+            margin-top: 66px;
+
+            strong {
+              color: @PRIMARY_COLOR_RED;
+              font-size: 30px;
+            }
+          }
+        }
+      }
+    }
+
+    .actionButtons {
+      width: 30%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .actionButton {
+        background-color: @COLOR_WHITE;
+        height: 60px !important;
+        width: 400px !important;
+        border: 1px solid @COLOR_GRAY02;
+        color: @COLOR_GRAY03;
+        font-weight: normal;
+        font-size: 24px;
+        position: relative;
+
+        &:focus {
+          &::after {
+            .focused(@boxShadow: 0, @borderRadius: 6px);
+          }
+        }
+
+        &:first-of-type {
+          margin-bottom: 6px;
+        }
+      }
+    }
+  }
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.jsx

@@ -0,0 +1,71 @@
+import React, { memo } from "react";
+
+import { useSelector } from "react-redux";
+
+import {
+  $L,
+  convertToTimeFormat,
+  getFormattingCardNo,
+} from "../../../../../utils/helperMethods";
+import css from "./OrderListCardTopContents.module.less";
+
+export default memo(function OrderListCardTopContents({ paymentInfo }) {
+  const {
+    cardKnd,
+    cardNo,
+    regDt,
+    totProdQty,
+    totProdPrc,
+    totDcAmt,
+    totOptPrc,
+    totDlvrAmt,
+    ordTotTaxAmt,
+    currSign,
+    currSignLoc,
+  } = paymentInfo || {};
+
+  return (
+    <div className={css.orderCardTopContents}>
+      <div className={css.left}>
+        <p className={css.leftTitle}>{$L("PAYMENT METHOD")}</p>
+        <span className={css.leftDesc}>
+          {cardKnd} / {getFormattingCardNo(cardNo)}
+        </span>
+        <p className={css.leftTitle}>{$L("ORDER DATE")}</p>
+        <span className={css.leftDesc}>{convertToTimeFormat(regDt, true)}</span>
+      </div>
+      <table className={css.table}>
+        <thead>
+          <tr>
+            <th>{$L("ITEM")}</th>
+            <th>{$L("ITEM TOTAL")}</th>
+            <th>{$L("OPTION")}</th>
+            <th>{$L("S&H")}</th>
+            <th>{$L("TAX")}</th>
+            <th>{$L("COUPON")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{totProdQty}</td>
+            <td>
+              {currSign} {totProdPrc}
+            </td>
+            <td>
+              {currSign} {totDcAmt}
+            </td>
+            <td>
+              {currSign} {totOptPrc}
+            </td>
+            <td>
+              {currSign} {totDlvrAmt}
+            </td>
+            <td>
+              {currSign} {ordTotTaxAmt}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+});

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/components/OrderListCardTopContents.module.less

@@ -0,0 +1,89 @@
+@import "../../../../../style/CommonStyle.module.less";
+@import "../../../../../style/utils.module.less";
+
+.orderCardTopContents {
+  width: 100%;
+  padding: 40px 60px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  .font(@fontFamily: @baseFont, @fontSize: 24px);
+
+  .left {
+    .leftTitle {
+      color: @COLOR_GRAY07;
+      font-weight: bold;
+
+      &:last-of-type {
+        margin-top: 15px;
+      }
+    }
+
+    .leftDesc {
+      color: @COLOR_GRAY03;
+      display: inline-block;
+
+      &:first-of-type {
+        padding-bottom: 15px;
+        border-bottom: 1px solid @COLOR_GRAY02;
+      }
+    }
+  }
+
+  .table {
+    width: 1130px;
+    height: 175px;
+    border-collapse: collapse;
+    background-color: @COLOR_WHITE;
+    border-radius: 6px;
+
+    th,
+    td {
+      text-align: center;
+      padding: 10px 20px;
+    }
+
+    th {
+      font-weight: bold;
+      color: @COLOR_GRAY07;
+      border-bottom: 1px solid @COLOR_GRAY02;
+      border-right: 1px solid @COLOR_GRAY02;
+    }
+
+    td {
+      color: @COLOR_GRAY03;
+      border-right: 1px solid @COLOR_GRAY02;
+    }
+
+    thead {
+      height: 50%;
+
+      tr {
+        th {
+          border-top: none;
+          border-left: none;
+
+          &:last-of-type {
+            border-right: none;
+          }
+        }
+      }
+    }
+
+    tbody {
+      height: 50%;
+
+      tr {
+        td {
+          border-top: none;
+          border-left: none;
+
+          &:last-of-type {
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+}