Feat: 메뉴 페이지 카테고리 리스트 완성(#7)

src/apis/apiClient.ts

@@ -3,6 +3,7 @@ import { menuApi } from "./interfaces/menuApi";
 import { API_BASE_URL } from "./url";
 import { getCookie } from "../utils/cookie";
 import { MenuType } from "../types/menu";
+import { CategoryType } from "../types/category";
 
 export class ApiClient implements menuApi {
   private static instance: ApiClient;
@@ -27,6 +28,13 @@ export class ApiClient implements menuApi {
     });
     return response.data;
   }
+  async getCategoryList() {
+    const response = await this.axiosInstance.request<CategoryType[]>({
+      method: "get",
+      url: `/products/category`,
+    });
+    return response.data;
+  }
 
   static getInstance(): ApiClient {
     return this.instance || (this.instance = new this());

src/apis/interfaces/menuApi.ts

@@ -1,6 +1,8 @@
+import { CategoryType } from "../../types/category";
 import { MenuType } from "../../types/menu";
 
 export interface menuApi {
   getMenuList(): Promise<MenuType[]>;
   getCategoryMenuList(categoryIdx: number): Promise<MenuType[]>;
+  getCategoryList(): Promise<CategoryType[]>;
 }

src/components/ui/Category.tsx

@@ -7,13 +7,19 @@ interface IProps {
 }
 
 const Category: FC<IProps> = ({ categoryIdx, categoryName, onClick }) => {
+  const nameArr = categoryName.split("/");
+  let newName = nameArr.reduce((accumulator, currentValue) => {
+    return accumulator + currentValue + "\n";
+  }, "");
+  newName.substring(0, newName.length - 1);
+
   return (
     <div className="p-2">
       <button
         className="w-32 h-16 bg-white rounded-xl"
         onClick={() => onClick(categoryIdx)}
       >
-        {categoryName}
+        <p className="whitespace-pre">{newName}</p>
       </button>
     </div>
   );

src/pages/MenuPage.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ApiClient } from "../apis/apiClient";
-import { MenuType } from "../types/menu";
 import { useQuery } from "react-query";
 import MenuCard from "../components/organisms/MenuCard";
 import Category from "../components/ui/Category";
+import { CategoryType } from "../types/category";
 
 const MenuPage = () => {
   const [categoryIdx, setCategoryIdx] = useState<number>(1);
+  const [categoryList, setCategoryList] = useState<CategoryType[]>([]);
   const navigate = useNavigate();
   const { isLoading, data } = useQuery({
     queryKey: ["menus", categoryIdx],
@@ -17,6 +18,15 @@ const MenuPage = () => {
     },
   });
 
+  useEffect(() => {
+    const getCategoryListFunc = async () => {
+      const res = await ApiClient.getInstance().getCategoryList();
+      console.log(res);
+      setCategoryList(res);
+    };
+    getCategoryListFunc();
+  }, []);
+
   const setCategoryIdxFunc = (idx: number) => {
     setCategoryIdx(idx);
   };
@@ -33,17 +43,29 @@ const MenuPage = () => {
       <div className="flex-row grid grid-cols-4 gap-2 bg-starbucksBeige h-[55vh] ">
         {/* 메뉴 버튼 영역 */}
         <div>
-          <Category
-            categoryIdx={2}
-            categoryName={"홍길동"}
-            onClick={() => setCategoryIdxFunc(2)}
-          />
+          <ul className="flex flex-col h-[55vh]">
+            {categoryList?.map((category: CategoryType) => (
+              <li key={category.categoryIdx}>
+                <Category
+                  categoryIdx={category.categoryIdx}
+                  categoryName={category.categoryName}
+                  onClick={() => setCategoryIdxFunc(category.categoryIdx)}
+                />
+              </li>
+            ))}
+          </ul>
         </div>
         {/* 메뉴 선택 영역 */}
         <div className="col-span-3">
           <MenuCard data={data} />
         </div>
       </div>
+      {/* 장바구니 영역 */}
+      <ul className="flex flex-col h-[55vh]">
+        {categoryList?.map((category: CategoryType, index) => (
+          <li key={category.categoryIdx}></li>
+        ))}
+      </ul>
     </section>
   );
 };

src/types/category.d.ts

@@ -0,0 +1,6 @@
+type CategoryType = {
+  categoryIdx: number;
+  categoryName: string;
+};
+
+export { CategoryType };