diff --git a/src/App.tsx b/src/App.tsx
index 65d11f1..3bfef32 100644
--- 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
index 2450f98..cfbb558 100644
--- 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
index 99db3a4..de8d8a6 100644
--- 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
index 83314f4..be7c3d8 100644
--- 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
index 599ea2e..81ace6b 100644
--- 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
index e8241f9..de70268 100644
--- 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,11 +106,11 @@ 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"
@@ -104,7 +118,7 @@ const CustomModal = ({
               />
               <p
                 className={
-                  size == "tall" ? "flex font-bold" : "flex font-normal"
+                  size == "Tall" ? "flex font-bold" : "flex font-normal"
                 }
               >
                 톨
@@ -113,11 +127,11 @@ 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"
@@ -125,7 +139,7 @@ const CustomModal = ({
               />
               <p
                 className={
-                  size == "grande" ? "flex font-bold" : "flex font-normal"
+                  size == "Grande" ? "flex font-bold" : "flex font-normal"
                 }
               >
                 그란데
@@ -134,11 +148,11 @@ 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"
@@ -146,7 +160,7 @@ const CustomModal = ({
               />
               <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
new file mode 100644
index 0000000..35e6f80
--- /dev/null
+++ 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 b/src/hooks/basketContext.tsx
similarity index 81%
rename from src/context/basketContext.tsx
rename to src/hooks/basketContext.tsx
index 348f19c..3207433 100644
--- a/src/context/basketContext.tsx
+++ b/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;
         }
diff --git a/src/pages/MenuPage.tsx b/src/pages/MenuPage.tsx
index 25a4f7c..832ecc5 100644
--- a/src/pages/MenuPage.tsx
+++ b/src/pages/MenuPage.tsx
@@ -6,14 +6,17 @@ import Category from "../components/ui/Category";
 import { CategoryType } from "../types/category";
 import CustomModal from "../components/organisms/CustomModal";
 import { BasketMenuType } from "../types/menu";
-import { useSession } from "../context/basketContext";
+import { useSession } from "../hooks/basketContext";
 import BasketMenu from "../components/molecules/BasketMenu";
 import BasketCard from "../components/organisms/BasketCard";
+import RecommendationModal from "../components/organisms/RecommendationModal";
 
 const MenuPage = () => {
   const [categoryIdx, setCategoryIdx] = useState<number>(1);
   const [categoryList, setCategoryList] = useState<CategoryType[]>([]);
   const [openModal, setOpenModal] = useState(false);
+  const [openModal2, setOpenModal2] = useState(false);
+  const [fromRecommend, setFromRecommend] = useState(false);
   const [selectedMenu, setSelectedMenu] = useState<BasketMenuType>();
   const [count, setCount] = useState<number>(1);
 
@@ -43,6 +46,10 @@ const MenuPage = () => {
     setOpenModal(true);
   };
 
+  const setOpenModal2Func = () => {
+    setOpenModal2(true);
+  };
+
   const setMenuFunc = (menu: BasketMenuType) => {
     setSelectedMenu(menu);
   };
@@ -51,6 +58,13 @@ const MenuPage = () => {
     setCount(count + 1);
   };
 
+  const clickConfirm = () => {
+    if (basket.basketList.length == 0) {
+      return;
+    }
+    setOpenModal2(!openModal2);
+  };
+
   return (
     <section className="h-[100vh]">
       <div className="relative">
@@ -59,8 +73,21 @@ const MenuPage = () => {
             <CustomModal
               message={"선택하신 음료의 온도와 사이즈를 선택해주세요."}
               modalToggle={() => setOpenModal(!openModal)}
+              modalToggle2={() => setOpenModal2(!openModal2)}
               menu={selectedMenu!}
               setCountFunc={setCountFunc}
+              fromRecommend={fromRecommend}
+            />
+          )}
+          {openModal2 && (
+            <RecommendationModal
+              message="더 맛있는 메뉴를 확인해보세요!"
+              modalToggle={() => setOpenModal(!openModal)}
+              modalToggle2={() => setOpenModal2(!openModal2)}
+              setMenuFunc={setCountFunc}
+              setFromRecommend={() => setFromRecommend(!fromRecommend)}
+              count={count}
+              setCountFunc={setCountFunc}
             />
           )}
         </div>
@@ -121,7 +148,7 @@ const MenuPage = () => {
             <div className="flex justify-center">
               <button
                 className="w-32 h-20 bg-starbucksGreen rounded-xl"
-                onClick={() => alert("검사")}
+                onClick={() => clickConfirm()}
               >
                 <p className="text-white">주문완료</p>
               </button>