✨ 사용자 검색 모킹 API Handler 추가 (#14)

* feat: user 모킹 데이터 추가

* feat: 사용자 검색 모킹 API 추가

* style: 피드 검색 API Query 수정

API Specification 문서에 나온대로 검색어에 대한 쿼리 변수명을 query -> target으로 변경

* feat: Feed 모킹 데이터와 User 모킹 데이터 연결

src/app/mocks/data/feed.ts

@@ -1,16 +1,13 @@
+import { IUser, userMockData } from './user';
+
 interface IImage {
   id: number;
   imageUrl: string;
 }
 
 interface IFeed {
   id: number;
-
-  user: {
-    id: number;
-    profileImage: string;
-    username: string;
-  };
+  user: IUser;
 
   content: string;
   images: IImage[];
@@ -57,11 +54,7 @@ function generateFeedMockData(count: number) {
   for (let id = 1; id <= count; id++) {
     const feed = {
       id,
-      user: {
-        id: id,
-        profileImage: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${id}.jpg`,
-        username: `user_${id}`,
-      },
+      user: userMockData[id - 1],
       content: generateRandomContent(Math.floor(Math.random() * 300)),
       images: generateRandomImages(),
       likeCount: Math.floor(Math.random() * 1000),

src/app/mocks/data/index.ts

@@ -1 +1,2 @@
 export * from './feed';
+export * from './user';

src/app/mocks/data/user.ts

@@ -0,0 +1,28 @@
+export interface IUser {
+  id: number;
+  profileImage: string;
+  username: string;
+}
+
+function generateRandomUsername(id: number) {
+  const prefixes = ['user', 'player', 'guest', 'member', 'star'];
+  return prefixes[Math.floor(Math.random() * prefixes.length)] + id;
+}
+
+function generateUserMockData(count: number) {
+  const mockUsers: IUser[] = [];
+
+  for (let id = 1; id <= count; id++) {
+    const user = {
+      id,
+      profileImage: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${id - 1}.jpg`,
+      username: generateRandomUsername(id),
+    };
+
+    mockUsers.push(user);
+  }
+
+  return mockUsers;
+}
+
+export const userMockData = generateUserMockData(100);

src/app/mocks/handlers/search.ts

@@ -1,18 +1,19 @@
 import Fuse from 'fuse.js';
 import { http } from 'msw';
 
-import { feedMockData } from '../data';
+import { feedMockData, userMockData } from '../data';
 import { createHttpErrorResponse, createHttpSuccessResponse } from '../lib';
 
 export const searchHandlers = [
+  // 1️⃣ 피드 검색
   http.get('http://api.example.com/v2/feeds', ({ request }) => {
     const url = new URL(request.url);
 
-    const query = url.searchParams.get('query');
+    const target = url.searchParams.get('target');
     const page = Number(url.searchParams.get('page') || 1);
     const size = Number(url.searchParams.get('size') || 15);
 
-    if (!query || query.length < 2) {
+    if (!target || target.length < 2) {
       return createHttpErrorResponse('검색어는 최소 2글자 이상이어야 합니다');
     }
 
@@ -21,7 +22,7 @@ export const searchHandlers = [
     });
 
     const contents = fuse
-      .search(query)
+      .search(target)
       .map((result) => result.item)
       .slice((page - 1) * size, page * size);
     const totalFeeds = contents.length;
@@ -37,4 +38,38 @@ export const searchHandlers = [
       },
     });
   }),
+
+  // 2️⃣ 사용자 검색
+  http.get('http://api.example.com/v2/users', ({ request }) => {
+    const url = new URL(request.url);
+
+    const target = url.searchParams.get('target');
+    const page = Number(url.searchParams.get('page') || 1);
+    const size = Number(url.searchParams.get('size') || 15);
+
+    if (!target || target.length < 2) {
+      return createHttpErrorResponse('검색어는 최소 2글자 이상이어야 합니다');
+    }
+
+    const fuse = new Fuse(userMockData, {
+      keys: ['username'],
+    });
+
+    const contents = fuse
+      .search(target)
+      .map((result) => result.item)
+      .slice((page - 1) * size, page * size);
+    const totalFeeds = contents.length;
+    const hasNextPage = totalFeeds > page * size;
+
+    return createHttpSuccessResponse({
+      user: {
+        contents,
+        currentPageNumber: page,
+        pageSize: size,
+        numberOfElements: contents.length,
+        hasNextPage,
+      },
+    });
+  }),
 ];