Day 19: 관리자 화면 개선 – 주문 관리 인터페이스 확장

오늘은 가게 주인을 위한 관리자 화면을 개선하여, 주문 데이터를 더 효율적으로 관리할 수 있는 기능을 추가합니다. 특히, 여러 주문 상태를 한눈에 볼 수 있는 테이블 기반의 관리 인터페이스를 구현하고, 정렬 및 필터링 기능을 추가합니다.

---

1. 관리자 화면의 UI 설계

목표

1. 주문 목록 테이블: 주문 데이터를 테이블 형식으로 표시.
2. 정렬 기능: 주문 상태, 상품명, 또는 고객 이름 기준으로 정렬.
3. 상태별 필터링: 주문 상태에 따라 데이터를 필터링.
4. 빠른 상태 변경: 주문 상태를 테이블에서 바로 변경.

---

2. 클라이언트 구현

AdminOrder.vue 파일 생성

src/components 폴더에 AdminOrder.vue 파일을 생성합니다.

vue

코드 복사

<template> <div class="container mt-5"> <h2 class="text-center mb-4">주문 관리</h2> <!-- 상태별 필터 --> <div class="mb-4 d-flex justify-content-between"> <div> <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> <div> <label for="sortFilter" class="form-label">정렬:</label> <select v-model="sortBy" id="sortFilter" class="form-select" @change="sortOrders" > <option value="name">이름</option> <option value="item">상품명</option> <option value="status">상태</option> </select> </div> </div> <!-- 주문 목록 테이블 --> <table class="table table-striped"> <thead> <tr> <th>이름</th> <th>상품명</th> <th>수량</th> <th>상태</th> <th>작업</th> </tr> </thead> <tbody> <tr v-for="(order, index) in orders" :key="index"> <td>{{ order.name }}</td> <td>{{ order.item }}</td> <td>{{ order.quantity }}</td> <td>{{ order.status }}</td> <td> <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> </td> </tr> </tbody> </table> </div> </template> <script> export default { name: "AdminOrder", data() { return { orders: [], selectedStatus: "", // 필터링 상태 sortBy: "name", // 정렬 기준 }; }, 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; this.sortOrders(); } catch (error) { console.error("주문 목록을 불러오는 중 오류가 발생했습니다:", error); } }, sortOrders() { if (this.sortBy === "name") { this.orders.sort((a, b) => a.name.localeCompare(b.name)); } else if (this.sortBy === "item") { this.orders.sort((a, b) => a.item.localeCompare(b.item)); } else if (this.sortBy === "status") { this.orders.sort((a, b) => a.status.localeCompare(b.status)); } }, 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> <style scoped> .container { max-width: 800px; } </style>

---

3. 주요 기능 설명

1. 상태 필터링: selectedStatus 값을 기준으로 특정 상태("대기 중", "승인됨", "완료됨")의 주문만 표시합니다.
2. 정렬: sortBy 값을 기준으로 이름, 상품명, 또는 상태별로 주문 목록을 정렬합니다.
3. 빠른 상태 변경: "승인" 또는 "완료" 버튼을 사용하여 주문 상태를 빠르게 변경할 수 있습니다.

---

4. 라우팅 추가

router/index.js에 관리자 화면 라우트를 추가합니다.

javascript

코드 복사

import { createRouter, createWebHistory } from "vue-router"; import OrderForm from "@/components/OrderForm.vue"; import OrderList from "@/components/OrderList.vue"; import AdminOrder from "@/components/AdminOrder.vue"; const routes = [ { path: "/", name: "OrderForm", component: OrderForm, }, { path: "/orders", name: "OrderList", component: OrderList, }, { path: "/admin", name: "AdminOrder", component: AdminOrder, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router;

---

5. 테스트 및 검증

테스트 시나리오

1. /admin 경로로 이동하여 주문 목록이 테이블 형식으로 표시되는지 확인.
2. 상태별 필터를 적용하여 주문이 올바르게 필터링되는지 확인.
3. 정렬 기준을 변경하며 목록이 올바르게 정렬되는지 확인.
4. 상태 변경 버튼을 클릭하여 주문 상태를 "승인됨" 또는 "완료됨"으로 변경하고, 즉시 반영되는지 확인.

---

오늘의 마무리

오늘은 관리자 화면을 개선하여 주문 데이터를 효율적으로 관리할 수 있는 인터페이스를 구현했습니다. 테이블 형식의 UI와 필터링 및 정렬 기능을 통해, 가게 주인이 더욱 효과적으로 주문을 관리할 수 있게 되었습니다.

내일은 이번 주 작업을 복습하며, 추가적인 최적화 및 문제 해결을 진행하겠습니다. 🚀