From 2300c59f432bf89f41dbe574bb2a4143c57acddf Mon Sep 17 00:00:00 2001
From: hyoseung930 <35983843+hyoseung930@users.noreply.github.com>
Date: Fri, 17 Apr 2026 10:32:18 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=EC=9E=90=EB=8F=99=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

배포 완료. 이제 **등록된 유저** 섹션 상단에 검색창이 생겨서 닉네임/FID로 필터링됩니다.
---
 front/src/views/HomeView.vue | 138 +++++++----------------------------
 1 file changed, 26 insertions(+), 112 deletions(-)

diff --git a/front/src/views/HomeView.vue b/front/src/views/HomeView.vue
index d919a53..7d64d70 100644
--- a/front/src/views/HomeView.vue
+++ b/front/src/views/HomeView.vue
@@ -8,10 +8,16 @@
     <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">
+          <h3 class="section-title">등록된 유저 ({{ filteredUsers.length }}명)</h3>
+          <input
+            v-model="userSearchQuery"
+            type="text"
+            class="input user-search"
+            placeholder="닉네임 / FID 검색"
+          />
+          <div class="user-list" v-if="filteredUsers.length > 0">
             <button
-              v-for="u in store.savedUsers"
+              v-for="u in filteredUsers"
               :key="u.fid"
               class="user-item"
               :class="{ active: store.fid === u.fid }"
@@ -21,18 +27,13 @@
               <span class="user-name">{{ u.nickname }}</span>
             </button>
           </div>
-          <p class="empty" v-else>등록된 유저가 없습니다.</p>
+          <p class="empty" v-else>결과가 없습니다.</p>
         </div>
       </div>
 
       <div class="col-right">
         <div class="card">
-          <div class="search-tabs">
-            <button class="tab" :class="{ active: searchMode === 'fid' }" @click="searchMode = 'fid'; searchQuery = ''; nicknameResults = []">FID</button>
-            <button class="tab" :class="{ active: searchMode === 'nickname' }" @click="searchMode = 'nickname'; fidInput = ''; nicknameResults = []">닉네임</button>
-          </div>
-
-          <div v-if="searchMode === 'fid'" class="search-row">
+          <div class="search-row">
             <input
               v-model="fidInput"
               type="text"
@@ -46,33 +47,6 @@
               <span v-else>🎁 쿠폰 받기</span>
             </button>
           </div>
-
-          <div v-else class="search-row">
-            <div class="nickname-wrap">
-              <input
-                v-model="searchQuery"
-                type="text"
-                placeholder="닉네임 검색"
-                class="input"
-                @input="onNicknameInput"
-                :disabled="store.status === 'loading'"
-                autocomplete="off"
-              />
-              <div class="nickname-dropdown" v-if="nicknameResults.length > 0">
-                <button
-                  v-for="u in nicknameResults"
-                  :key="u.fid"
-                  class="nickname-item"
-                  @click="selectNicknameUser(u)"
-                >
-                  <img :src="u.avatar_url" class="user-avatar" @error="onImgErr" />
-                  <span>{{ u.nickname }}</span>
-                  <span class="fid-badge">{{ u.fid }}</span>
-                </button>
-              </div>
-            </div>
-          </div>
-
           <p class="error-msg" v-if="store.status === 'error'">{{ store.errorMsg }}</p>
         </div>
 
@@ -92,19 +66,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import axios from 'axios';
-import { useWosStore, type SavedUser } from '../stores/wos.store';
+import { ref, computed, onMounted } from 'vue';
+import { useWosStore } from '../stores/wos.store';
 import UserCard from '../components/UserCard.vue';
 import CouponInput from '../components/CouponInput.vue';
 import CouponManager from '../components/CouponManager.vue';
 
 const store = useWosStore();
 const fidInput = ref('');
-const searchMode = ref<'fid' | 'nickname'>('fid');
-const searchQuery = ref('');
-const nicknameResults = ref<SavedUser[]>([]);
-let nicknameTimer: ReturnType<typeof setTimeout> | null = null;
+const userSearchQuery = ref('');
+
+const filteredUsers = computed(() => {
+  const q = userSearchQuery.value.trim().toLowerCase();
+  if (!q) return store.savedUsers;
+  return store.savedUsers.filter(
+    (u) => u.nickname?.toLowerCase().includes(q) || u.fid.includes(q)
+  );
+});
 
 onMounted(async () => {
   store.loadCoupons();
@@ -127,33 +105,11 @@ async function searchPlayer() {
 
 async function selectUser(fid: string) {
   fidInput.value = fid;
-  searchMode.value = 'fid';
   localStorage.setItem('wos_fid', fid);
   await store.searchPlayer(fid);
   store.loadSavedUsers();
 }
 
-function onNicknameInput() {
-  if (nicknameTimer) clearTimeout(nicknameTimer);
-  if (!searchQuery.value.trim()) { nicknameResults.value = []; return; }
-  nicknameTimer = setTimeout(async () => {
-    try {
-      const { data } = await axios.get('/api/users/search', { params: { q: searchQuery.value.trim() } });
-      nicknameResults.value = data;
-    } catch { nicknameResults.value = []; }
-  }, 300);
-}
-
-async function selectNicknameUser(u: SavedUser) {
-  nicknameResults.value = [];
-  searchQuery.value = '';
-  fidInput.value = u.fid;
-  searchMode.value = 'fid';
-  localStorage.setItem('wos_fid', u.fid);
-  await store.searchPlayer(u.fid);
-  store.loadSavedUsers();
-}
-
 function onImgErr(e: Event) {
   (e.target as HTMLImageElement).style.display = 'none';
 }
@@ -194,9 +150,10 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; }
   margin-bottom: 16px;
 }
 .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; }
+.section-title { margin: 0 0 10px; 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-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; font-size: 0.85rem; padding: 7px 10px; }
+.user-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 320px); overflow-y: auto; }
 .user-item {
   display: flex;
   align-items: center;
@@ -217,49 +174,6 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; }
 .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-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
-.tab {
-  padding: 6px 16px;
-  background: #0f172a;
-  border: 1px solid #334155;
-  border-radius: 6px;
-  color: #64748b;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.tab.active { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; font-weight: 700; }
-.nickname-wrap { position: relative; flex: 1; }
-.nickname-wrap .input { width: 100%; box-sizing: border-box; }
-.nickname-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0; right: 0;
-  background: #1e293b;
-  border: 1px solid #334155;
-  border-radius: 8px;
-  z-index: 100;
-  max-height: 240px;
-  overflow-y: auto;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-}
-.nickname-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid #334155;
-  color: #cbd5e1;
-  font-size: 0.9rem;
-  cursor: pointer;
-  text-align: left;
-}
-.nickname-item:last-child { border-bottom: none; }
-.nickname-item:hover { background: #0f172a; color: #f1f5f9; }
-.fid-badge { margin-left: auto; font-size: 0.75rem; color: #475569; }
 .search-row { display: flex; gap: 10px; }
 .input {
   flex: 1;
@@ -285,5 +199,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 { color: #475569; font-size: 0.9rem; margin: 0; text-align: center; }
+.empty { color: #475569; font-size: 0.9rem; margin: 0; text-align: center; padding: 12px 0; }
 </style>