diff --git a/com.twin.app.shoptime/assets/images/icons/ic-track-completed@3x.png b/com.twin.app.shoptime/assets/images/icons/ic-track-completed@3x.png
new file mode 100644
index 00000000..f4677cc7
Binary files /dev/null and b/com.twin.app.shoptime/assets/images/icons/ic-track-completed@3x.png differ
diff --git a/com.twin.app.shoptime/assets/images/icons/ic-track-ongoing@3x.png b/com.twin.app.shoptime/assets/images/icons/ic-track-ongoing@3x.png
new file mode 100644
index 00000000..6a165ab7
Binary files /dev/null and b/com.twin.app.shoptime/assets/images/icons/ic-track-ongoing@3x.png differ
diff --git a/com.twin.app.shoptime/assets/images/icons/ic-track-scheduled@3x.png b/com.twin.app.shoptime/assets/images/icons/ic-track-scheduled@3x.png
new file mode 100644
index 00000000..f17bd333
Binary files /dev/null and b/com.twin.app.shoptime/assets/images/icons/ic-track-scheduled@3x.png differ
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
index ed43d021..4930b823 100644
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
@@ -1,26 +1,36 @@
 import React, { useCallback, useState } from "react";
 
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import classNames from "classnames";
 
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png";
 import TBody from "../../../../components/TBody/TBody";
-import TButton, { SIZES } from "../../../../components/TButton/TButton";
 import TButtonTab, {
   LIST_TYPE,
 } from "../../../../components/TButtonTab/TButtonTab";
 import TDropDown from "../../../../components/TDropDown/TDropDown";
 import THeader from "../../../../components/THeader/THeader";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
 import { $L } from "../../../../utils/helperMethods";
 import css from "./MyOrders.module.less";
+import CancelOrderList from "./OrderList/CancelOrderList";
+import OrderList from "./OrderList/OrderList";
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
+
 export default function MyOrders({ title, cbScrollTo }) {
   const [selectedTab, setSelectedTab] = useState(0);
 
   const [dropDownTab, setDropDownTab] = useState(0);
-  const [filterMethods, setFilterMethods] = useState(["3Month", "6Month"]);
+  const [filterMethods, setFilterMethods] = useState([
+    "Last 3Month",
+    "Last 6Month",
+  ]);
   const tabList = [$L("ORDERS"), $L("CANCELLED ORDERS")];
 
   const handleItemClick = useCallback(
@@ -30,6 +40,23 @@ export default function MyOrders({ title, cbScrollTo }) {
     },
     [selectedTab]
   );
+  const [popOpen, setPopOpen] = useState(false);
+  const [orderPopOpen, setOrderPopOpen] = useState(false);
+  const [orderTrackOpen, setOrderTrackOpen] = useState(false);
+  const [orderCancelOpen, setOrderCancelOpen] = useState(false);
+  const onClose = useCallback(() => {
+    setPopOpen(true);
+  }, []);
+  const onOrderPopClose = useCallback(() => {
+    setOrderPopOpen(true);
+  }, []);
+  const onOrderTrackClose = useCallback(() => {
+    setOrderTrackOpen(true);
+  }, []);
+  const onOrderCancelClose = useCallback(() => {
+    setOrderCancelOpen(true);
+  }, []);
+
   return (
     <>
       <THeader title={title} />
@@ -51,19 +78,281 @@ export default function MyOrders({ title, cbScrollTo }) {
               {filterMethods}
             </TDropDown>
           </TabContainer>
-          <div className={css.orderlist}>
-            <div className={css.orderNmInfo}>
-              <p className={css.orderTitle}>
-                ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
-              </p>
-              <TButton size="small" className={css.orderCancelBtn}>
-                {$L("Cancel order")}
-              </TButton>
+
+          {/* <div className={css.noOrderList}>
+            <div className={css.noOrderBox}>
+              <img src={noOrderImg} />
+              <span className={css.noOrderTitle}>
+                THERE IS NO ORDER HISTORY
+              </span>
+              <br />
+              <span className={css.noOrderSub}>
+                Use search above to find past orders.
+              </span>
             </div>
-            <div className={css.orderInfo}></div>
+          </div> */}
+
+          <div className={css.orderlist}>
+            {selectedTab === 0 && <OrderList />}
+            {selectedTab === 1 && <CancelOrderList />}
           </div>
         </div>
       </TBody>
+      <TPopUp
+        kind="optionPopup"
+        open={popOpen}
+        //options 옵션 넣어줘야함.
+        onClose={onClose}
+        hasText
+        hasButton
+        button1Text={$L("Cancel")}
+        title={$L("SELECT CANCELLATION REASON")}
+      />
+      {/* mypage order detail */}
+      <TPopUp
+        kind="scrollPopup"
+        open={orderPopOpen}
+        onClose={onOrderPopClose}
+        hasText
+        hasButton
+        button1Text={$L("Cancel")}
+        title={$L("ORDER DETAILS")}
+      >
+        <div className={css.scrollBox}>
+          <ul>
+            <li>
+              <div className={css.leftBox}>Preparing for shipment</div>
+              <div className={css.rightBox}>
+                Arriving January 10~ January 15
+              </div>
+            </li>
+            <li>
+              <div className={css.textList}>
+                <div className={css.productLogo}></div>
+                IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                abHWIXLEveryday Essentials Crossbody with 2 Straps abc
+              </div>
+            </li>
+            <li className={css.hideInfo}>
+              <h5>SHIPPING ADDRESS</h5>
+              <ul className={css.shippingInfo}>
+                <li>Hong Gil dong</li>
+                <li>8 Bennetts Mills RD</li>
+                <li>At Speedway</li>
+                <li>Jackson, NJ 08527-4510</li>
+                <li>United States</li>
+                <li>Phone number : 0821099461234</li>
+                <li>Email : honggildong00@gmail.com</li>
+              </ul>
+              <h5>BILLING ADDRESS</h5>
+              <ul className={css.shippingInfo}>
+                <li>Hong Gil dong</li>
+                <li>8 Bennetts Mills RD</li>
+                <li>At Speedway</li>
+                <li>Jackson, NJ 08527-4510</li>
+                <li>United States</li>
+                <li>Phone number : 0821099461234</li>
+                <li>Email : honggildong00@gmail.com</li>
+              </ul>
+            </li>
+            <li>
+              <div className={css.textList}>ORDER SUMMARY</div>
+            </li>
+            <li className={css.hideInfo}>
+              <ul className={css.orderInfo}>
+                <li>
+                  <span className={css.title}>Items</span>
+                  <span className={css.info}>$ 40.20</span>
+                </li>
+                <li>
+                  <span className={css.title}>Quantity</span>
+                  <span className={css.info}>2</span>
+                </li>
+                <li>
+                  <span className={css.title}>Items Total</span>
+                  <span className={css.info}>$ 80.40</span>
+                </li>
+                <li>
+                  <span className={css.title}>Option</span>
+                  <span className={css.info}>$ 12.40</span>
+                </li>
+                <li>
+                  <span className={css.title}>Shipping & handling</span>
+                  <span className={css.info}>$ 10.50</span>
+                </li>
+                <li>
+                  <span className={css.title}>Total before tax</span>
+                  <span className={css.info}>$ 103.20</span>
+                </li>
+                <li>
+                  <span className={css.title}>
+                    Estimated tax to be collected
+                  </span>
+                  <span className={css.info}>$ 10.30</span>
+                </li>
+                <li>
+                  <span className={css.title}>Your Coupon Savings</span>
+                  <span className={css.info}>-$ 20</span>
+                </li>
+              </ul>
+            </li>
+            <li className={css.blackLi}>
+              <div className={css.totalList}>ITEM ORDER TOTAL</div>
+              <div className={css.totalAccountList}>$ 93.60</div>
+            </li>
+          </ul>
+        </div>
+      </TPopUp>
+      {/* 08_02_3_my orders_track package */}
+      <TPopUp
+        kind="scrollPopup"
+        open={orderTrackOpen}
+        onClose={onOrderTrackClose}
+        hasText
+        hasButton
+        button1Text={$L("Cancel")}
+        title={$L("TRACK PACKAGE")}
+      >
+        <div className={css.scrollBox}>
+          <ul>
+            <li>
+              <div className={css.textList}>Ordered on January 5, 2023</div>
+            </li>
+            <li>
+              <div className={css.textList}>Order 111-1721950-401433</div>
+            </li>
+            <li className={css.hideInfo}>
+              <ul className={css.deliveryInfo}>
+                <li>
+                  {/* <span className={css.notYet} /> 회색
+                  <span className={css.delivering} /> 쩜쩜 찍힌거 */}
+                  <span className={css.complete} />
+                  <div className={css.orderDate}>
+                    <h6>ORDERED</h6>
+                    <span>January 5, 2023</span>
+                  </div>
+                </li>
+                <li className={classNames(css.imgLiner, css.active)} />
+                <li>
+                  {/* <span className={css.notYet} /> */}
+                  <span className={css.delivering} />
+                  {/* <span className={css.complete} /> */}
+                  <div className={css.shipperDate}>
+                    <h6>Shipped</h6>
+                    <span>January 6, 2023</span>
+                  </div>
+                </li>
+                <li className={classNames(css.imgLiner, css.active)} />
+                <li>
+                  {/* <span className={css.notYet} /> */}
+                  <span className={css.delivering} />
+                  {/* <span className={css.complete} /> */}
+                  <div className={css.deliveryDate}>
+                    <h6>Out for delivery</h6>
+                    <span>January 6, 2023</span>
+                  </div>
+                </li>
+                <li className={css.imgLiner} />
+                <li>
+                  <span className={css.notYet} />
+                  {/* <span className={css.delivering} /> */}
+                  {/* <span className={css.complete} /> */}
+                  <div className={css.arrivingDate}>
+                    <h6>Arriving</h6>
+                    <span></span>
+                  </div>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <div className={css.textList}>SHIPMENT DETAILS</div>
+            </li>
+            <li className={css.hideInfo}>
+              <h5>January 6, 2023</h5>
+              <ul className={css.shipmentDetail}>
+                <li>9:49 AM</li>
+                <li>Out for delivery San Leandro, US</li>
+              </ul>
+              <h5>January 5, 2023</h5>
+              <ul className={css.shipmentDetail}>
+                <li>8:38 PM</li>
+                <li>Shipped San Leandro, US</li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </TPopUp>
+      {/* 08_02_6_my orders_cancellation details */}
+      <TPopUp
+        kind="scrollPopup"
+        open={orderCancelOpen}
+        onClose={onOrderCancelClose}
+        hasText
+        hasButton
+        button1Text={$L("Cancel")}
+        title={$L("CANCELLATION DETAILS")}
+      >
+        <div className={css.scrollBox}>
+          <ul>
+            <li>
+              <div className={css.leftBox}>CANCELLED DATE</div>
+              <div className={css.rightBox}>January 5, 2023</div>
+            </li>
+            <li>
+              <div className={css.textList}>
+                <div className={css.productLogo}></div>
+                IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                abHWIXLEveryday Essentials Crossbody with 2 Straps abc
+              </div>
+            </li>
+            <li>
+              <div className={css.textList}>ORDER SUMMARY</div>
+            </li>
+            <li className={css.hideInfo}>
+              <ul className={css.orderInfo}>
+                <li>
+                  <span className={css.title}>Items</span>
+                  <span className={css.info}>$ 40.20</span>
+                </li>
+                <li>
+                  <span className={css.title}>Quantity</span>
+                  <span className={css.info}>2</span>
+                </li>
+                <li>
+                  <span className={css.title}>Items Total</span>
+                  <span className={css.info}>$ 80.40</span>
+                </li>
+                <li>
+                  <span className={css.title}>Option</span>
+                  <span className={css.info}>$ 12.40</span>
+                </li>
+                <li>
+                  <span className={css.title}>Shipping & handling</span>
+                  <span className={css.info}>$ 10.50</span>
+                </li>
+                <li>
+                  <span className={css.title}>Total before tax</span>
+                  <span className={css.info}>$ 103.20</span>
+                </li>
+                <li>
+                  <span className={css.title}>
+                    Estimated tax to be collected
+                  </span>
+                  <span className={css.info}>$ 10.30</span>
+                </li>
+                <li>
+                  <span className={css.title}>Your Coupon Savings</span>
+                  <span className={css.info}>-$ 20</span>
+                </li>
+              </ul>
+            </li>
+            <li className={css.blackLi}>
+              <div className={css.totalList}>ITEM ORDER TOTAL</div>
+              <div className={css.totalAccountList}>$ 93.60</div>
+            </li>
+          </ul>
+        </div>
+      </TPopUp>
     </>
   );
 }
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
index 3354b163..0070eeae 100644
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
@@ -6,6 +6,11 @@
   padding: 60px 60px 0;
   .tabContainer {
     .ordersTab {
+      width: 100%;
+      > div {
+        width: 360px;
+        height: 66px;
+      }
     }
     .dropdown {
       position: absolute;
@@ -13,42 +18,237 @@
       top: 60px;
     }
   }
-  .orderlist {
-    margin-top: 40px;
-    border-radius: 12px;
-    border: 1px solid #dadada;
-    background: #f8f8f8;
-
-    width: 100%;
-    overflow: hidden;
-    .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;
-        }
+  .noOrderList {
+    margin-top: 180px;
+    .noOrderBox {
+      width: 540px;
+      height: 252px;
+      text-align: center;
+      margin: 0 auto;
+      > img {
+        width: 100%;
       }
-      .orderCancelBtn {
-        background: #808080;
-        .size(@w:224px,@h:60px);
-        align-self: center;
+      .noOrderTitle {
+        font-size: 36px;
+        color: #a3a3a3;
+        font-weight: bold;
+      }
+      .noOrderSub {
+        font-size: 24px;
+        color: #b5b5b5;
+        font-weight: normal;
       }
     }
-    .orderInfo {
-      background: #f2f2f2;
+  }
+  .orderlist {
+    margin-top: 40px;
+  }
+}
+
+.scrollBox {
+  margin: 30px 60px;
+  width: 780px;
+  height: 460px;
+  overflow: hidden auto;
+
+  > ul {
+    border: 1px solid #dadada;
+    > li {
+      width: 100%;
+      height: 90px;
+      border-bottom: 1px solid #dadada;
+      background: #fff;
+      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;
+              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;
+        }
+      }
     }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx
new file mode 100644
index 00000000..42751663
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx
@@ -0,0 +1,166 @@
+import React from "react";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+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() {
+  return (
+    <div className={css.orderBorder}>
+      <div className={css.orderNmInfo}>
+        <p className={css.orderTitle}>
+          ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
+        </p>
+      </div>
+
+      <div className={css.orderInfo}>
+        <div className={css.infoBox}>
+          <div className={css.leftBox}>
+            <div className={css.topBox}>
+              <h4>payment method</h4>
+              <span>Mastercard / ****-1199</span>
+            </div>
+            <div className={css.underBox}>
+              <h4>order date</h4>
+              <span>January 5, 2023</span>
+            </div>
+          </div>
+        </div>
+        <div className={css.orderItemList}>
+          <ul>
+            {/* 여기부터 아이템 리스트들 */}
+            <li>
+              <div className={css.topBox}>
+                <div className={css.leftSmallBox}>
+                  <span className={css.orderGreen}>Preparing for shipment</span>
+                  {/* 색상별 뿌려주는 틀림.
+              <span className={css.orderBlue}>Shipping</span>
+              <span className={css.orderRed}>Canceled</span>
+              <span className={css.orderBlack}>Completed</span> 
+              */}
+                  Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
+                </div>
+
+                <TButton size="small" className={css.orderDetailBtn}>
+                  {$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}></span>
+                      IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                    </div>
+                    <div className={css.orderPdInfo}>
+                      <div className={css.productImg}></div>
+                      <div className={css.pdInfo}>
+                        <ul>
+                          <li>ID: A565145</li>
+                          <li>Qty: 1</li>
+                          <li>Silver Metallic / XL</li>
+                        </ul>
+                        <div className={css.orderAcc}>
+                          $38.09
+                          <span>|</span>
+                          <span>OPTION: $5.50</span>
+                          <span>|</span>
+                          <span>S&H: $5.50</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className={css.rightBox}>
+                  <ul>
+                    <li>
+                      <SpottableComponent className={css.divBtn}>
+                        VIEW CANCELLATION DETAILS
+                      </SpottableComponent>
+                      <SpottableComponent className={css.divBtn}>
+                        BUY IT AGAIN
+                      </SpottableComponent>
+                      <SpottableComponent className={css.divBtn}>
+                        VIEW CANCELLATION DETAILS
+                      </SpottableComponent>
+                      <SpottableComponent className={css.divBtn}>
+                        BUY IT AGAIN
+                      </SpottableComponent>
+                      {/* 버튼은 4개까지만 복사해서 쓰면댐 */}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div className={css.topBox}>
+                <div className={css.leftSmallBox}>
+                  <span className={css.orderGreen}>Preparing for shipment</span>
+                  {/* 색상별 뿌려주는 틀림.
+              <span className={css.orderBlue}>Shipping</span>
+              <span className={css.orderRed}>Canceled</span>
+              <span className={css.orderBlack}>Completed</span> 
+              */}
+                  Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
+                </div>
+
+                <TButton size="small" className={css.orderDetailBtn}>
+                  {$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}></span>
+                      IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                    </div>
+                    <div className={css.orderPdInfo}>
+                      <div className={css.productImg}></div>
+                      <div className={css.pdInfo}>
+                        <ul>
+                          <li>ID: A565145</li>
+                          <li>Qty: 1</li>
+                          <li>Silver Metallic / XL</li>
+                        </ul>
+                        <div className={css.orderAcc}>
+                          $38.09
+                          <span>|</span>
+                          <span>OPTION: $5.50</span>
+                          <span>|</span>
+                          <span>S&H: $5.50</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className={css.rightBox}>
+                  <ul>
+                    <li>
+                      <SpottableComponent className={css.divBtn}>
+                        VIEW CANCELLATION DETAILS
+                      </SpottableComponent>
+                      <SpottableComponent className={css.divBtn}>
+                        BUY IT AGAIN
+                      </SpottableComponent>
+                      <SpottableComponent className={css.divBtn}>
+                        VIEW CANCELLATION DETAILS
+                      </SpottableComponent>
+                      <SpottableComponent className={css.divBtn}>
+                        BUY IT AGAIN
+                      </SpottableComponent>
+                      {/* 버튼은 4개까지만 복사해서 쓰면댐 */}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less
new file mode 100644
index 00000000..2e8ffeb7
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less
@@ -0,0 +1,357 @@
+@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 {
+      background: #808080;
+      .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: 1680px;
+
+        .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: 30px 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;
+                    background: #000;
+                    margin-right: 13px;
+                  }
+                }
+                .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;
+              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;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx
new file mode 100644
index 00000000..e8c45928
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx
@@ -0,0 +1,399 @@
+import React from "react";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+import TButton from "../../../../../components/TButton/TButton";
+import { $L } from "../../../../../utils/helperMethods";
+import css from "./OrderList.module.less";
+
+const SpottableComponent = Spottable("div");
+export default function OrderList() {
+  return (
+    <>
+      <div className={css.orderBorder}>
+        <div className={css.orderNmInfo}>
+          <p className={css.orderTitle}>
+            ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
+          </p>
+          <TButton size="small" className={css.orderCancelBtn}>
+            {$L("Cancel order")}
+          </TButton>
+        </div>
+
+        <div className={css.orderInfo}>
+          <div className={css.infoBox}>
+            <div className={css.leftBox}>
+              <div className={css.topBox}>
+                <h4>payment method</h4>
+                <span>Mastercard / ****-1199</span>
+              </div>
+              <div className={css.underBox}>
+                <h4>order date</h4>
+                <span>January 5, 2023</span>
+              </div>
+            </div>
+            <div className={css.rightBox}>
+              <ul>
+                <li>
+                  <div>item</div>
+                  <div>4</div>
+                </li>
+                <li>
+                  <div>item total</div>
+                  <div>$90.40</div>
+                </li>
+                <li>
+                  <div>option</div>
+                  <div>$4.40</div>
+                </li>
+                <li>
+                  <div>s&h</div>
+                  <div>$11.00</div>
+                </li>
+                <li>
+                  <div>tax</div>
+                  <div>$5.00</div>
+                </li>
+                <li>
+                  <div>coupon</div>
+                  <div>-$10.00</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className={css.totalAccount}>
+            <div className={css.accTitle}>order total</div>
+            <div className={css.accountNum}>$ 95.80</div>
+          </div>
+          <div className={css.orderItemList}>
+            <ul>
+              {/* 여기부터 아이템 리스트들 */}
+              <li>
+                <div className={css.topBox}>
+                  <div className={css.leftSmallBox}>
+                    <span className={css.orderGreen}>
+                      Preparing for shipment
+                    </span>
+                    {/* 색상별 뿌려주는 틀림.
+              <span className={css.orderBlue}>Shipping</span>
+              <span className={css.orderRed}>Canceled</span>
+              <span className={css.orderBlack}>Completed</span> 
+              */}
+                    Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
+                  </div>
+
+                  <TButton size="small" className={css.orderDetailBtn}>
+                    {$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}></span>
+                        IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                      </div>
+                      <div className={css.orderPdInfo}>
+                        <div className={css.productImg}></div>
+                        <div className={css.pdInfo}>
+                          <ul>
+                            <li>ID: A565145</li>
+                            <li>Qty: 1</li>
+                            <li>Silver Metallic / XL</li>
+                          </ul>
+                          <div className={css.orderAcc}>
+                            $38.09
+                            <span>|</span>
+                            <span>OPTION: $5.50</span>
+                            <span>|</span>
+                            <span>S&H: $5.50</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={css.rightBox}>
+                    <ul>
+                      <li>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        {/* 버튼은 4개까지만 복사해서 쓰면댐 */}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div className={css.topBox}>
+                  <div className={css.leftSmallBox}>
+                    <span className={css.orderGreen}>
+                      Preparing for shipment
+                    </span>
+                    {/* 색상별 뿌려주는 틀림.
+              <span className={css.orderBlue}>Shipping</span>
+              <span className={css.orderRed}>Canceled</span>
+              <span className={css.orderBlack}>Completed</span> 
+              */}
+                    Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
+                  </div>
+
+                  <TButton size="small" className={css.orderDetailBtn}>
+                    {$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}></span>
+                        IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                      </div>
+                      <div className={css.orderPdInfo}>
+                        <div className={css.productImg}></div>
+                        <div className={css.pdInfo}>
+                          <ul>
+                            <li>ID: A565145</li>
+                            <li>Qty: 1</li>
+                            <li>Silver Metallic / XL</li>
+                          </ul>
+                          <div className={css.orderAcc}>
+                            $38.09
+                            <span>|</span>
+                            <span>OPTION: $5.50</span>
+                            <span>|</span>
+                            <span>S&H: $5.50</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={css.rightBox}>
+                    <ul>
+                      <li>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        {/* 버튼은 4개까지만 복사해서 쓰면댐 */}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className={css.orderBorder}>
+        <div className={css.orderNmInfo}>
+          <p className={css.orderTitle}>
+            ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
+          </p>
+          <TButton size="small" className={css.orderCancelBtn}>
+            {$L("Cancel order")}
+          </TButton>
+        </div>
+
+        <div className={css.orderInfo}>
+          <div className={css.infoBox}>
+            <div className={css.leftBox}>
+              <div className={css.topBox}>
+                <h4>payment method</h4>
+                <span>Mastercard / ****-1199</span>
+              </div>
+              <div className={css.underBox}>
+                <h4>order date</h4>
+                <span>January 5, 2023</span>
+              </div>
+            </div>
+            <div className={css.rightBox}>
+              <ul>
+                <li>
+                  <div>item</div>
+                  <div>4</div>
+                </li>
+                <li>
+                  <div>item total</div>
+                  <div>$90.40</div>
+                </li>
+                <li>
+                  <div>option</div>
+                  <div>$4.40</div>
+                </li>
+                <li>
+                  <div>s&h</div>
+                  <div>$11.00</div>
+                </li>
+                <li>
+                  <div>tax</div>
+                  <div>$5.00</div>
+                </li>
+                <li>
+                  <div>coupon</div>
+                  <div>-$10.00</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className={css.totalAccount}>
+            <div className={css.accTitle}>order total</div>
+            <div className={css.accountNum}>$ 95.80</div>
+          </div>
+          <div className={css.orderItemList}>
+            <ul>
+              {/* 여기부터 아이템 리스트들 */}
+              <li>
+                <div className={css.topBox}>
+                  <div className={css.leftSmallBox}>
+                    <span className={css.orderGreen}>
+                      Preparing for shipment
+                    </span>
+                    {/* 색상별 뿌려주는 틀림.
+              <span className={css.orderBlue}>Shipping</span>
+              <span className={css.orderRed}>Canceled</span>
+              <span className={css.orderBlack}>Completed</span> 
+              */}
+                    Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
+                  </div>
+
+                  <TButton size="small" className={css.orderDetailBtn}>
+                    {$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}></span>
+                        IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                      </div>
+                      <div className={css.orderPdInfo}>
+                        <div className={css.productImg}></div>
+                        <div className={css.pdInfo}>
+                          <ul>
+                            <li>ID: A565145</li>
+                            <li>Qty: 1</li>
+                            <li>Silver Metallic / XL</li>
+                          </ul>
+                          <div className={css.orderAcc}>
+                            $38.09
+                            <span>|</span>
+                            <span>OPTION: $5.50</span>
+                            <span>|</span>
+                            <span>S&H: $5.50</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={css.rightBox}>
+                    <ul>
+                      <li>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        {/* 버튼은 4개까지만 복사해서 쓰면댐 */}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div className={css.topBox}>
+                  <div className={css.leftSmallBox}>
+                    <span className={css.orderGreen}>
+                      Preparing for shipment
+                    </span>
+                    {/* 색상별 뿌려주는 틀림.
+              <span className={css.orderBlue}>Shipping</span>
+              <span className={css.orderRed}>Canceled</span>
+              <span className={css.orderBlack}>Completed</span> 
+              */}
+                    Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
+                  </div>
+
+                  <TButton size="small" className={css.orderDetailBtn}>
+                    {$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}></span>
+                        IHWIP XL Everyday Essentials Crossbody with 2 Straps
+                      </div>
+                      <div className={css.orderPdInfo}>
+                        <div className={css.productImg}></div>
+                        <div className={css.pdInfo}>
+                          <ul>
+                            <li>ID: A565145</li>
+                            <li>Qty: 1</li>
+                            <li>Silver Metallic / XL</li>
+                          </ul>
+                          <div className={css.orderAcc}>
+                            $38.09
+                            <span>|</span>
+                            <span>OPTION: $5.50</span>
+                            <span>|</span>
+                            <span>S&H: $5.50</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={css.rightBox}>
+                    <ul>
+                      <li>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          VIEW CANCELLATION DETAILS
+                        </SpottableComponent>
+                        <SpottableComponent className={css.divBtn}>
+                          BUY IT AGAIN
+                        </SpottableComponent>
+                        {/* 버튼은 4개까지만 복사해서 쓰면댐 */}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less
new file mode 100644
index 00000000..aed26859
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.module.less
@@ -0,0 +1,357 @@
+@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 {
+      background: #808080;
+      .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: 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;
+                    background: #000;
+                    margin-right: 13px;
+                  }
+                }
+                .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;
+              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;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}