Day 8: 주문 폼 개선 – 수량, 주문 메모 등 추가 입력 항목 추가

오늘은 주문 폼에 추가 입력 필드를 추가하여 사용자가 더 상세한 주문 정보를 입력할 수 있도록 개선해보겠습니다. 추가할 필드는 **수량(quantity)**와 **주문 메모(order notes)**입니다. 이를 통해 사용자가 원하는 수량을 설정하고, 필요한 추가 요청 사항을 메모로 작성할 수 있게 됩니다.

1. OrderForm.vue 수정하기

OrderForm.vue에서 수량과 주문 메모를 입력할 수 있는 필드를 추가합니다.

<template>
  <div class="order-form">
    <h2>주문하기</h2>
    <form @submit.prevent="submitOrder">
      <div>
        <label for="name">이름:</label>
        <input type="text" v-model="name" id="name" required />
      </div>
      <div>
        <label for="item">상품명:</label>
        <input type="text" v-model="item" id="item" required />
      </div>
      <div>
        <label for="quantity">수량:</label>
        <input type="number" v-model="quantity" id="quantity" min="1" required />
      </div>
      <div>
        <label for="notes">주문 메모:</label>
        <textarea v-model="notes" id="notes" placeholder="추가 요청 사항을 입력해 주세요"></textarea>
      </div>
      <button type="submit">주문 제출</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "OrderForm",
  data() {
    return {
      name: "",
      item: "",
      quantity: 1,
      notes: "", // 새로운 주문 메모 필드
    };
  },
  methods: {
    async submitOrder() {
      const orderData = {
        name: this.name,
        item: this.item,
        quantity: this.quantity,
        notes: this.notes, // 주문 메모 포함
      };
      try {
        const response = await fetch("http://127.0.0.1:8000/order", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(orderData),
        });
        if (!response.ok) {
          throw new Error("서버 오류가 발생했습니다.");
        }
        const result = await response.json();
        console.log(result); // 서버로부터 받은 응답을 콘솔에 출력합니다.
        this.$router.push("/confirmation");
      } catch (error) {
        console.error("주문 전송 중 오류가 발생했습니다:", error);
        alert("주문 중 오류가 발생했습니다. 나중에 다시 시도해 주세요.");
      }
    },
  },
};
</script>

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

 

• quantity 필드: v-model="quantity"를 사용하여 사용자로부터 수량을 입력받고, 기본값을 1로 설정했습니다.
• notes 필드: 사용자가 주문 시 추가 요청 사항을 입력할 수 있도록 textarea로 구성했습니다.

2. FastAPI 서버 수정하기

주문 데이터 모델에 새로운 필드를 추가하여 Vue에서 전송한 데이터를 FastAPI에서 수신하도록 수정합니다.

1. main.py에서 Order 모델에 notes 필드를 추가합니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
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  # 주문 메모는 선택 사항으로 설정

# 임시로 주문을 저장할 리스트
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}

 

 

• notes 필드 추가: Optional[str] = None로 설정하여 주문 메모가 없는 경우에도 문제가 발생하지 않도록 선택 사항으로 만듭니다.
• create_order 엔드포인트: 주문 데이터를 orders 리스트에 저장하는 기존 코드를 유지하면서, 새로운 데이터 구조를 반영합니다.

3. 테스트하기

1. Vue 클라이언트와 FastAPI 서버를 실행한 상태에서 브라우저에서 주문 폼을 작성하고 주문 제출을 클릭합니다.
2. quantity와 notes 필드에 입력한 데이터가 FastAPI 서버로 정상적으로 전송되고, 서버의 orders 리스트에 추가되는지 확인합니다.
3. 서버의 /orders 엔드포인트를 통해 모든 주문 데이터를 확인하고, quantity와 notes 값이 정확히 저장되는지 확인해 보세요.

4. 오늘의 마무리

오늘은 주문 폼에 수량과 주문 메모 필드를 추가하여, 사용자로부터 더 상세한 정보를 받을 수 있도록 개선했습니다. 내일은 서버에서 주문 상태를 설정하는 기능을 추가하여 주문 관리 기능을 확장해 보겠습니다.

이제 추가된 필드가 잘 작동하는지 확인하고, 문제 발생 시 오류 메시지를 확인하여 디버깅해 주세요!