optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[마이오더스] 목데이터 추가 / 기능 구현중

Browse Source
This commit is contained in:
sungmin.in
2024-05-07 18:55:13 +09:00
parent 76322d4c94
commit f194b55a30
4 changed files with 347 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
com.twin.app.shoptime/assets/mock/temp.json Normal file
View File

@@ -0,0 +1,92 @@
{
"retCode": 0,
"retMsg": "Success",
"data": {
"orderInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"storReqNo": null,
"cntryCd": "US",
"dlvrEmalAddr": "US2306190103418@email.co.kr",
"dlvrCtpt": "00001111114",
"dlvrOdrLnm": "ddd",
"dlvrOdrFnm": "ffff",
"dlvrZpcd": "12345",
"dlvrStatNm": "fdfd",
"dlvrCityNm": "San Francisco",
"dlvrDtlAddr": "Lyon St, San Francisco",
"bilEmalAddr": "billemail@email.co.kr",
"bilCtpt": "12345",
"bilOdrLnm": "LNM",
"bilOdrFnm": "FNM",
"bilZpcd": "12345",
"bilStatNm": "STATS",
"bilCityNm": "San Francisco",
"bilDtlAddr": "Lyon St, San Francisco",
"cardNo": "1234123412341234",
"cardKnd": "[연동x]MasterCard",
"cardVldTerm": "0912",
"cardSecCd": "123",
"ordPmtReqAmt": "64.15",
"totProdPrc": "65.0",
"totProdQty": "1",
"totDlvrAmt": "3.5",
"ordTotTaxAmt": "0.15",
"totDcAmt": "1.0",
"orderProductInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": 34,
"prodPrc": "65.0",
"prodQty": "1",
"taxAmt": "0.2",
"dlvrAmt": "3.5",
"shptmDlvrStCd": "ORD00201",
"shptmOrdStCd": "ORD00601",
"ordReqDtt": "2023-07-25 06:49:16",
"cnclReqDtt": null,
"rtunReqDtt": null,
"intchReqDtt": null,
"shptmChngRsnCd": null,
"chngRsnCtnt": null,
"prdtOpt": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": 34,
"prodOptSno": "3",
"prodOptCdCval": "111",
"prodOptTpCdCval": "",
"optNm": "Color",
"prodOptCval": "red"
}
],
"orderProductCouponInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": 34,
"cpnSno": "49",
"cpnCdCval": "c02",
"cpnCdSeq": "1",
"dcAmt": "1.0"
}
]
}
],
"orderProductCoupontUse": null
}
]
}
}

7
com.twin.app.shoptime/src/actions/orderActions.js
View File

@@ -1,9 +1,12 @@
import axios from "axios";
import tempData from "../../assets/mock/temp.json";
import { URLS } from "../api/apiConfig"; import { URLS } from "../api/apiConfig";
import { TAxios } from "../api/TAxios"; import { TAxios } from "../api/TAxios";
import { types } from "./actionTypes"; import { types } from "./actionTypes";
import { getTermsAgreeYn } from "./commonActions"; import { getTermsAgreeYn } from "./commonActions";
// 회원 주문 정보 조회 (IF-LGSP-340) // 회원 주문 정보 조회 (IF-LGSP-340) --> MOCK 데이터 사용 API 완성후 변경 2024.05.07
export const getMyinfoOrderSearch = (params) => (dispatch, getState) => { export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
const { const {
mbrNo, mbrNo,
@@ -21,7 +24,7 @@ export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
dispatch({ dispatch({
type: types.GET_MY_INFO_ORDER_SEARCH, type: types.GET_MY_INFO_ORDER_SEARCH,
payload: response.data.data, payload: tempData,
}); });
}; };

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

@@ -8,6 +8,15 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
import Spottable from "@enact/spotlight/Spottable"; import Spottable from "@enact/spotlight/Spottable";
import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png"; import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png";
// getMyinfoOrderSearch : 회원 주문 정보 조회
// getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회
// getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회
import {
getMyinfoOrderDetailSearch,
getMyinfoOrderSearch,
getMyinfoOrderShippingSearch,
tempGetInfo,
} from "../../../../actions/orderActions";
import TBody from "../../../../components/TBody/TBody"; import TBody from "../../../../components/TBody/TBody";
import TButtonTab, { import TButtonTab, {
LIST_TYPE, LIST_TYPE,
@@ -26,6 +35,8 @@ const TabContainer = SpotlightContainerDecorator(
); );
export default function MyOrders({ title, cbScrollTo }) { export default function MyOrders({ title, cbScrollTo }) {
const { appStatus } = useSelector((state) => state.common);
const [selectedTab, setSelectedTab] = useState(0); const [selectedTab, setSelectedTab] = useState(0);
const [dropDownTab, setDropDownTab] = useState(0); const [dropDownTab, setDropDownTab] = useState(0);
@@ -39,6 +50,17 @@ export default function MyOrders({ title, cbScrollTo }) {
const { userInfo } = useSelector( const { userInfo } = useSelector(
(state) => state.common.appStatus.loginUserData (state) => state.common.appStatus.loginUserData
); );
const orderInfoData = useSelector((state) => state.order.orderInfoData.data);
const orderInfo = orderInfoData?.orderInfo;
const orderProductInfo = orderInfo?.orderProductInfo;
const orderProductCouponInfo = orderProductInfo?.orderProductCouponInfo;
// console.log(orderInfoData, "orderInfoData");
// console.log(orderInfo, "orderInfo");
// console.log(orderProductInfo, "orderProductInfo");
// console.log(orderProductCouponInfo, "orderProductCouponInfo");
const handleItemClick = useCallback( const handleItemClick = useCallback(
({ index, ...rest }) => { ({ index, ...rest }) => {
console.log("#TButtonTab onItemClick", index, rest); console.log("#TButtonTab onItemClick", index, rest);
@@ -50,7 +72,9 @@ export default function MyOrders({ title, cbScrollTo }) {
const [orderPopOpen, setOrderPopOpen] = useState(false); const [orderPopOpen, setOrderPopOpen] = useState(false);
const [orderTrackOpen, setOrderTrackOpen] = useState(false); const [orderTrackOpen, setOrderTrackOpen] = useState(false);
const [orderCancelOpen, setOrderCancelOpen] = useState(false); const [orderCancelOpen, setOrderCancelOpen] = useState(false);
let timerRef = useRef(); let timerRef = useRef();
const onClose = useCallback(() => { const onClose = useCallback(() => {
setPopOpen(true); setPopOpen(true);
}, []); }, []);
@@ -78,6 +102,28 @@ export default function MyOrders({ title, cbScrollTo }) {
clearTimeout(timerRef.current); clearTimeout(timerRef.current);
}; };
}, []); }, []);
// 현재 MOCK 데이터 사용
useEffect(() => {
if (
appStatus &&
appStatus.loginUserData &&
appStatus.loginUserData.userInfo
) {
dispatch(
getMyinfoOrderSearch({
mbrNo: appStatus.loginUserData.userInfo,
srchMonth: dropDownTab === 0 ? 3 : 6,
})
);
}
// dispatch(getMyinfoOrderShippingSearch());
}, [dispatch, dropDownTab]);
const handleSelectFilter = useCallback(({ selected }) => {
setDropDownTab(selected);
}, []);
return ( return (
<> <>
<THeader title={title} /> <THeader title={title} />
@@ -95,6 +141,7 @@ export default function MyOrders({ title, cbScrollTo }) {
className={css.dropdown} className={css.dropdown}
selectedIndex={dropDownTab && dropDownTab} selectedIndex={dropDownTab && dropDownTab}
width="small" width="small"
onSelect={handleSelectFilter}
> >
{filterMethods} {filterMethods}
</TDropDown> </TDropDown>
@@ -114,8 +161,8 @@ export default function MyOrders({ title, cbScrollTo }) {
</div> */} </div> */}
<div className={css.orderlist}> <div className={css.orderlist}>
{selectedTab === 0 && <OrderList />} {selectedTab === 0 && <OrderList orderInfo={orderInfo} />}
{selectedTab === 1 && <CancelOrderList />} {selectedTab === 1 && <CancelOrderList orderInfo={orderInfo} />}
</div> </div>
</div> </div>
</TBody> </TBody>

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

@@ -1,4 +1,4 @@
import React from "react"; import React, { useCallback, useEffect, useState } from "react";
import Spottable from "@enact/spotlight/Spottable"; import Spottable from "@enact/spotlight/Spottable";
@@ -7,393 +7,232 @@ import { $L } from "../../../../../utils/helperMethods";
import css from "./OrderList.module.less"; import css from "./OrderList.module.less";
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
export default function OrderList() { export default function OrderList({ orderInfo }) {
// console.log(orderInfo, "아더인포!!!");
const [orderInfoCount, setOrederInfoCount] = useState();
// 주문 취소
const onCancel = useCallback(() => {}, []);
useEffect(() => {
if (orderInfo) {
setOrederInfoCount(orderInfo.length);
}
}, [orderInfo]);
console.log(orderInfo, "orderInfo");
return ( return (
<> <>
<div className={css.orderBorder}> {orderInfo &&
<div className={css.orderNmInfo}> orderInfo.map((order, index) => {
<p className={css.orderTitle}> return (
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span> <div className={css.orderBorder}>
</p> <div className={css.orderNmInfo}>
<TButton size="small" className={css.orderCancelBtn}> <p className={css.orderTitle}>
{$L("Cancel order")} ORDER NUMBER :{" "}
</TButton> <span className={css.orderNm}>{order.ordNo}</span>
</div> </p>
<TButton
<div className={css.orderInfo}> size="small"
<div className={css.infoBox}> className={css.orderCancelBtn}
<div className={css.leftBox}> onClick={onCancel}
<div className={css.topBox}> >
<h4>payment method</h4> {$L("Cancel order")}
<span>Mastercard / ****-1199</span> </TButton>
</div> </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}> <div className={css.orderInfo}>
{$L("view order details")} <div className={css.infoBox}>
</TButton>
</div>
<div className={css.underBox}>
<div className={css.leftBox}> <div className={css.leftBox}>
<div className={css.productBox}> <div className={css.topBox}>
<div className={css.logo}> <h4>payment method</h4>
<span className={css.logoImg}></span> <span>
IHWIP XL Everyday Essentials Crossbody with 2 Straps {order.cardKnd} / {order.cardNo}
</div> </span>
<div className={css.orderPdInfo}> </div>
<div className={css.productImg}></div> <div className={css.underBox}>
<div className={css.pdInfo}> <h4>order date</h4>
<ul> <span>January 5, 2023</span>
<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> </div>
<div className={css.rightBox}> <div className={css.rightBox}>
<ul> <ul>
<li> <li>
<SpottableComponent className={css.divBtn}> <div>item</div>
VIEW CANCELLATION DETAILS <div>${order?.totProdQty}</div>
</SpottableComponent> </li>
<SpottableComponent className={css.divBtn}> <li>
BUY IT AGAIN <div>item total</div>
</SpottableComponent> <div>{order?.totProdPrc}</div>
<SpottableComponent className={css.divBtn}> </li>
VIEW CANCELLATION DETAILS <li>
</SpottableComponent> <div>option</div>
<SpottableComponent className={css.divBtn}> <div>${order?.totOptPrc}</div>
BUY IT AGAIN </li>
</SpottableComponent> <li>
{/* 버튼은 4개까지만 복사해서 쓰면댐 */} <div>s&h</div>
<div>${order?.totDlvrAmt}</div>
</li>
<li>
<div>tax</div>
<div>${order?.ordTotTaxAmt}</div>
</li>
<li>
<div>coupon</div>
<div>-${order?.totDcAmt}</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</li> <div className={css.totalAccount}>
<li> <div className={css.accTitle}>order total</div>
<div className={css.topBox}> <div className={css.accountNum}>$ 95.80</div>
<div className={css.leftSmallBox}> </div>
<span className={css.orderGreen}> <div className={css.orderItemList}>
Preparing for shipment <ul>
</span> {/* 여기부터 아이템 리스트들 */}
{/* 색상별 뿌려주는 틀림. <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.orderBlue}>Shipping</span>
<span className={css.orderRed}>Canceled</span> <span className={css.orderRed}>Canceled</span>
<span className={css.orderBlack}>Completed</span> <span className={css.orderBlack}>Completed</span>
*/} */}
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */} Arriving January 10~ January 15{" "}
</div> {/* 문구 다틀릴예정 */}
</div>
<TButton size="small" className={css.orderDetailBtn}> <TButton size="small" className={css.orderDetailBtn}>
{$L("view order details")} {$L("view order details")}
</TButton> </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>
<div className={css.orderPdInfo}> <div className={css.underBox}>
<div className={css.productImg}></div> <div className={css.leftBox}>
<div className={css.pdInfo}> <div className={css.productBox}>
<ul> <div className={css.logo}>
<li>ID: A565145</li> <span className={css.logoImg}></span>
<li>Qty: 1</li> IHWIP XL Everyday Essentials Crossbody with 2
<li>Silver Metallic / XL</li> Straps
</ul> </div>
<div className={css.orderAcc}> <div className={css.orderPdInfo}>
$38.09 <div className={css.productImg}></div>
<span>|</span> <div className={css.pdInfo}>
<span>OPTION: $5.50</span> <ul>
<span>|</span> <li>ID: A565145</li>
<span>S&H: $5.50</span> <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> </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> </div>
</div> </li>
</div> <li>
<div className={css.rightBox}> <div className={css.topBox}>
<ul> <div className={css.leftSmallBox}>
<li> <span className={css.orderGreen}>
<SpottableComponent className={css.divBtn}> Preparing for shipment
VIEW CANCELLATION DETAILS </span>
</SpottableComponent> {/* 색상별 뿌려주는 틀림.
<SpottableComponent className={css.divBtn}> <span className={css.orderBlue}>Shipping</span>
BUY IT AGAIN <span className={css.orderRed}>Canceled</span>
</SpottableComponent> <span className={css.orderBlack}>Completed</span>
<SpottableComponent className={css.divBtn}> */}
VIEW CANCELLATION DETAILS Arriving January 10~ January 15{" "}
</SpottableComponent> {/* 문구 다틀릴예정 */}
<SpottableComponent className={css.divBtn}> </div>
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}> <TButton size="small" className={css.orderDetailBtn}>
<div className={css.infoBox}> {$L("view order details")}
<div className={css.leftBox}> </TButton>
<div className={css.topBox}> </div>
<h4>payment method</h4> <div className={css.underBox}>
<span>Mastercard / ****-1199</span> <div className={css.leftBox}>
</div> <div className={css.productBox}>
<div className={css.underBox}> <div className={css.logo}>
<h4>order date</h4> <span className={css.logoImg}></span>
<span>January 5, 2023</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> </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>
</> </>
); );
} }