From d9f7c73d409f948502659357f729f6efc228ba8c Mon Sep 17 00:00:00 2001
From: abcxj123 <abcxj123@naver.com>
Date: Fri, 3 May 2024 15:19:51 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A9=94=EB=89=B4=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=99=84=EC=84=B1(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/apiClient.ts                     |  8 ++++++
 src/apis/interfaces/menuApi.ts            |  2 ++
 src/components/organisms/CategoryList.tsx | 14 ----------
 src/components/ui/Category.tsx            |  8 +++++-
 src/pages/MenuPage.tsx                    | 34 +++++++++++++++++++----
 src/types/category.d.ts                   |  6 ++++
 6 files changed, 51 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/organisms/CategoryList.tsx
 create mode 100644 src/types/category.d.ts

diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts
index 6fb5f04..2450f98 100644
--- a/src/apis/apiClient.ts
+++ b/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());
diff --git a/src/apis/interfaces/menuApi.ts b/src/apis/interfaces/menuApi.ts
index fa69bea..99db3a4 100644
--- a/src/apis/interfaces/menuApi.ts
+++ b/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[]>;
 }
diff --git a/src/components/organisms/CategoryList.tsx b/src/components/organisms/CategoryList.tsx
deleted file mode 100644
index f5f83d3..0000000
--- a/src/components/organisms/CategoryList.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { ApiClient } from "../../apis/apiClient";
-import { MenuType } from "../../types/menu";
-
-interface IProps {
-  categoryIdx: number;
-  categoryName: string;
-}
-
-const CategoryList: FC<IProps> = ({}) => {
-  return <div></div>;
-};
-
-export default CategoryList;
diff --git a/src/components/ui/Category.tsx b/src/components/ui/Category.tsx
index d92743a..074eb6f 100644
--- a/src/components/ui/Category.tsx
+++ b/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>
   );
diff --git a/src/pages/MenuPage.tsx b/src/pages/MenuPage.tsx
index 73fd366..c92078f 100644
--- a/src/pages/MenuPage.tsx
+++ b/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>
   );
 };
diff --git a/src/types/category.d.ts b/src/types/category.d.ts
new file mode 100644
index 0000000..6c059fe
--- /dev/null
+++ b/src/types/category.d.ts
@@ -0,0 +1,6 @@
+type CategoryType = {
+  categoryIdx: number;
+  categoryName: string;
+};
+
+export { CategoryType };