Merge pull request #318 from vi-wolhwa/feat/my-templates-search

'내 템플릿' 페이지 검색 기능 구현

frontend/src/api/index.ts

@@ -3,6 +3,7 @@ export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export {
   TEMPLATE_API_URL,
+  PAGE_SIZE,
   getTemplateList,
   getTemplate,
   postTemplate,

frontend/src/api/templates.ts

@@ -1,24 +1,35 @@
-import type { Template, TemplateEditRequest, TemplateListResponse, TemplateUploadRequest } from '@/types';
+import type {
+  Template,
+  TemplateEditRequest,
+  TemplateListResponse,
+  TemplateUploadRequest,
+  TemplateListRequest,
+} from '@/types';
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL;
 
 export const TEMPLATE_API_URL = `${API_URL}/templates`;
 
-export const getTemplateList = async (
-  categoryId?: number,
-  tagId?: number,
-  page: number = 1,
-  pageSize: number = 20,
-): Promise<TemplateListResponse> => {
+export const PAGE_SIZE = 20;
+
+export const getTemplateList = async ({
+  categoryId,
+  tagIds,
+  page = 1,
+  pageSize = PAGE_SIZE,
+  keyword = '',
+}: TemplateListRequest): Promise<TemplateListResponse> => {
   const url = new URL(TEMPLATE_API_URL);
 
+  url.searchParams.append('keyword', keyword);
+
   if (categoryId) {
     url.searchParams.append('categoryId', categoryId.toString());
   }
 
-  if (tagId) {
-    url.searchParams.append('tags', tagId.toString());
+  if (tagIds) {
+    url.searchParams.append('tagIds', tagIds.toString());
   }
 
   url.searchParams.append('pageNumber', page.toString());

frontend/src/hooks/index.ts

@@ -1 +1,2 @@
 export { useWindowWidth } from './useWindowWidth';
+export { useDebounce } from './utils/useDebounce';

frontend/src/hooks/utils/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export const useDebounce = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};

frontend/src/mocks/categoryList.json

@@ -1,5 +1,9 @@
 {
   "categories": [
+    {
+      "id": 1,
+      "name": "카테고리 없음"
+    },
     {
       "id": 2,
       "name": "Category1"

frontend/src/mocks/handlers.ts

@@ -17,20 +17,30 @@ import mockTemplateList from './templateList.json';
 export const templateHandlers = [
   http.get(`${TEMPLATE_API_URL}`, (req) => {
     const url = new URL(req.request.url);
-    const categoryId = url.searchParams.get('category');
-    const tagId = url.searchParams.get('tag');
+    const keyword = url.searchParams.get('keyword');
+    const categoryId = url.searchParams.get('categoryId');
+    const tagIds = url.searchParams.get('tagIds');
     const page = parseInt(url.searchParams.get('page') || '1', 10);
     const pageSize = parseInt(url.searchParams.get('pageSize') || '20', 10);
 
     let filteredTemplates = mockTemplateList.templates;
 
+    if (keyword) {
+      filteredTemplates = filteredTemplates.filter(
+        (template) =>
+          template.title.includes(keyword) ||
+          template.description.includes(keyword) ||
+          template.snippets.some((snippet) => snippet.content.includes(keyword)),
+      );
+    }
+
     if (categoryId) {
       filteredTemplates = filteredTemplates.filter((template) => template.category.id.toString() === categoryId);
     }
 
-    if (tagId) {
+    if (tagIds) {
       filteredTemplates = filteredTemplates.filter((template) =>
-        template.tags.some((tag) => tag.id.toString() === tagId),
+        template.tags.some((tag) => tagIds.split(',').includes(tag.id.toString())),
       );
     }