Feat: 메뉴 페이지 기능 완성 (#7)

Digital-Hana-Starbucks · May 8, 2024 · 50104ad · 50104ad
1 parent a0a5a97
commit 50104ad
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 31 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Outlet } from "react-router-dom";
 import "./App.css";
-import { BasketProvider } from "./context/basketContext";
+import { BasketProvider } from "./hooks/basketContext";
 
 const queryClient = new QueryClient();
 

diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts
@@ -35,6 +35,13 @@ export class ApiClient implements menuApi {
     });
     return response.data;
   }
+  async getRecommendationList() {
+    const response = await this.axiosInstance.request<MenuType[]>({
+      method: "get",
+      url: `/products/recommendations`,
+    });
+    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
@@ -5,4 +5,5 @@ export interface menuApi {
   getMenuList(): Promise<MenuType[]>;
   getCategoryMenuList(categoryIdx: number): Promise<MenuType[]>;
   getCategoryList(): Promise<CategoryType[]>;
+  getRecommendationList(): Promise<MenuType[]>;
 }
diff --git a/src/components/molecules/BasketMenu.tsx b/src/components/molecules/BasketMenu.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { BasketMenuType, MenuType } from "../../types/menu";
-import { useSession } from "../../context/basketContext";
+import { useSession } from "../../hooks/basketContext";
 
 interface IProps {
   basketIdx: number;
@@ -55,7 +55,11 @@ const BasketMenu: FC<IProps> = ({
             </p>
             <div className="flex">
               <div
-                className="flex justify-center items-center w-5 h-5 border-2 border-gray-200 bg-white cursor-pointer"
+                className={
+                  orderDetailCount == 1
+                    ? "flex justify-center items-center w-5 h-5 border-2 border-gray-200 bg-slate-100"
+                    : "flex justify-center items-center w-5 h-5 border-2 border-gray-200 bg-white cursor-pointer"
+                }
                 onClick={() => clickMinus()}
               >
                 -

diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { BasketMenuType, MenuType } from "../../types/menu";
-import { useSession } from "../../context/basketContext";
+import { useSession } from "../../hooks/basketContext";
 
 interface IProps {
   menuIdx: number;

diff --git a/src/components/organisms/CustomModal.tsx b/src/components/organisms/CustomModal.tsx
@@ -1,20 +1,24 @@
 import React, { useRef, useState } from "react";
 import { BasketMenuType } from "../../types/menu";
-import { useSession } from "../../context/basketContext";
+import { useSession } from "../../hooks/basketContext";
 
 const CustomModal = ({
   message,
   modalToggle,
+  modalToggle2,
   menu,
   setCountFunc,
+  fromRecommend,
 }: {
   message: string;
   modalToggle: () => void;
+  modalToggle2: () => void;
   menu: BasketMenuType;
   setCountFunc: () => void;
+  fromRecommend: boolean;
 }) => {
-  const [temper, setTemper] = useState("hot");
-  const [size, setSize] = useState("tall");
+  const [temper, setTemper] = useState("HOT");
+  const [size, setSize] = useState("Tall");
 
   const { addBasket } = useSession();
 
@@ -26,10 +30,17 @@ const CustomModal = ({
     setSize(clickedSize);
   };
 
+  const clickClose = () => {
+    modalToggle();
+    if (fromRecommend) {
+      modalToggle2();
+    }
+  };
+
   const clickConfirm = () => {
-    if (size == "grande") {
+    if (size == "Grande") {
       menu.menuPrice += 500;
-    } else if (size == "venti") {
+    } else if (size == "Venti") {
       menu.menuPrice += 1000;
     }
 
@@ -45,6 +56,9 @@ const CustomModal = ({
     });
     setCountFunc();
     modalToggle();
+    if (fromRecommend) {
+      modalToggle2();
+    }
   };
 
   return (
@@ -54,7 +68,7 @@ const CustomModal = ({
           <img
             className="flex w-3 h-3 cursor-pointer"
             src="./../../public/img/closeWhite.png"
-            onClick={() => modalToggle()}
+            onClick={() => clickClose()}
           />
         </div>
         <div className="flex flex-col justify-center bg-starbucksGreen text-white w-full h-24">
@@ -66,21 +80,21 @@ const CustomModal = ({
           <div className="mt-3 flex gap-6">
             <div
               className={
-                temper == "hot"
+                temper == "HOT"
                   ? "flex rounded-lg justify-center items-center cursor-pointer bg-red-500 w-32 h-32"
                   : "flex rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32"
               }
-              onClick={() => clickTemp("hot")}
+              onClick={() => clickTemp("HOT")}
             >
               HOT
             </div>
             <div
               className={
-                temper == "ice"
+                temper == "ICE"
                   ? "flex rounded-lg justify-center items-center cursor-pointer bg-blue-700 w-32 h-32"
                   : "flex rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32"
               }
-              onClick={() => clickTemp("ice")}
+              onClick={() => clickTemp("ICE")}
             >
               ICE
             </div>
@@ -92,19 +106,19 @@ const CustomModal = ({
           <div className="mt-3 flex gap-6">
             <div
               className={
-                size == "tall"
+                size == "Tall"
                   ? "flex flex-col pt-3 rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32 border-2 border-starbucksGreen"
                   : "flex flex-col pt-3 rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32"
               }
-              onClick={() => clickSize("tall")}
+              onClick={() => clickSize("Tall")}
             >
               <img
                 className="flex w-12 h-12"
                 src="./../../public/img/grande.png"
               />
               <p
                 className={
-                  size == "tall" ? "flex font-bold" : "flex font-normal"
+                  size == "Tall" ? "flex font-bold" : "flex font-normal"
                 }
               >
                 톨
@@ -113,19 +127,19 @@ const CustomModal = ({
             </div>
             <div
               className={
-                size == "grande"
+                size == "Grande"
                   ? "flex flex-col pt-2 rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32 border-2 border-starbucksGreen"
                   : "flex flex-col pt-2 rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32"
               }
-              onClick={() => clickSize("grande")}
+              onClick={() => clickSize("Grande")}
             >
               <img
                 className="flex w-14 h-14"
                 src="./../../public/img/grande.png"
               />
               <p
                 className={
-                  size == "grande" ? "flex font-bold" : "flex font-normal"
+                  size == "Grande" ? "flex font-bold" : "flex font-normal"
                 }
               >
                 그란데
@@ -134,19 +148,19 @@ const CustomModal = ({
             </div>
             <div
               className={
-                size == "venti"
+                size == "Venti"
                   ? "flex flex-col pt-1 rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32 border-2 border-starbucksGreen"
                   : "flex flex-col pt-1 rounded-lg justify-center items-center cursor-pointer bg-starbucksBeige w-32 h-32"
               }
-              onClick={() => clickSize("venti")}
+              onClick={() => clickSize("Venti")}
             >
               <img
                 className="flex w-16 h-16"
                 src="./../../public/img/grande.png"
               />
               <p
                 className={
-                  size == "venti" ? "flex font-bold" : "flex font-normal"
+                  size == "Venti" ? "flex font-bold" : "flex font-normal"
                 }
               >
                 벤티

diff --git a/src/components/organisms/RecommendationModal.tsx b/src/components/organisms/RecommendationModal.tsx
@@ -0,0 +1,70 @@
+import React, { useRef, useState } from "react";
+import { BasketMenuType } from "../../types/menu";
+import { useSession } from "../../hooks/basketContext";
+import { useQuery } from "react-query";
+import { ApiClient } from "../../apis/apiClient";
+import MenuCard from "./MenuCard";
+
+const RecommendationModal = ({
+  message,
+  modalToggle,
+  modalToggle2,
+  setMenuFunc,
+  setFromRecommend,
+  count,
+  setCountFunc,
+}: {
+  message: string;
+  modalToggle: () => void;
+  modalToggle2: () => void;
+  setMenuFunc: () => void;
+  setFromRecommend: () => void;
+  count: number;
+  setCountFunc: () => void;
+}) => {
+  const clickConfirm = () => {
+    modalToggle2();
+  };
+
+  const { isLoading, data } = useQuery({
+    queryKey: ["recommendations"],
+    queryFn: () => {
+      const res = ApiClient.getInstance().getRecommendationList();
+      return res;
+    },
+  });
+
+  return (
+    <div className="fixed flex flex-col justify-center items-center w-[585px] h-full bg-black bg-opacity-50">
+      <div className="relative flex flex-col w-5/6 h-5/6 rounded-xl bg-white gap-6">
+        <div className="absolute top-2 left-[465px] w-full justify-end">
+          <img
+            className="flex w-3 h-3 cursor-pointer"
+            src="./../../public/img/closeWhite.png"
+            onClick={() => modalToggle2()}
+          />
+        </div>
+        <div className="flex flex-col justify-center bg-starbucksGreen text-white w-full h-24">
+          {message}
+        </div>
+        <MenuCard
+          data={data}
+          setMenuFunc={setMenuFunc}
+          setOpenModalFunc={() => modalToggle()}
+          count={count}
+          setCountFunc={setCountFunc}
+        />
+        <div className="flex justify-center items-center w-full">
+          <div
+            className="mt-12 flex justify-center align-middle items-center rounded-lg text-white bg-starbucksGreen w-2/3 h-10 cursor-pointer"
+            onClick={() => clickConfirm()}
+          >
+            선택 완료
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecommendationModal;
diff --git a/src/context/basketContext.tsx → src/hooks/basketContext.tsx b/src/context/basketContext.tsx → src/hooks/basketContext.tsx
@@ -80,10 +80,16 @@ const reducer = (basket: BasketType, { type, payload }: Action): BasketType => {
 
     case "plusMenu":
       for (let i = 0; i < basket.basketList.length; i++) {
-        let menu = basket.basketList[i];
+        let menu = { ...basket.basketList[i] };
         if (menu.basketIdx == payload) {
-          newer = [...basket.basketList];
-          newer[i].orderDetailCount++;
+          i == basket.basketList.length - 1
+            ? (newer = basket.basketList.slice(0, i))
+            : (newer = [
+                ...basket.basketList.slice(0, i),
+                ...basket.basketList.slice(i + 1, basket.basketList.length),
+              ]);
+          menu.orderDetailCount = basket.basketList[i].orderDetailCount + 1;
+          newer.splice(i, 0, menu);
           newer2 += menu.menuPrice;
           break;
         }
@@ -92,10 +98,16 @@ const reducer = (basket: BasketType, { type, payload }: Action): BasketType => {
 
     case "minusMenu":
       for (let i = 0; i < basket.basketList.length; i++) {
-        let menu = basket.basketList[i];
+        let menu = { ...basket.basketList[i] };
         if (menu.basketIdx == payload) {
-          newer = [...basket.basketList];
-          newer[i].orderDetailCount--;
+          i == basket.basketList.length - 1
+            ? (newer = basket.basketList.slice(0, i))
+            : (newer = [
+                ...basket.basketList.slice(0, i),
+                ...basket.basketList.slice(i + 1, basket.basketList.length),
+              ]);
+          menu.orderDetailCount = basket.basketList[i].orderDetailCount - 1;
+          newer.splice(i, 0, menu);
           newer2 -= menu.menuPrice;
           break;
         }