Day 17: 주문 기록 조회 기능 구현 – 클라이언트에서 과거 주문 데이터 확인하기

오늘은 주문 기록 조회 기능을 구현합니다. 이를 통해 클라이언트에서 과거 주문 데이터를 확인할 수 있도록 기능을 확장합니다. 사용자는 주문 목록을 날짜, 상태, 또는 기타 조건에 따라 필터링하여 확인할 수 있습니다.

---

1. 서버에서 주문 기록 조회 API 개선

main.py 수정

/orders 엔드포인트를 개선하여 상태별 또는 특정 조건에 따라 주문 데이터를 조회할 수 있는 기능을 추가합니다.

python

코드 복사

from fastapi import FastAPI, Depends, Query from sqlalchemy.orm import Session from database import SessionLocal, Order app = FastAPI() # 데이터베이스 세션 종속성 설정 def get_db(): db = SessionLocal() try: yield db finally: db.close() # 주문 기록 조회 엔드포인트 @app.get("/orders") def get_orders( status: str = Query(None, description="주문 상태별 필터링 (예: 대기 중, 승인됨, 완료됨)"), db: Session = Depends(get_db), ): if status: orders = db.query(Order).filter(Order.status == status).all() else: orders = db.query(Order).all() return {"orders": orders}

• status 필터 추가:
  • Query를 사용해 상태별 필터링을 지원합니다.
  • 클라이언트에서 특정 상태("대기 중", "승인됨", "완료됨")로 필터링하여 데이터를 요청할 수 있습니다.

---

2. 클라이언트에서 주문 기록 표시

OrderList.vue 수정

클라이언트에서 주문 상태를 필터링할 수 있도록 UI를 개선합니다.

vue

코드 복사

<template> <div class="container mt-5"> <h2 class="text-center mb-4">주문 목록</h2> <!-- 필터링 선택 --> <div class="mb-4"> <label for="statusFilter" class="form-label">상태별 필터링:</label> <select v-model="selectedStatus" id="statusFilter" class="form-select" @change="fetchOrders" > <option value="">모든 주문</option> <option value="대기 중">대기 중</option> <option value="승인됨">승인됨</option> <option value="완료됨">완료됨</option> </select> </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 @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: [], selectedStatus: "", // 선택된 상태 필터 }; }, methods: { async fetchOrders() { try { const query = this.selectedStatus ? `?status=${this.selectedStatus}` : ""; const response = await fetch(`http://127.0.0.1:8000/orders${query}`); const data = await response.json(); this.orders = data.orders; } 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. 주요 추가 사항

• 상태 필터링: select 요소를 통해 사용자가 상태별로 주문 데이터를 필터링할 수 있습니다.
• 목록 새로고침: 상태를 업데이트한 후 자동으로 새로고침하여 UI가 최신 상태를 반영하도록 했습니다.

---

4. 테스트 및 검증

테스트 시나리오

1. 클라이언트에서 상태 필터를 "대기 중", "승인됨", "완료됨"으로 변경하며 주문 데이터를 확인.
2. 필터링된 상태에서 특정 주문의 상태를 변경하고, 필터링 결과가 즉시 반영되는지 확인.
3. 필터를 "모든 주문"으로 설정하여 전체 데이터를 확인.

---

오늘의 마무리

오늘은 주문 기록 조회 기능을 구현하고, 클라이언트에서 상태별로 데이터를 필터링하는 기능을 추가했습니다. 이를 통해 사용자와 가게 주인은 필요한 데이터를 더 쉽게 확인할 수 있게 되었습니다.

내일은 관리자 화면을 확장하여 더 나은 데이터 관리 인터페이스를 구현할 예정입니다. 🚀