Merge branch 'feat/signup_login' of https://github.com/Jaymyong66/202…

…4-code-zap into feat/signup_login
woowacourse-teams · Aug 6, 2024 · d92719f · d92719f
2 parents 2bcb00f + cee1851
commit d92719f
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 28 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,6 +1,17 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3LRVC2N26K"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-3LRVC2N26K');
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>code-zap</title>

diff --git 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<CategoryListResponse> =>

diff --git 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
@@ -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
@@ -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>
   );
 };