✨ 피드 검색 모킹 API Handler 추가

.gitignore

@@ -37,4 +37,7 @@ next-env.d.ts
 
 *storybook.log
 /storybook-static
-*.log
+*.log
+
+
+pull_request.md

app/page.tsx

@@ -1,23 +1,8 @@
-import axios from 'axios';
-
 import IconArrowFront from '/public/assets/icon/arrow-front.svg';
 
 import { PageContainer } from '@/widgets/pageContainer/ui/PageContainer';
 
-type User = {
-  firstName: string;
-  lastName: string;
-};
-
-async function getUser() {
-  const result = await axios.get('https://api.example.com/user');
-  const user = result.data as User;
-  return user;
-}
-
 export default async function Home() {
-  const user = await getUser();
-
   return (
     <PageContainer
       headerProps={{
@@ -27,7 +12,6 @@ export default async function Home() {
       }}
     >
       <div className="mt-[44px] flex flex-col justify-center gap-12 bg-[#666666]">
-        <p id="server-side-greeting">Hello, {user.firstName}!</p>
         <div className="w-72">
           <p className="bg-white text-black">White</p>
           <p className="bg-gray01 text-black">Gray 01</p>

package.json

@@ -51,6 +51,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-storybook": "^0.9.0",
+    "fuse.js": "^7.0.0",
     "globals": "^15.10.0",
     "husky": "^9.1.6",
     "jsdom": "^25.0.1",

src/app/mocks/browser.ts

@@ -1,5 +1,5 @@
 import { setupWorker } from 'msw/browser';
 
-import { handlers } from './exam/handlers';
+import { searchHandlers } from './handlers';
 
-export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...searchHandlers);

src/app/mocks/data/feed.ts

@@ -0,0 +1,80 @@
+interface IImage {
+  id: number;
+  imageUrl: string;
+}
+
+interface IFeed {
+  id: number;
+
+  user: {
+    id: number;
+    profileImage: string;
+    username: string;
+  };
+
+  content: string;
+  images: IImage[];
+
+  likeCount: number;
+  commentCount: number;
+
+  isLiked: boolean;
+  isBookmarked: boolean;
+
+  createdAt: string;
+  updatedAt: string;
+}
+
+function generateRandomContent(length: number) {
+  const words = 'Lorem ipsum dolor sit amet consectetur adipiscing elit'.split(' ');
+  let content = '';
+
+  for (let i = 0; i < length; i++) {
+    content += words[Math.floor(Math.random() * words.length)] + ' ';
+  }
+
+  return content.trim();
+}
+
+function generateRandomImages() {
+  const imageCount = Math.floor(Math.random() * 4);
+  const images: IImage[] = [];
+
+  for (let id = 1; id <= imageCount; id++) {
+    images.push({
+      id,
+      imageUrl: `https://picsum.photos/id/${id}/200/300`,
+    });
+  }
+
+  return images;
+}
+
+function generateFeedMockData(count: number) {
+  const mockFeeds: IFeed[] = [];
+
+  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}`,
+      },
+      content: generateRandomContent(Math.floor(Math.random() * 300)),
+      images: generateRandomImages(),
+      likeCount: Math.floor(Math.random() * 1000),
+      commentCount: Math.floor(Math.random() * 500),
+      isLiked: Math.random() < 0.5,
+      isBookmarked: Math.random() < 0.5,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    mockFeeds.push(feed);
+  }
+
+  return mockFeeds;
+}
+
+export const feedMockData = generateFeedMockData(100);

src/app/mocks/data/index.ts

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

src/app/mocks/handlers/index.ts

@@ -0,0 +1 @@
+export * from './search';

src/app/mocks/handlers/search.ts

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

src/app/mocks/index.ts

@@ -1,3 +1,2 @@
 export { MSWProvider } from './MswProvider';
-export type { User } from './exam/handlers';
 export { server } from './node';

src/app/mocks/lib/index.ts

@@ -0,0 +1 @@
+export * from './response';

src/app/mocks/lib/response.ts

@@ -0,0 +1,31 @@
+import { HttpResponse, delay } from 'msw';
+
+/**
+ * @description Mocking API의 Success 응답을 생성하는 메서드
+ */
+export async function createHttpSuccessResponse<T>(data: T) {
+  await delay();
+
+  return HttpResponse.json(
+    {
+      code: '2000',
+      data,
+    },
+    { status: 200 },
+  );
+}
+
+/**
+ * @description Mocking API의 Error 응답을 생성하는 메서드
+ */
+export async function createHttpErrorResponse(errorMessage: string) {
+  await delay();
+
+  return HttpResponse.json(
+    {
+      code: '5200',
+      message: errorMessage,
+    },
+    { status: 200 },
+  );
+}

src/app/mocks/node.ts

@@ -1,5 +1,3 @@
 import { setupServer } from 'msw/node';
 
-import { handlers } from './exam/handlers';
-
-export const server = setupServer(...handlers);
+export const server = setupServer();