From a7f7c728c8c0ed052a3b907191e834d9bb908007 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= Date: Tue, 6 Aug 2024 20:46:25 +0900 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20GA=20tag=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/public/index.html b/frontend/public/index.html index 9a5e7dc97..08819d704 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,6 +1,17 @@ + + + code-zap From 9024e9b453a6982aa246080858cbae76d9c8ce4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=94=ED=95=98?= Date: Tue, 6 Aug 2024 20:52:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor(src):=20=EB=B0=B1=EC=97=94?= =?UTF-8?q?=EB=93=9C=20API=20=EB=AA=85=EC=84=B8=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/categories.ts | 4 -- frontend/src/api/index.ts | 2 +- frontend/src/api/templates.ts | 6 +-- .../components/CategoryMenu/CategoryMenu.tsx | 46 +++++++++++-------- 4 files changed, 30 insertions(+), 28 deletions(-) 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)} /> + ))} - + ); };