diff --git a/front/src/components/CouponManager.vue b/front/src/components/CouponManager.vue index ba12a48..d62ba4b 100644 --- a/front/src/components/CouponManager.vue +++ b/front/src/components/CouponManager.vue @@ -2,7 +2,7 @@

🎟️ 쿠폰 관리

- ν™œμ„± {{ activeCoupons }}개 + {{ activeCoupons }}개
@@ -15,21 +15,13 @@ v-for="c in store.coupons" :key="c.id" class="coupon-item" - :class="{ inactive: !c.is_active, expired: c.is_expired }" + :class="{ expired: c.is_expired }" >
{{ c.code }}
만료 -
@@ -44,7 +36,7 @@ import { useWosStore } from '../stores/wos.store'; const store = useWosStore(); const newCode = ref(''); -const activeCoupons = computed(() => store.coupons.filter((c) => c.is_active && !c.is_expired).length); +const activeCoupons = computed(() => store.coupons.filter((c) => !c.is_expired).length); async function add() { if (!newCode.value.trim()) return; @@ -96,7 +88,6 @@ async function add() { border-left: 3px solid #22c55e; gap: 8px; } -.coupon-item.inactive { border-left-color: #334155; opacity: 0.6; } .coupon-item.expired { border-left-color: #7c3aed; opacity: 0.5; } .coupon-info { display: flex; flex-direction: column; gap: 2px; flex: 1; } .coupon-code { color: #60a5fa; font-family: monospace; font-size: 0.9rem; } diff --git a/front/src/views/AdminView.vue b/front/src/views/AdminView.vue index 40a1635..1660352 100644 --- a/front/src/views/AdminView.vue +++ b/front/src/views/AdminView.vue @@ -29,13 +29,6 @@ {{ c.code }}
- - - {{ c.is_active ? 'ν™œμ„±' : 'λΉ„ν™œμ„±' }} -
@@ -52,7 +45,7 @@ const newCode = ref(''); const newName = ref(''); const errorMsg = ref(''); -const activeCoupons = computed(() => store.coupons.filter((c) => c.is_active).length); +const activeCoupons = computed(() => store.coupons.filter((c) => !c.is_expired).length); onMounted(() => store.loadCoupons()); @@ -148,20 +141,5 @@ header h1 { margin: 0; color: #f1f5f9; font-size: 1.6rem; } .coupon-name { color: #f1f5f9; font-size: 0.95rem; font-weight: 500; } .coupon-code { color: #60a5fa; font-family: monospace; font-size: 0.85rem; } .coupon-actions { display: flex; align-items: center; gap: 12px; } -.status-label { font-size: 0.8rem; font-weight: 600; min-width: 36px; } -.status-label.active { color: #4ade80; } -.status-label.inactive { color: #64748b; } -.toggle { position: relative; display: inline-block; width: 40px; height: 22px; } -.toggle input { opacity: 0; width: 0; height: 0; } -.slider { - position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background: #334155; border-radius: 22px; transition: 0.2s; -} -.slider:before { - position: absolute; content: ""; - height: 16px; width: 16px; left: 3px; bottom: 3px; - background: white; border-radius: 50%; transition: 0.2s; -} -input:checked + .slider { background: #3b82f6; } -input:checked + .slider:before { transform: translateX(18px); } +