Day 11: 클라이언트 측 주문 확인과 간단한 성공 메시지 표시

오늘은 주문이 성공적으로 전송되었을 때 사용자에게 성공 메시지를 표시하는 기능을 추가합니다. 이를 통해 사용자는 자신의 주문이 정상적으로 접수되었음을 알 수 있으며, 앱의 사용자 경험이 향상됩니다.

1. OrderForm.vue에서 성공 메시지 표시하기

OrderForm.vue를 수정하여 주문이 성공적으로 전송되었을 때 성공 메시지를 화면에 표시합니다.

<template>
  <div class="order-form">
    <h2>주문하기</h2>
    <form @submit.prevent="submitOrder" v-if="!orderSubmitted">
      <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 v-else class="success-message">
      <h3>주문이 성공적으로 접수되었습니다!</h3>
      <p>이름: {{ name }}</p>
      <p>상품명: {{ item }}</p>
      <p>수량: {{ quantity }}</p>
      <p>주문 메모: {{ notes }}</p>
      <button @click="resetForm">새로운 주문</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderForm",
  data() {
    return {
      name: "",
      item: "",
      quantity: 1,
      notes: "",
      orderSubmitted: false, // 주문 완료 상태를 관리
    };
  },
  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.orderSubmitted = true; // 주문이 성공적으로 전송되면 상태 업데이트
      } catch (error) {
        console.error("주문 전송 중 오류가 발생했습니다:", error);
        alert("주문 중 오류가 발생했습니다. 나중에 다시 시도해 주세요.");
      }
    },
    resetForm() {
      // 폼 초기화
      this.name = "";
      this.item = "";
      this.quantity = 1;
      this.notes = "";
      this.orderSubmitted = false;
    },
  },
};
</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;
}
.success-message {
  text-align: center;
  color: green;
}
</style>

• orderSubmitted 상태: 주문이 성공적으로 전송되었는지 확인하기 위한 상태 변수입니다.
• 성공 메시지 표시: 주문 성공 시 v-else로 성공 메시지를 표시합니다.
• resetForm 메서드: 새로운 주문을 위해 폼을 초기화합니다.

2. 성공 메시지 표시 흐름 테스트하기

1. Vue 앱을 실행하고, 주문 폼을 작성한 뒤 주문 제출 버튼을 클릭합니다.
2. 주문이 성공적으로 전송되면 성공 메시지가 화면에 표시됩니다.
3. 성공 메시지 화면에서 새로운 주문 버튼을 클릭하면 폼이 초기화되고 새로운 주문을 작성할 수 있습니다.

3. 추가 개선 사항 (선택 사항)

• 애니메이션 추가: 성공 메시지가 표시될 때 간단한 페이드인 효과나 애니메이션을 추가하여 시각적으로 더 즐거운 경험을 제공할 수 있습니다.
• 로딩 상태 표시: 주문을 서버로 전송하는 동안 로딩 스피너를 표시하여 사용자가 주문 처리 중임을 알 수 있도록 개선할 수 있습니다.

4. 오늘의 마무리

오늘은 주문 성공 메시지를 화면에 표시하는 기능을 구현했습니다. 이를 통해 사용자는 자신의 주문이 정상적으로 접수되었는지 확인할 수 있으며, 새로운 주문을 쉽게 작성할 수 있습니다.

내일은 클라이언트와 서버 모두에서 기본적인 오류 처리와 유효성 검사를 개선하여 사용자 경험을 더욱 강화하겠습니다.