백엔드 API 명세에 따른 리팩토링

frontend/src/api/categories.ts

@@ -3,10 +3,6 @@ import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL;
 
-export const CATEGORY = {
-  UNASSIGNED_ID: 1,
-};
-
 export const CATEGORY_API_URL = `${API_URL}/categories`;
 
 export const getCategoryList = async (): Promise<CategoryListResponse> =>

frontend/src/api/index.ts

@@ -1,4 +1,4 @@
-export { CATEGORY, CATEGORY_API_URL, getCategoryList, postCategory } from './categories';
+export { CATEGORY_API_URL, getCategoryList, postCategory } from './categories';
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export {

frontend/src/api/templates.ts

@@ -14,14 +14,14 @@ export const getTemplateList = async (
   const url = new URL(TEMPLATE_API_URL);
 
   if (categoryId) {
-    url.searchParams.append('category', categoryId.toString());
+    url.searchParams.append('categoryId', categoryId.toString());
   }
 
   if (tagId) {
-    url.searchParams.append('tag', tagId.toString());
+    url.searchParams.append('tags', tagId.toString());
   }
 
-  url.searchParams.append('page', page.toString());
+  url.searchParams.append('pageNumber', page.toString());
   url.searchParams.append('pageSize', pageSize.toString());
 
   return await customFetch({

frontend/src/components/CategoryMenu/CategoryMenu.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import { CATEGORY } from '@/api';
 import { Text } from '@/components';
 import { theme } from '@/style/theme';
 import type { Category } from '@/types';
@@ -20,10 +19,27 @@ interface ButtonProps {
 const CategoryMenu = ({ categories, onSelectCategory }: MenuProps) => {
   const [selectedId, setSelectedId] = useState<number>(0);
 
-  const indexById: Record<number, number> = {
-    0: 0,
-    1: categories.length + 1,
-  };
+  const reorderedCategories = useMemo(() => {
+    if (categories.length === 0) {
+      return [];
+    }
+
+    const [first, ...rest] = categories;
+
+    return [...rest, first];
+  }, [categories]);
+
+  const indexById: Record<number, number> = useMemo(() => {
+    const map: Record<number, number> = {
+      0: 0,
+    };
+
+    reorderedCategories.forEach(({ id }, index) => {
+      map[id] = index + 1;
+    });
+
+    return map;
+  }, [reorderedCategories]);
 
   const handleButtonClick = (id: number) => {
     setSelectedId(id);
@@ -34,21 +50,11 @@ const CategoryMenu = ({ categories, onSelectCategory }: MenuProps) => {
     <S.CategoryContainer>
       <CategoryButton name='전체보기' disabled={selectedId === 0} onClick={() => handleButtonClick(0)} />
 
-      {categories.map(({ id, name }, index) => {
-        indexById[id] = index + 1;
-
-        return (
-          <CategoryButton key={id} name={name} disabled={selectedId === id} onClick={() => handleButtonClick(id)} />
-        );
-      })}
-
-      <CategoryButton
-        name='카테고리 미지정'
-        disabled={selectedId === CATEGORY.UNASSIGNED_ID}
-        onClick={() => handleButtonClick(CATEGORY.UNASSIGNED_ID)}
-      />
+      {reorderedCategories.map(({ id, name }) => (
+        <CategoryButton key={id} name={name} disabled={selectedId === id} onClick={() => handleButtonClick(id)} />
+      ))}
 
-      <S.HighlightBox selectedIndex={indexById[selectedId]} categoryCount={categories.length + 2} />
+      <S.HighlightBox selectedIndex={indexById[selectedId]} categoryCount={reorderedCategories.length + 1} />
     </S.CategoryContainer>
   );
 };