Day 13: CSS 또는 CSS 프레임워크를 사용한 기본 스타일링

오늘은 주문 시스템의 사용자 인터페이스(UI)를 개선하기 위해 CSS 또는 CSS 프레임워크를 활용하여 기본 스타일링을 추가합니다. 이를 통해 사용자는 더 깔끔하고 직관적인 디자인의 앱을 사용할 수 있게 됩니다.

---

1. CSS 프레임워크 선택 (선택 사항)

CSS 프레임워크를 활용하면 빠르게 스타일링을 개선할 수 있습니다. 이번 예제에서는 Bootstrap을 사용해 간단한 UI를 개선합니다.

Bootstrap 설치

Vue 프로젝트에 Bootstrap을 추가하려면 npm을 사용하여 설치합니다.

npm install bootstrap

설치 후 main.js에서 Bootstrap CSS를 가져옵니다.

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

---

2. 주문 폼 스타일링

OrderForm.vue 스타일 개선

Bootstrap의 클래스를 사용해 주문 폼을 스타일링합니다.

<template>
  <div class="container mt-5">
    <h2 class="text-center mb-4">주문하기</h2>
    <form @submit.prevent="submitOrder" class="border p-4 rounded bg-light shadow">
      <div class="mb-3">
        <label for="name" class="form-label">이름:</label>
        <input
          type="text"
          v-model="name"
          id="name"
          class="form-control"
          :class="{ 'is-invalid': errors.name }"
        />
        <div v-if="errors.name" class="invalid-feedback">{{ errors.name }}</div>
      </div>
      <div class="mb-3">
        <label for="item" class="form-label">상품명:</label>
        <input
          type="text"
          v-model="item"
          id="item"
          class="form-control"
          :class="{ 'is-invalid': errors.item }"
        />
        <div v-if="errors.item" class="invalid-feedback">{{ errors.item }}</div>
      </div>
      <div class="mb-3">
        <label for="quantity" class="form-label">수량:</label>
        <input
          type="number"
          v-model="quantity"
          id="quantity"
          min="1"
          class="form-control"
          :class="{ 'is-invalid': errors.quantity }"
        />
        <div v-if="errors.quantity" class="invalid-feedback">{{ errors.quantity }}</div>
      </div>
      <div class="mb-3">
        <label for="notes" class="form-label">주문 메모:</label>
        <textarea
          v-model="notes"
          id="notes"
          class="form-control"
          placeholder="추가 요청 사항을 입력해 주세요"
        ></textarea>
      </div>
      <button type="submit" class="btn btn-primary w-100">주문 제출</button>
    </form>
    <div v-if="orderSubmitted" class="alert alert-success mt-4 text-center">
      <h4>주문이 성공적으로 접수되었습니다!</h4>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderForm",
  data() {
    return {
      name: "",
      item: "",
      quantity: 1,
      notes: "",
      orderSubmitted: false,
      errors: {
        name: null,
        item: null,
        quantity: null,
      },
    };
  },
  methods: {
    validateForm() {
      this.errors = { name: null, item: null, quantity: null };
      let isValid = true;

      if (!this.name.trim()) {
        this.errors.name = "이름을 입력해 주세요.";
        isValid = false;
      }

      if (!this.item.trim()) {
        this.errors.item = "상품명을 입력해 주세요.";
        isValid = false;
      }

      if (this.quantity < 1) {
        this.errors.quantity = "수량은 1 이상이어야 합니다.";
        isValid = false;
      }

      return isValid;
    },
    async submitOrder() {
      if (!this.validateForm()) {
        return;
      }

      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("주문 전송 중 문제가 발생했습니다. 다시 시도해 주세요.");
      }
    },
  },
};
</script>

<style scoped>
.container {
  max-width: 600px;
}
</style>

• Bootstrap 클래스 적용: form-control, btn, is-invalid 등을 사용하여 입력 필드와 버튼의 스타일을 개선했습니다.
• 유효성 검사 시 시각적 피드백: 입력 오류가 있는 경우 Bootstrap의 invalid-feedback 클래스를 사용하여 오류 메시지를 표시합니다.

---

3. 주문 목록 스타일링

OrderList.vue 스타일 개선

OrderList.vue에서도 Bootstrap 클래스를 사용해 목록을 깔끔하게 정리합니다.

<template>
  <div class="container mt-5">
    <h2 class="text-center mb-4">주문 목록</h2>
    <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: [],
    };
  },
  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);
    }
  },
  methods: {
    async updateStatus(orderId, newStatus) {
      try {
        const response = await fetch(`http://127.0.0.1:8000/order/${orderId}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ status: newStatus }),
        });

        if (!response.ok) {
          throw new Error("상태 업데이트 중 오류가 발생했습니다.");
        }

        const updatedOrder = await response.json();
        this.orders = this.orders.map((order) =>
          order.id === orderId ? updatedOrder.order : order
        );
      } catch (error) {
        console.error("주문 상태 업데이트 중 오류가 발생했습니다:", error);
      }
    },
  },
};
</script>

4. 오늘의 마무리

오늘은 Bootstrap을 사용해 UI를 깔끔하고 직관적으로 개선했습니다. 이제 앱은 사용자 친화적인 인터페이스를 제공하며, 다양한 화면에서 보기 좋게 동작합니다.

내일은 이번 주에 추가한 모든 기능을 복습하고 문제를 해결하는 시간을 가지겠습니다.