728x90
주문 완료 페이지를 만들면서 주문 성공 시 주문번호를 생성해야했다.
그에 따라 랜덤한 번호 생성 함수 코드를 가져와서 사용.
//orderNum 생성에 사용
const randomStringGenerator = () => {
const randomString = Array.from(Array(10), () =>
Math.floor(Math.random() * 36).toString(36)
).join("");
return randomString;
};
module.exports = { randomStringGenerator };
이 함수를 사용하면 랜덤한 스트링이 생성되는데 이걸 이용해서 order 컨트롤러에서 응답해야하는 값을 만들었다.
const orderController = {};
const Order = require("../models/Order");
const { randomStringGenerator } = require("../utils/randomStringGenerator")
orderController.createOrder = async (req, res) => {
try {
const { userId } = req;
const { shipTo, contact, totalPrice, orderList } = req.body;
const newOrder = new Order({
userId,
totalPrice,
shipTo,
contact,
items: orderList,
orderNum: randomStringGenerator()
});
await newOrder.save();
res.status(200).json({ status: "ok", orderNum: newOrder.orderNum });
} catch (error) {
return res.status(400).json({ status: "fail", message: error.message })
}
}
module.exports = orderController;
그렇게하고 이걸 프론트에서 POST하고 응답 받을 때 세션스토리지에 저장을 해준 후
이렇게 세션스토리지를 겟 해서 가져다 쓰면 된다.
function loadOrderResult() {
console.log("결제가 완료되었습니다.")
const contentContainer = document.getElementById("content-container");
const orderContainer = document.getElementById("order-container");
contentContainer.innerHTML = "";
orderContainer.innerHTML = "";
const orderNumber = sessionStorage.getItem("orderNumber");
const orderResult = `
<div>
<div>
결제가 완료되었습니다.
</div>
<div>
주문번호: ${orderNumber}
</div>
</div>
`;
contentContainer.insertAdjacentHTML("beforeend", orderResult);
};
참고로 주문이 완료가 되면 카트가 비워져야하는데 이 부분은 order모델에서 진행.
//주문 완료 후 카트 비우기
orderSchema.post("save", async function(){
const cart = await Cart.findOne({userId:this.userId});
cart.items = [];
await cart.save();
});
이 부분이 처음보는 구조인데 여기서 post는 문서가 데이터베이스에 저장된 후 실행되는 동작을 정의하는 hook이다.
post라고 적혀있어서 어디 포스팅? 되는 것인가 오해했는데
여기서의 post는 실행을 의미한다.
즉 save라는 이벤트가 끝나고 나면 다음 함수를 실행하는 뜻.
이렇게 하면 order 컨트롤러에서 save가 되는 순간 카트는 비우진다.