From 50104ad24ff73bea9f0a0ce86fdf08fe844c1043 Mon Sep 17 00:00:00 2001 From: abcxj123 Date: Wed, 8 May 2024 11:28:19 +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=EA=B8=B0=EB=8A=A5=20=EC=99=84=EC=84=B1=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/apis/apiClient.ts | 7 ++ src/apis/interfaces/menuApi.ts | 1 + src/components/molecules/BasketMenu.tsx | 8 ++- src/components/molecules/Menu.tsx | 2 +- src/components/organisms/CustomModal.tsx | 52 +++++++++----- .../organisms/RecommendationModal.tsx | 70 +++++++++++++++++++ src/{context => hooks}/basketContext.tsx | 24 +++++-- src/pages/MenuPage.tsx | 31 +++++++- 9 files changed, 166 insertions(+), 31 deletions(-) create mode 100644 src/components/organisms/RecommendationModal.tsx rename src/{context => hooks}/basketContext.tsx (81%) 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({ + 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; getCategoryMenuList(categoryIdx: number): Promise; getCategoryList(): Promise; + getRecommendationList(): Promise; } 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 = ({

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 = ({ modalToggle()} + onClick={() => clickClose()} />
@@ -66,21 +80,21 @@ const CustomModal = ({
clickTemp("hot")} + onClick={() => clickTemp("HOT")} > HOT
clickTemp("ice")} + onClick={() => clickTemp("ICE")} > ICE
@@ -92,11 +106,11 @@ const CustomModal = ({
clickSize("tall")} + onClick={() => clickSize("Tall")} >

톨 @@ -113,11 +127,11 @@ const CustomModal = ({

clickSize("grande")} + onClick={() => clickSize("Grande")} >

그란데 @@ -134,11 +148,11 @@ const CustomModal = ({

clickSize("venti")} + onClick={() => clickSize("Venti")} >

벤티 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 ( +

+
+
+ modalToggle2()} + /> +
+
+ {message} +
+ modalToggle()} + count={count} + setCountFunc={setCountFunc} + /> +
+
clickConfirm()} + > + 선택 완료 +
+
+
+
+ ); +}; + +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(1); const [categoryList, setCategoryList] = useState([]); const [openModal, setOpenModal] = useState(false); + const [openModal2, setOpenModal2] = useState(false); + const [fromRecommend, setFromRecommend] = useState(false); const [selectedMenu, setSelectedMenu] = useState(); const [count, setCount] = useState(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 (
@@ -59,8 +73,21 @@ const MenuPage = () => { setOpenModal(!openModal)} + modalToggle2={() => setOpenModal2(!openModal2)} menu={selectedMenu!} setCountFunc={setCountFunc} + fromRecommend={fromRecommend} + /> + )} + {openModal2 && ( + setOpenModal(!openModal)} + modalToggle2={() => setOpenModal2(!openModal2)} + setMenuFunc={setCountFunc} + setFromRecommend={() => setFromRecommend(!fromRecommend)} + count={count} + setCountFunc={setCountFunc} /> )}
@@ -121,7 +148,7 @@ const MenuPage = () => {