hyoseung/coupon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

쿠폰 자동 입력 사이트 작성

Browse Source 
배포 완료. 이제 쿠폰 코드만 입력하면 되고, 목록에도 코드만 표시됩니다.
This commit is contained in:
hyoseung930 2026-04-16 18:23:53 +09:00
parent 14956ac9ec
commit d8fc77789c
1 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/components/CouponManager.vue
View File

@ -6,9 +6,8 @@
</div> </div>
<div class="add-form"> <div class="add-form">
<input v-model="newName" type="text" placeholder="쿠폰 이름 (예: 5월 이벤트)" class="input" />
<input v-model="newCode" type="text" placeholder="쿠폰 코드" class="input code-input" /> <input v-model="newCode" type="text" placeholder="쿠폰 코드" class="input code-input" />
<button class="btn btn-add" @click="add" :disabled="!newName || !newCode">추가</button> <button class="btn btn-add" @click="add" :disabled="!newCode">추가</button>
</div> </div>
<div class="coupon-list" v-if="store.coupons.length > 0"> <div class="coupon-list" v-if="store.coupons.length > 0">
@ -19,7 +18,6 @@
:class="{ inactive: !c.is_active, expired: c.is_expired }" :class="{ inactive: !c.is_active, expired: c.is_expired }"
> >
<div class="coupon-info"> <div class="coupon-info">
<span class="coupon-name">{{ c.name }}</span>
<span class="coupon-code">{{ c.code }}</span> <span class="coupon-code">{{ c.code }}</span>
</div> </div>
<div class="coupon-actions"> <div class="coupon-actions">
@ -44,15 +42,14 @@ import { ref, computed } from 'vue';
import { useWosStore } from '../stores/wos.store'; import { useWosStore } from '../stores/wos.store';
const store = useWosStore(); const store = useWosStore();
const newName = ref('');
const newCode = ref(''); 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_active && !c.is_expired).length);
async function add() { async function add() {
if (!newName.value.trim() || !newCode.value.trim()) return; if (!newCode.value.trim()) return;
await store.addCoupon(newName.value.trim(), newCode.value.trim().toUpperCase()); const code = newCode.value.trim().toUpperCase();
newName.value = ''; await store.addCoupon(code, code);
newCode.value = ''; newCode.value = '';
} }
</script> </script>
@ -102,8 +99,7 @@ async function add() {
.coupon-item.inactive { border-left-color: #334155; opacity: 0.6; } .coupon-item.inactive { border-left-color: #334155; opacity: 0.6; }
.coupon-item.expired { border-left-color: #7c3aed; opacity: 0.5; } .coupon-item.expired { border-left-color: #7c3aed; opacity: 0.5; }
.coupon-info { display: flex; flex-direction: column; gap: 2px; flex: 1; } .coupon-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.coupon-name { color: #f1f5f9; font-size: 0.9rem; font-weight: 500; } .coupon-code { color: #60a5fa; font-family: monospace; font-size: 0.9rem; }
.coupon-code { color: #60a5fa; font-family: monospace; font-size: 0.82rem; }
.coupon-actions { display: flex; gap: 6px; align-items: center; } .coupon-actions { display: flex; gap: 6px; align-items: center; }
.btn-toggle { .btn-toggle {
padding: 3px 10px; padding: 3px 10px;