Feat: CustomModal, 장바구니 UI 작성 (#7)

Digital-Hana-Starbucks · May 7, 2024 · 4bce999 · 4bce999
1 parent 9d539e3
commit 4bce999
Show file tree

Hide file tree

Showing 10 changed files with 407 additions and 61 deletions.
diff --git a/public/img/closeWhite.png b/public/img/closeWhite.png
diff --git a/public/img/grande.png b/public/img/grande.png
diff --git a/src/components/molecules/BasketMenu.tsx b/src/components/molecules/BasketMenu.tsx
@@ -0,0 +1,80 @@
+import { FC, useEffect, useState } from "react";
+import { BasketMenuType, MenuType } from "../../types/menu";
+import { useSession } from "../../context/basketContext";
+
+interface IProps {
+  basketIdx: number;
+  menuIdx: number;
+  menuPrice: number;
+  menuName: string;
+  menuImage: string;
+  orderDetailCount: number;
+  menuTemperature?: string | null;
+  menuSize?: string | null;
+}
+
+const BasketMenu: FC<IProps> = ({
+  basketIdx,
+  menuIdx,
+  menuName,
+  menuPrice,
+  menuImage,
+  orderDetailCount,
+  menuTemperature,
+  menuSize,
+}) => {
+  const { removeBasket, plusMenu, minusMenu } = useSession();
+
+  const clickMinus = () => {
+    if (orderDetailCount <= 1) {
+      return;
+    }
+    minusMenu(basketIdx);
+  };
+
+  const clickPlus = () => {
+    plusMenu(basketIdx);
+  };
+
+  return (
+    <div className="pl-2 py-2 pr-1 flex flex-col justify-center w-64 h-20 bg-starbucksBeige rounded-lg">
+      <div className="flex justify-end">
+        <img
+          className="flex w-3 h-3 cursor-pointer bg-black rounded-lg"
+          src="./../../public/img/closeWhite.png"
+          onClick={() => removeBasket(basketIdx)}
+        />
+      </div>
+      <div className="flex w-full">
+        <img className="w-14 h-16 rounded-xl" src={menuImage} />
+        <div className="pl-2 py-1 flex flex-col justify-between w-full">
+          <p className="flex text-sm line-clamp-1">{menuName}</p>
+          <div className="flex w-full justify-between">
+            <p className="text-sm">
+              {(menuPrice * orderDetailCount).toLocaleString()}원
+            </p>
+            <div className="flex">
+              <div
+                className="flex justify-center items-center w-5 h-5 border-2 border-gray-200 bg-white cursor-pointer"
+                onClick={() => clickMinus()}
+              >
+                -
+              </div>
+              <div className="flex justify-center items-center w-5 h-5 border-2 border-gray-200">
+                {orderDetailCount}
+              </div>
+              <div
+                className="flex justify-center items-center w-5 h-5 border-2 border-gray-200 bg-white cursor-pointer"
+                onClick={() => clickPlus()}
+              >
+                +
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BasketMenu;
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
@@ -1,6 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { ApiClient } from "../../apis/apiClient";
-import { MenuType } from "../../types/menu";
+import { BasketMenuType, MenuType } from "../../types/menu";
 import { useSession } from "../../context/basketContext";
 
 interface IProps {
@@ -9,6 +8,10 @@ interface IProps {
   menuImage: string;
   menuPrice: number;
   categoryIdx: number;
+  setOpenModalFunc: () => void;
+  setMenuFunc: (menu: BasketMenuType) => void;
+  count: number;
+  setCountFunc: () => void;
 }
 
 const Menu: FC<IProps> = ({
@@ -17,26 +20,42 @@ const Menu: FC<IProps> = ({
   menuImage,
   menuPrice,
   categoryIdx,
+  setOpenModalFunc,
+  setMenuFunc,
+  count,
+  setCountFunc,
 }) => {
   const { addBasket } = useSession();
 
-  type BasketMenuType = {
-    basketIdx: number;
-    menuIdx: number;
-    orderDetailCount: number;
-    menuTemperature?: string | null;
-    menuSize?: string | null;
-  };
-
   const MenuClick = () => {
-    alert("ㅎㅇ");
-    if (categoryIdx === 4 || categoryIdx === 5) {
+    if (categoryIdx == 4 || categoryIdx == 5) {
+      addBasket({
+        basketIdx: count,
+        menuIdx: menuIdx,
+        menuName: menuName,
+        menuPrice: menuPrice,
+        menuImage: menuImage,
+        orderDetailCount: 1,
+      });
+      setCountFunc();
+      return;
     }
+
+    setMenuFunc({
+      basketIdx: count,
+      menuIdx: menuIdx,
+      menuName: menuName,
+      menuPrice: menuPrice,
+      menuImage: menuImage,
+      orderDetailCount: 1,
+    });
+
+    setOpenModalFunc();
   };
 
   return (
     <div>
-      <div className="px-2 py-1 h-full" onClick={MenuClick}>
+      <div className="px-2 py-1 h-full" onClick={() => MenuClick()}>
         <img className="rounded-xl 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">

diff --git a/src/components/organisms/BasketCard.tsx b/src/components/organisms/BasketCard.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { BasketMenuType, MenuType } from "../../types/menu";
+import BasketMenu from "../molecules/BasketMenu";
+
+interface IProps {
+  basketList?: BasketMenuType[];
+}
+
+const BasketCard: FC<IProps> = ({ basketList }) => {
+  return (
+    <div>
+      <ul className="py-2 pl-4 pr-2 flex-row grid grid-cols-2 h-[26vh] gap-3 overflow-y-scroll">
+        {basketList?.map((menu: BasketMenuType) => (
+          <li key={menu.basketIdx}>
+            <BasketMenu
+              basketIdx={menu.basketIdx}
+              menuIdx={menu.menuIdx}
+              menuPrice={menu.menuPrice}
+              menuName={menu.menuName}
+              menuImage={menu.menuImage}
+              orderDetailCount={menu.orderDetailCount}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default BasketCard;
diff --git a/src/components/organisms/CustomModal.tsx b/src/components/organisms/CustomModal.tsx
@@ -1,22 +1,168 @@
-import React from "react";
+import React, { useRef, useState } from "react";
+import { BasketMenuType } from "../../types/menu";
+import { useSession } from "../../context/basketContext";
 
 const CustomModal = ({
   message,
   modalToggle,
+  menu,
+  setCountFunc,
 }: {
   message: string;
   modalToggle: () => void;
+  menu: BasketMenuType;
+  setCountFunc: () => void;
 }) => {
+  const [temper, setTemper] = useState("hot");
+  const [size, setSize] = useState("tall");
+
+  const { addBasket } = useSession();
+
+  const clickTemp = (clickedTemp: string) => {
+    setTemper(clickedTemp);
+  };
+
+  const clickSize = (clickedSize: string) => {
+    setSize(clickedSize);
+  };
+
+  const clickConfirm = () => {
+    if (size == "grande") {
+      menu.menuPrice += 500;
+    } else if (size == "venti") {
+      menu.menuPrice += 1000;
+    }
+
+    addBasket({
+      basketIdx: menu.basketIdx,
+      menuIdx: menu.menuIdx,
+      menuName: menu.menuName,
+      menuPrice: menu.menuPrice,
+      menuImage: menu.menuImage,
+      orderDetailCount: 1,
+      menuTemperature: temper,
+      menuSize: size,
+    });
+    setCountFunc();
+    modalToggle();
+  };
+
   return (
     <div className="fixed flex flex-col justify-center items-center w-[585px] h-full bg-black bg-opacity-50">
-      <div className="flex flex-col justify-center items-center w-96 h-40 rounded-xl bg-starbucksBeige gap-6">
-        <p>{message}</p>
-        <button
-          className="w-32 h-40 rounded-xl text-white bg-starbucksGreen"
-          onClick={modalToggle}
-        >
-          확인
-        </button>
+      <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={() => modalToggle()}
+          />
+        </div>
+        <div className="flex flex-col justify-center bg-starbucksGreen text-white w-full h-24">
+          {message}
+        </div>
+        {/* 온도영역 */}
+        <div className="flex flex-col px-8">
+          <p className="flex font-bold items-center">온도</p>
+          <div className="mt-3 flex gap-6">
+            <div
+              className={
+                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")}
+            >
+              HOT
+            </div>
+            <div
+              className={
+                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")}
+            >
+              ICE
+            </div>
+          </div>
+        </div>
+        {/* 사이즈영역 */}
+        <div className="flex flex-col px-8">
+          <p className="flex font-bold items-center">컵 선택</p>
+          <div className="mt-3 flex gap-6">
+            <div
+              className={
+                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")}
+            >
+              <img
+                className="flex w-12 h-12"
+                src="./../../public/img/grande.png"
+              />
+              <p
+                className={
+                  size == "tall" ? "flex font-bold" : "flex font-normal"
+                }
+              >
+                톨
+              </p>
+              <p className="flex">355ml</p>
+            </div>
+            <div
+              className={
+                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")}
+            >
+              <img
+                className="flex w-14 h-14"
+                src="./../../public/img/grande.png"
+              />
+              <p
+                className={
+                  size == "grande" ? "flex font-bold" : "flex font-normal"
+                }
+              >
+                그란데
+              </p>
+              <p className="flex">473ml</p>
+            </div>
+            <div
+              className={
+                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")}
+            >
+              <img
+                className="flex w-16 h-16"
+                src="./../../public/img/grande.png"
+              />
+              <p
+                className={
+                  size == "venti" ? "flex font-bold" : "flex font-normal"
+                }
+              >
+                벤티
+              </p>
+              <p className="flex">591ml</p>
+            </div>
+          </div>
+        </div>
+        <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>
   );