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

쿠폰 자동 입력 사이트 작성

Browse Source 
빌드는 성공했습니다. 배포에 SSH 키가 필요합니다. 이전에 어떤 키 파일로 서버에 접속하셨나요? (`.pem` 파일 경로를 알려주세요)
This commit is contained in:
hyoseung930 2026-04-17 10:23:01 +09:00
parent d4f10d9247
commit dde188877f
1 changed files with 86 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
front/src/views/HomeView.vue
View File

@ -1,53 +1,60 @@
<template>
<div class="home">
<div class="layout">
<header>
<h1>⚔️ WOS 쿠폰 자동 입력</h1>
<p class="subtitle">FID를 입력하면 등록된 모든 쿠폰을 자동으로 지급합니다</p>
</header>
<div class="card">
<div class="search-row">
<input
v-model="fidInput"
type="text"
placeholder="FID (플레이어 ID) 입력"
class="input"
@keydown.enter="searchPlayer"
:disabled="store.status === 'loading'"
/>
<button class="btn btn-primary" @click="searchPlayer" :disabled="store.status === 'loading'">
<span v-if="store.status === 'loading'">⏳ 처리 중...</span>
<span v-else>🎁 쿠폰 받기</span>
</button>
</div>
<p class="error-msg" v-if="store.status === 'error'">{{ store.errorMsg }}</p>
<div class="saved-users" v-if="store.savedUsers.length > 0">
<span class="saved-label">등록된 유저 ({{ store.savedUsers.length }}명)</span>
<div class="chips">
<button
v-for="u in store.savedUsers"
:key="u.fid"
class="chip"
:class="{ active: store.fid === u.fid }"
@click="selectUser(u.fid)"
>
<img :src="u.avatar_url" class="chip-avatar" @error="onImgErr" />
<span>{{ u.nickname }}</span>
</button>
<div class="columns">
<div class="col-left">
<div class="card">
<h3 class="section-title">등록된 유저 ({{ store.savedUsers.length }}명)</h3>
<div class="user-list" v-if="store.savedUsers.length > 0">
<button
v-for="u in store.savedUsers"
:key="u.fid"
class="user-item"
:class="{ active: store.fid === u.fid }"
@click="selectUser(u.fid)"
>
<img :src="u.avatar_url" class="user-avatar" @error="onImgErr" />
<span class="user-name">{{ u.nickname }}</span>
</button>
</div>
<p class="empty" v-else>등록된 유저가 없습니다.</p>
</div>
</div>
</div>
<UserCard v-if="store.player" :player="store.player" :fid="store.fid" />
<div class="col-right">
<div class="card">
<div class="search-row">
<input
v-model="fidInput"
type="text"
placeholder="FID (플레이어 ID) 입력"
class="input"
@keydown.enter="searchPlayer"
:disabled="store.status === 'loading'"
/>
<button class="btn btn-primary" @click="searchPlayer" :disabled="store.status === 'loading'">
<span v-if="store.status === 'loading'">⏳ 처리 중...</span>
<span v-else>🎁 쿠폰 받기</span>
</button>
</div>
<p class="error-msg" v-if="store.status === 'error'">{{ store.errorMsg }}</p>
</div>
<div class="card" v-if="store.player">
<h3 class="section-title">지급 결과</h3>
<CouponInput />
</div>
<UserCard v-if="store.player" :player="store.player" :fid="store.fid" />
<div class="card admin-card">
<CouponManager />
<div class="card" v-if="store.player">
<h3 class="section-title">지급 결과</h3>
<CouponInput />
</div>
<div class="card admin-card">
<CouponManager />
</div>
</div>
</div>
</div>
</template>
@ -94,8 +101,8 @@ function onImgErr(e: Event) {
</script>
<style scoped>
.home {
max-width: 640px;
.layout {
max-width: 1100px;
margin: 0 auto;
padding: 32px 16px 60px;
}
@ -105,6 +112,21 @@ header {
}
header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; }
.subtitle { color: #64748b; margin: 0; font-size: 0.9rem; }
.columns {
display: flex;
gap: 16px;
align-items: flex-start;
}
.col-left {
width: 220px;
flex-shrink: 0;
}
.col-right {
flex: 1;
min-width: 0;
}
.card {
background: #1e293b;
border: 1px solid #334155;
@ -114,6 +136,28 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; }
}
.admin-card { border-style: dashed; border-color: #475569; }
.section-title { margin: 0 0 14px; color: #94a3b8; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.user-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 260px); overflow-y: auto; }
.user-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
color: #cbd5e1;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.15s;
text-align: left;
width: 100%;
}
.user-item:hover { border-color: #60a5fa; color: #f1f5f9; }
.user-item.active { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row { display: flex; gap: 10px; }
.input {
flex: 1;
@ -139,24 +183,5 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; }
.btn-primary { background: #3b82f6; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #2563eb; }
.error-msg { color: #f87171; font-size: 0.9rem; margin: 8px 0 0; }
.empty-history { color: #475569; font-size: 0.9rem; margin: 0; text-align: center; }
.saved-users { margin-top: 14px; }
.saved-label { color: #64748b; font-size: 0.8rem; display: block; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px 5px 6px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 20px;
color: #cbd5e1;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.15s;
}
.chip:hover { border-color: #60a5fa; color: #f1f5f9; }
.chip.active { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; }
.chip-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.empty { color: #475569; font-size: 0.9rem; margin: 0; text-align: center; }
</style>