[리팩터링] CategorySortButton관련 스타일 및 로직 수정 (#320)

* feat(api): 전체 카테고리 서치 로직
추가

* feat(lib-utility): isArrayEmpty

* feat(lib-utility): routerHelper

* style(molecules-buttons): 카테고리 버튼 스타일 수정

* fix(organisms-list): 파일명 변경 sticky옵션으로 top-0에 붙도록 설정

* fix(hooks-react-query): api 수정 반영

* fix: 내보내기 수정

* fix: 필요없는 코드 삭제

* fix: 코드 수정 반영

* style(common-organisms): 위치값 수정

* fix: _app 위치값 삭제

Author: MINJE-98

lib/api/category/categoryService.ts

@@ -7,6 +7,9 @@ import {
   GetUserCategoriesResponseDto,
 } from "@til-log.lab/tilog-api";
 
+import GetCategoryListInterface from "@Library/api/category/interface/GetCategoryListInterface";
+import ExceptionInterface from "@Library/api/exception/interface";
+
 export default class CategoryService {
   constructor(
     private readonly categoryRepository: CategoryRepository,
@@ -15,7 +18,7 @@ export default class CategoryService {
   getCategories(
     categoryName?: string,
     options?: AxiosRequestConfig
-  ): Promise<AxiosResponse<GetCategoriesResponseDto, any>> {
+  ): Promise<AxiosResponse<GetCategoriesResponseDto, ExceptionInterface>> {
     return this.categoryRepository.categoriesControllerGetCategories(
       categoryName,
       options
@@ -24,10 +27,31 @@ export default class CategoryService {
   getUsersCategories(
     userId: number,
     options?: AxiosRequestConfig
-  ): Promise<AxiosResponse<GetUserCategoriesResponseDto, any>> {
+  ): Promise<AxiosResponse<GetUserCategoriesResponseDto, ExceptionInterface>> {
     return this.categoryRepository.categoriesControllerGetUsersCategories(
       userId,
       options
     );
   }
+
+  getCategoryList({
+    userId,
+    options,
+  }: GetCategoryListInterface): Promise<
+    AxiosResponse<
+      GetUserCategoriesResponseDto | GetCategoriesResponseDto,
+      ExceptionInterface
+    >
+  > {
+    if (userId) {
+      return this.categoryRepository.categoriesControllerGetUsersCategories(
+        userId,
+        options
+      );
+    }
+    return this.categoryRepository.categoriesControllerGetCategories(
+      undefined,
+      options
+    );
+  }
 }

lib/api/category/interface/GetCategoryListInterface.ts

@@ -0,0 +1,6 @@
+import { AxiosRequestConfig } from "axios";
+
+export default interface GetCategoryListInterface {
+  userId?: number;
+  options?: AxiosRequestConfig;
+}

lib/utility/isArrayEmpty.ts

@@ -0,0 +1,6 @@
+const isArrayEmpty = <ArrayType>(array: ArrayType[]): boolean => {
+  if (array.length === 0) return true;
+  return false;
+};
+
+export default isArrayEmpty;

lib/utility/routerHelper.ts

@@ -0,0 +1,12 @@
+const routerHelper = (href: string, targetName: string, target: string) => {
+  return (
+    href
+      // 1. target이 & 일경우 그냥 다 날려주면 됩니다.
+      .replace(`&${targetName}=${target}`, "")
+      // 2. target이 ? 일경우 &를 찾아서 ?로 변경해줘야합니다.
+      .replace(`?${targetName}=${target}`, "")
+      .replace("&", "?")
+  );
+};
+
+export default routerHelper;

src/components/common/molecules/buttons/CategorySortButton.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import React from "react";
 
 import LinkTo from "@Components/common/atom/LinkTo";
+import routerHelper from "@Library/utility/routerHelper";
 
 interface CategorySortButtonProps {
   categoryName: string;
@@ -18,22 +19,19 @@ const CategorySortButton = ({ categoryName }: CategorySortButtonProps) => {
           pathname: router.pathname,
           query: { ...router.query, category: categoryName },
         }}
-        className="p-2 text-sm font-semibold rounded-sm hover:no-underline font-eng-sub-font-2 bg-neutral-50 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-700"
+        className="p-2 text-lg font-semibold hover:no-underline text-neutral-400 dark:text-neutral-50"
       >
-        <span className={`text-${categoryName}`}># </span>
-        <span className="text-neutral-900 dark:text-neutral-50">
-          {categoryName}
-        </span>
+        {categoryName}
       </LinkTo>
     );
   }
   return (
     <LinkTo
       scroll={false}
-      href={`${router.asPath.split("?")[0]}`}
-      className="p-2 text-sm font-semibold rounded-sm hover:no-underline font-eng-sub-font-2 bg-neutral-50 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-700"
+      href={`${routerHelper(router.asPath, "category", categoryName)}`}
+      className="p-2 text-lg font-semibold hover:no-underline text-neutral-800 dark:text-neutral-400"
     >
-      <span className={`text-${categoryName}`}># {categoryName}</span>
+      {categoryName}
     </LinkTo>
   );
 };

src/components/common/organisms/list/CategoryButtonList.tsx

@@ -0,0 +1,32 @@
+import Spinner from "@Components/common/atom/loading/Spinner";
+import CategorySortButton from "@Components/common/molecules/buttons/CategorySortButton";
+import useGetAllCategoryListQuery from "@Hooks/react-query/category/useGetAllCategoryListQuery";
+import isArrayEmpty from "@Library/utility/isArrayEmpty";
+
+import { GetMeResponseDto } from "@til-log.lab/tilog-api";
+
+const CategorySortButtonList = ({
+  userId,
+}: {
+  userId?: GetMeResponseDto["userId"];
+}) => {
+  const categoryList = useGetAllCategoryListQuery({ userId });
+  if (categoryList.isLoading) return <Spinner size="10" />;
+  if (categoryList.isError) return <div>{categoryList.error.message.ko}</div>;
+  if (!categoryList.data) return null;
+  if (isArrayEmpty(categoryList.data.data.list))
+    return <h2 className="text-base">카테고리가 존재하지 않아요.</h2>;
+
+  return (
+    <div className="sticky top-0 z-10 border-b border-neutral-300 bg-neutral-50 dark:bg-neutral-900">
+      <div className="m-auto max-w-[1280px] items-center px-5">
+        <div className="py-3 overflow-y-auto scrollbar-hide">
+          {categoryList.data.data.list.map((category) => (
+            <CategorySortButton categoryName={category.categoryName} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CategorySortButtonList;

src/components/common/organisms/list/CategorySortButtonList.tsx

@@ -1,5 +1,5 @@
+import CategorySortButtonList from "@Components/common/organisms/list/CategorySortButtonList";
 import PostCardList from "@Components/common/organisms/list/PostCardList";
-import UserCategoryButtonList from "@Components/common/organisms/list/UserCategoryButtonList";
 import UserInfoProfile from "@Components/common/organisms/profile/UserInfoProfile";
 
-export { UserCategoryButtonList, UserInfoProfile, PostCardList };
+export { CategorySortButtonList, UserInfoProfile, PostCardList };