Day 9: 서버에서 주문 상태 설정 (예: 대기 중, 승인됨, 완료됨)

오늘은 주문 데이터를 관리하기 위해 주문 상태 기능을 추가해보겠습니다. 이 기능을 통해 각 주문의 진행 상태를 추적하고, 클라이언트와 서버 간 상호작용을 보다 직관적으로 만들 수 있습니다. 예를 들어, "대기 중", "승인됨", "완료됨"과 같은 상태를 설정하여 가게 주인이 주문을 관리하기 쉽게 할 수 있습니다.

1. FastAPI에서 주문 상태 필드 추가하기

main.py에서 주문 데이터 구조에 상태 필드를 추가하고, 기본 상태를 "대기 중"으로 설정하도록 합니다.

1. main.py 파일을 열고, Order 모델에 status 필드를 추가합니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel, Field
from typing import List, Optional

app = FastAPI()

# CORS 설정
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],  # Vue.js가 실행 중인 포트
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 주문 데이터 구조 정의
class Order(BaseModel):
    name: str
    item: str
    quantity: int
    notes: Optional[str] = None
    status: str = Field(default="대기 중")  # 주문 상태 필드 추가, 기본값은 "대기 중"

# 임시로 주문을 저장할 리스트
orders: List[Order] = []

# 주문 접수 엔드포인트
@app.post("/order")
async def create_order(order: Order):
    orders.append(order)  # 주문 데이터를 리스트에 저장
    return {"message": "Order received", "order": order}

# 모든 주문 조회 엔드포인트
@app.get("/orders")
async def get_orders():
    return {"orders": orders}

 

• status 필드: 주문 상태를 관리하기 위한 필드로, 기본값을 "대기 중"으로 설정했습니다. 주문이 처음 생성될 때 상태는 "대기 중"으로 저장됩니다.
• create_order 엔드포인트: 주문을 리스트에 추가할 때 status 필드에 기본값인 "대기 중"이 포함되도록 합니다.

2. 주문 상태를 확인하는 API 테스트하기

FastAPI 서버를 실행한 후, /orders 엔드포인트를 통해 저장된 주문의 상태를 확인해 보세요.

uvicorn main:app --reload

 

1. FastAPI 서버를 실행하고, http://127.0.0.1:8000/docs에 접속하여 /order와 /orders 엔드포인트를 테스트합니다.
2. 주문을 생성한 후 /orders 엔드포인트를 조회하여 각 주문의 상태가 "대기 중"으로 표시되는지 확인합니다.

3. Vue 클라이언트에서 주문 상태 표시하기 (선택 사항)

Vue 클라이언트에서 주문 상태를 표시할 수도 있습니다. 이를 통해 가게 주인이 주문 상태를 쉽게 확인할 수 있습니다.

1. OrderList.vue 컴포넌트 수정
2. OrderList.vue 컴포넌트에 상태 필드를 추가하여 주문 상태를 화면에 표시합니다.

<template>
  <div class="order-list">
    <h2>주문 목록</h2>
    <ul>
      <li v-for="(order, index) in orders" :key="index">
        {{ order.name }} - {{ order.item }} (수량: {{ order.quantity }}) - 상태: {{ order.status }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      orders: [],
    };
  },
  async created() {
    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);
    }
  },
};
</script>

<style scoped>
.order-list {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

• status 필드 표시: 주문의 상태를 {{ order.status }}로 화면에 표시하여 각 주문의 상태를 쉽게 확인할 수 있도록 합니다.

4. 오늘의 마무리

오늘은 주문 상태 필드를 추가하여 각 주문의 상태를 관리할 수 있도록 서버를 확장했습니다. 이제 주문이 "대기 중", "승인됨", "완료됨"과 같은 상태를 가질 수 있으며, 이 상태는 클라이언트에서 확인할 수 있습니다.

내일은 이 주문 상태를 업데이트할 수 있는 API 엔드포인트를 추가하여, 가게 주인이 주문 상태를 변경할 수 있는 기능을 구현해보겠습니다.