Feat: MenuCard, CategoryList UI 구성, React-Query 적용 (#7)

package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.32.0",
     "@types/node": "^20.12.7",
-    "@types/react-query": "^1.2.9",
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-cookie": "^7.1.4",
@@ -21,6 +21,7 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.32.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/App.tsx

@@ -1,14 +1,17 @@
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Outlet } from "react-router-dom";
 import "./App.css";
+import { BasketProvider } from "./context/basketContext";
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <Outlet />
-    </QueryClientProvider>
+    <BasketProvider>
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+      </QueryClientProvider>
+    </BasketProvider>
   );
 }
 

src/apis/apiClient.ts

@@ -20,6 +20,13 @@ export class ApiClient implements menuApi {
     });
     return response.data;
   }
+  async getCategoryMenuList(categoryIdx: number) {
+    const response = await this.axiosInstance.request<MenuType[]>({
+      method: "get",
+      url: `/products/category/${categoryIdx}`,
+    });
+    return response.data;
+  }
 
   static getInstance(): ApiClient {
     return this.instance || (this.instance = new this());

src/apis/interfaces/menuApi.ts

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

src/apis/url.ts

@@ -1 +1 @@
-export const API_BASE_URL = "localhost:8080/api/v1";
+export const API_BASE_URL = "http://localhost:8080/api/v1";

src/components/molecules/Menu.tsx

@@ -0,0 +1,36 @@
+import { FC, useEffect, useState } from "react";
+import { ApiClient } from "../../apis/apiClient";
+import { MenuType } from "../../types/menu";
+import { useSession } from "../../context/basketContext";
+
+interface IProps {
+  menuIdx: number;
+  menuName: string;
+  menuImage: string;
+  menuPrice: number;
+}
+
+const Menu: FC<IProps> = ({ menuIdx, menuName, menuImage, menuPrice }) => {
+  const { addBasket } = useSession();
+
+  return (
+    <div
+      className="px-2 py-1 h-full"
+      onClick={() => {
+        alert("ㅎㅇ");
+      }}
+    >
+      <img className="rounded-lg w-32 h-32 cursor-pointer" src={menuImage} />
+      <div className="flex flex-col justify-between h-20">
+        <p className="font-medium text-left line-clamp-2 cursor-pointer">
+          {menuName}
+        </p>
+        <p className="font-medium inline-block text-left w-full cursor-pointer">
+          {menuPrice.toLocaleString() + "원"}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Menu;

src/components/organisms/CategoryList.tsx

@@ -0,0 +1,14 @@
+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;

src/components/organisms/MenuCard.tsx

@@ -1,10 +1,26 @@
-const MenuCard = () => {
+import { FC } from "react";
+import { MenuType } from "../../types/menu";
+import Menu from "../molecules/Menu";
+
+interface IProps {
+  data?: MenuType[];
+}
+
+const MenuCard: FC<IProps> = ({ data }) => {
   return (
-    <div className="flex flex-row grid grid-cols-4 gap-2 bg-starbucksBeige h-[55vh] ">
-      {/* 메뉴 버튼 영역 */}
-      <div>1공간차지</div>
-      {/* 메뉴 선택 영역 */}
-      <div className="col-span-3">3공간차지</div>
+    <div>
+      <ul className="flex-row grid grid-cols-3 gap-2 bg-starbucksBeige h-[55vh] overflow-y-scroll">
+        {data?.map((menu: MenuType) => (
+          <li key={menu.menuIdx}>
+            <Menu
+              menuIdx={menu.menuIdx}
+              menuName={menu.menuName}
+              menuImage={menu.menuImage}
+              menuPrice={menu.menuPrice}
+            />
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };

src/components/ui/Category.tsx

@@ -3,14 +3,20 @@ import { FC } from "react";
 interface IProps {
   categoryIdx: number;
   categoryName: string;
+  onClick: (idx: number) => void;
 }
 
-const Category: FC<IProps> = ({ categoryIdx, categoryName }) => {
-  const setMenus = (categoryIdx: number) => {
-    // react-query를 사용해서 메뉴리스트 카테고리별로 갱신
-  };
-
-  return <div>dasd</div>;
+const Category: FC<IProps> = ({ categoryIdx, categoryName, onClick }) => {
+  return (
+    <div className="p-2">
+      <button
+        className="w-32 h-16 bg-white rounded-xl"
+        onClick={() => onClick(categoryIdx)}
+      >
+        {categoryName}
+      </button>
+    </div>
+  );
 };
 
 export default Category;

src/pages/Landing.tsx

@@ -4,7 +4,7 @@ const Landing = () => {
   const navigate = useNavigate();
 
   return (
-    <section onClick={() => navigate("/mainPage")}>
+    <section onClick={() => navigate("/menu")}>
       <div className="flex justify-center items-center bg-starbucksGreen h-[75vh]">
         <img src="./../../public/img/logo.png" alt="landing" />
       </div>

src/pages/MenuPage.tsx

@@ -1,7 +1,25 @@
+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";
 
 const MenuPage = () => {
+  const [categoryIdx, setCategoryIdx] = useState<number>(1);
   const navigate = useNavigate();
+  const { isLoading, data } = useQuery({
+    queryKey: ["menus", categoryIdx],
+    queryFn: () => {
+      const res = ApiClient.getInstance().getCategoryMenuList(categoryIdx);
+      return res;
+    },
+  });
+
+  const setCategoryIdxFunc = (idx: number) => {
+    setCategoryIdx(idx);
+  };
 
   return (
     <section className="h-[100vh]">
@@ -12,11 +30,19 @@ const MenuPage = () => {
           alt="banner"
         />
       </div>
-      <div className="flex flex-row grid grid-cols-4 gap-2 bg-starbucksBeige h-[55vh] ">
+      <div className="flex-row grid grid-cols-4 gap-2 bg-starbucksBeige h-[55vh] ">
         {/* 메뉴 버튼 영역 */}
-        <div>1공간차지</div>
+        <div>
+          <Category
+            categoryIdx={2}
+            categoryName={"홍길동"}
+            onClick={() => setCategoryIdxFunc(2)}
+          />
+        </div>
         {/* 메뉴 선택 영역 */}
-        <div className="col-span-3">3공간차지</div>
+        <div className="col-span-3">
+          <MenuCard data={data} />
+        </div>
       </div>
     </section>
   );