쿠폰 자동 입력 사이트 작성

빌드는 성공했습니다. 배포에 SSH 키가 필요합니다. 이전에 어떤 키 파일로 서버에 접속하셨나요? (`.pem` 파일 경로를 알려주세요)

front/src/views/HomeView.vue

@@ -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="columns">
-      <div class="search-row">
+      <div class="col-left">
-        <input
+        <div class="card">
-          v-model="fidInput"
+          <h3 class="section-title">등록된 유저 ({{ store.savedUsers.length }}명)</h3>
-          type="text"
+          <div class="user-list" v-if="store.savedUsers.length > 0">
-          placeholder="FID (플레이어 ID) 입력"
+            <button
-          class="input"
+              v-for="u in store.savedUsers"
-          @keydown.enter="searchPlayer"
+              :key="u.fid"
-          :disabled="store.status === 'loading'"
+              class="user-item"
-        />
+              :class="{ active: store.fid === u.fid }"
-        <button class="btn btn-primary" @click="searchPlayer" :disabled="store.status === 'loading'">
+              @click="selectUser(u.fid)"
-          <span v-if="store.status === 'loading'">⏳ 처리 중...</span>
+            >
-          <span v-else>🎁 쿠폰 받기</span>
+              <img :src="u.avatar_url" class="user-avatar" @error="onImgErr" />
-        </button>
+              <span class="user-name">{{ u.nickname }}</span>
-      </div>
+            </button>
-      <p class="error-msg" v-if="store.status === 'error'">{{ store.errorMsg }}</p>
+          </div>
-
+          <p class="empty" v-else>등록된 유저가 없습니다.</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>
       </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">
+        <UserCard v-if="store.player" :player="store.player" :fid="store.fid" />
-      <h3 class="section-title">지급 결과</h3>
-      <CouponInput />
-    </div>
 
-    <div class="card admin-card">
+        <div class="card" v-if="store.player">
-      <CouponManager />
+          <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 {
+.layout {
-  max-width: 640px;
+  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; }
+.empty { 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; }
 </style>