Day 18: 클라이언트 측에서 주문 기록 데이터 불러오기 및 상세보기 기능 추가

오늘은 클라이언트에서 주문 기록을 더 상세히 확인할 수 있도록 기능을 확장합니다. 각 주문 항목에 대해 세부 정보를 확인할 수 있는 버튼을 추가하여, 필요한 데이터를 한눈에 볼 수 있는 UI를 제공합니다.

---

1. FastAPI에서 주문 상세보기 엔드포인트 추가

main.py에 특정 주문의 세부 정보를 반환하는 엔드포인트를 추가합니다.

main.py 수정

python

코드 복사

@app.get("/order/{order_id}") def get_order(order_id: int, db: Session = Depends(get_db)): # 주문 조회 order = db.query(Order).filter(Order.id == order_id).first() if not order: raise HTTPException(status_code=404, detail="Order not found") return {"order": order}

• 엔드포인트 설명:
  • /order/{order_id}: 특정 주문 ID에 해당하는 세부 정보를 반환합니다.
  • order_id: 클라이언트에서 요청한 주문 ID.
  • 404 에러 처리: 해당 주문이 없을 경우 적절한 메시지를 반환.

---

2. 클라이언트에서 주문 세부 정보 보기 기능 추가

OrderList.vue 수정

vue

코드 복사

<template> <div class="container mt-5"> <h2 class="text-center mb-4">주문 목록</h2> <!-- 주문 상세보기 모달 --> <div class="modal fade" id="orderDetailsModal" tabindex="-1" aria-labelledby="orderDetailsModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="orderDetailsModalLabel">주문 세부 정보</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body"> <p><strong>이름:</strong> {{ selectedOrder.name }}</p> <p><strong>상품명:</strong> {{ selectedOrder.item }}</p> <p><strong>수량:</strong> {{ selectedOrder.quantity }}</p> <p><strong>메모:</strong> {{ selectedOrder.notes || "없음" }}</p> <p><strong>상태:</strong> {{ selectedOrder.status }}</p> </div> </div> </div> </div> <!-- 주문 목록 --> <ul class="list-group"> <li v-for="(order, index) in orders" :key="index" class="list-group-item d-flex justify-content-between align-items-center" > <div> <strong>{{ order.name }}</strong> - {{ order.item }} ({{ order.quantity }}) <p class="mb-0 text-muted">상태: {{ order.status }}</p> </div> <div> <button class="btn btn-info btn-sm me-2" data-bs-toggle="modal" data-bs-target="#orderDetailsModal" @click="fetchOrderDetails(order.id)" > 상세 보기 </button> <button @click="updateStatus(order.id, '승인됨')" class="btn btn-success btn-sm me-2" > 승인 </button> <button @click="updateStatus(order.id, '완료됨')" class="btn btn-secondary btn-sm" > 완료 </button> </div> </li> </ul> </div> </template> <script> export default { name: "OrderList", data() { return { orders: [], selectedOrder: {}, // 선택된 주문의 세부 정보를 저장 }; }, methods: { async fetchOrders() { try { const response = await fetch("http://127.0.0.1:8000/orders"); const data = await response.json(); this.orders = data.orders; } catch (error) { console.error("주문 목록을 불러오는 중 오류가 발생했습니다:", error); } }, async fetchOrderDetails(orderId) { try { const response = await fetch(`http://127.0.0.1:8000/order/${orderId}`); if (!response.ok) { throw new Error("주문 세부 정보를 불러오는 중 오류가 발생했습니다."); } const data = await response.json(); this.selectedOrder = data.order; } catch (error) { console.error(error); } }, async updateStatus(orderId, newStatus) { try { const response = await fetch( `http://127.0.0.1:8000/order/${orderId}/status`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ status: newStatus }), } ); if (!response.ok) { throw new Error("상태 업데이트 중 오류가 발생했습니다."); } this.fetchOrders(); // 업데이트 후 목록 새로고침 } catch (error) { console.error("주문 상태 업데이트 중 오류가 발생했습니다:", error); } }, }, async created() { this.fetchOrders(); // 초기 데이터 로드 }, }; </script>

---

3. 주요 추가 사항

• 주문 상세보기 모달: Bootstrap의 모달을 사용하여 클릭한 주문의 세부 정보를 보여줍니다.
• fetchOrderDetails 메서드: 선택한 주문 ID를 서버로 요청하여 해당 주문의 세부 정보를 가져옵니다.
• 클릭 이벤트 처리: 모달을 열기 전에 fetchOrderDetails 메서드를 호출하여 데이터를 불러옵니다.

---

4. 테스트 및 검증

테스트 시나리오

1. 주문 목록에서 상세 보기 버튼을 클릭하여 해당 주문의 세부 정보를 모달로 확인.
2. 모든 필드(이름, 상품명, 수량, 메모, 상태)가 올바르게 표시되는지 확인.
3. 상태 업데이트 후, 새로고침 없이 상태가 즉시 반영되는지 테스트.

---

오늘의 마무리

오늘은 주문 상세보기 기능을 추가하여 클라이언트에서 각 주문의 세부 정보를 확인할 수 있도록 구현했습니다. 이 기능은 가게 주인이 주문 관리에 필요한 추가 정보를 빠르게 확인하는 데 유용합니다.

내일은 주문 데이터를 더욱 효율적으로 관리하기 위해 관리자 화면을 개선해 보겠습니다. 🚀