diff --git a/frontend/src/api/categories.ts b/frontend/src/api/categories.ts index 9b754f75d..6f7f507e2 100644 --- a/frontend/src/api/categories.ts +++ b/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 => diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index 0e31471cf..891fbf634 100644 --- a/frontend/src/api/index.ts +++ b/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 { diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts index b4da39bef..81c3767ce 100644 --- a/frontend/src/api/templates.ts +++ b/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({ diff --git a/frontend/src/components/CategoryMenu/CategoryMenu.tsx b/frontend/src/components/CategoryMenu/CategoryMenu.tsx index a2c0013fa..1b768380a 100644 --- a/frontend/src/components/CategoryMenu/CategoryMenu.tsx +++ b/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(0); - const indexById: Record = { - 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 = useMemo(() => { + const map: Record = { + 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) => { handleButtonClick(0)} /> - {categories.map(({ id, name }, index) => { - indexById[id] = index + 1; - - return ( - handleButtonClick(id)} /> - ); - })} - - handleButtonClick(CATEGORY.UNASSIGNED_ID)} - /> + {reorderedCategories.map(({ id, name }) => ( + handleButtonClick(id)} /> + ))} - + ); };