From b651be292e5638b674e0e6de29373b6b96c5f703 Mon Sep 17 00:00:00 2001
From: hyoseung930 <35983843+hyoseung930@users.noreply.github.com>
Date: Fri, 17 Apr 2026 10:30:40 +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 탭**: FID 직접 입력 → WOS API 호출 → DB 저장 → 쿠폰 자동 지급
- **닉네임 탭**: 닉네임 입력 시 DB에서 실시간 검색 → 선택하면 자동으로 FID 조회 및 쿠폰 지급
---
 back/src/wos/wos.controller.ts |   8 ++-
 back/src/wos/wos.service.ts    |   9 +++
 front/src/views/HomeView.vue   | 106 ++++++++++++++++++++++++++++++++-
 3 files changed, 120 insertions(+), 3 deletions(-)

diff --git a/back/src/wos/wos.controller.ts b/back/src/wos/wos.controller.ts
index 29fd751..71b9dcb 100644
--- a/back/src/wos/wos.controller.ts
+++ b/back/src/wos/wos.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Post, Get, Delete, Patch, Body, Param, HttpCode } from '@nestjs/common';
+import { Controller, Post, Get, Delete, Patch, Body, Param, Query, HttpCode } from '@nestjs/common';
 import { WosService } from './wos.service';
 
 @Controller('api')
@@ -28,6 +28,12 @@ export class WosController {
     return this.wosService.listUsers();
   }
 
+  @Get('users/search')
+  async searchUsers(@Query('q') q: string) {
+    if (!q || q.trim().length === 0) return [];
+    return this.wosService.searchUsersByNickname(q.trim());
+  }
+
   @Get('history/:fid')
   async getHistory(@Param('fid') fid: string) {
     return this.wosService.getHistory(fid);
diff --git a/back/src/wos/wos.service.ts b/back/src/wos/wos.service.ts
index eaef255..e41543d 100644
--- a/back/src/wos/wos.service.ts
+++ b/back/src/wos/wos.service.ts
@@ -228,6 +228,15 @@ export class WosService {
     return this.wosUserRepo.find({ order: { created_at: 'DESC' } });
   }
 
+  async searchUsersByNickname(nickname: string) {
+    return this.wosUserRepo
+      .createQueryBuilder('u')
+      .where('u.nickname LIKE :q', { q: `%${nickname}%` })
+      .orderBy('u.nickname', 'ASC')
+      .limit(20)
+      .getMany();
+  }
+
   async listCoupons() {
     return this.wosCouponRepo.find({ order: { created_at: 'DESC' } });
   }
diff --git a/front/src/views/HomeView.vue b/front/src/views/HomeView.vue
index a1743da..d919a53 100644
--- a/front/src/views/HomeView.vue
+++ b/front/src/views/HomeView.vue
@@ -27,7 +27,12 @@
 
       <div class="col-right">
         <div class="card">
-          <div class="search-row">
+          <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">
             <input
               v-model="fidInput"
               type="text"
@@ -41,6 +46,33 @@
               <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>
 
@@ -61,13 +93,18 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { useWosStore } from '../stores/wos.store';
+import axios from 'axios';
+import { useWosStore, type SavedUser } 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;
 
 onMounted(async () => {
   store.loadCoupons();
@@ -90,11 +127,33 @@ 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';
 }
@@ -158,6 +217,49 @@ 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;