[codesquad-kiosk-max-team-02#51] feat: 상품 담기 클릭시 해당 모달이 닫히는 기능

gunoc · Jun 27, 2023 · 0b99b88 · 0b99b88
1 parent 13f86fa
commit 0b99b88
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 21 deletions.
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -11,10 +11,10 @@ function App() {
   const [productList, setProductList] = useState([]);
   const [loading, setLoading] = useState(false);
   const [orderList, setOrderList] = useState([]);
-  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
-  const [paymentModalContent, setPaymentModalContent] = useState(null);
   const [isAddMenuModalOpen, setIsAddMenuModalOpen] = useState(false);
   const [addMenuModalContent, setAddMenuModalContent] = useState(null);
+  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
+  const [paymentModalContent, setPaymentModalContent] = useState(null);
 
   function addPaymentModalOpenHandler(content: any) {
     if (isPaymentModalOpen) {

diff --git a/fe/src/components/Main/MainArea.tsx b/fe/src/components/Main/MainArea.tsx
@@ -26,25 +26,11 @@ export function MainArea({
   function menuCardClickHandler(index: number) {
     const product = productList[index - 1];
     setSelectedProduct(product);
-    addModalOpenHandler(<AddMenu menuId={product.id} setOrderList={setOrderList} />);
+    addModalOpenHandler(
+      <AddMenu menuId={product.id} setOrderList={setOrderList} setSelectedProduct={setSelectedProduct} />,
+    );
   }
 
-  // function addModalOpenHandler() {
-  //   if (isModalOpen) {
-  //     return;
-  //   }
-
-  //   setIsModalOpen(true);
-  // }
-
-  // function addModalCloseHandler() {
-  //   if (!isModalOpen) {
-  //     return;
-  //   }
-
-  //   setIsModalOpen(false);
-  // }
-
   return (
     <>
       <main className={classes.main}>

diff --git a/fe/src/components/Modal/AddMenu.tsx b/fe/src/components/Modal/AddMenu.tsx
@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import classes from './AddMenu.module.css';
 import { OptionButton } from './OptionButton';
-
-/* 여기에서 바뀐 수량, 가격 정보 같은걸 가지고 있어야 함 => 장바구니에 내려주기 위해 */
+import { Product } from '../../utils/types';
 
 export function AddMenu({
   menuId,
   setOrderList,
+  setSelectedProduct,
 }: {
   menuId: number;
   setOrderList: React.Dispatch<React.SetStateAction<never[]>>;
+  setSelectedProduct: React.Dispatch<React.SetStateAction<Product | null>>;
 }) {
   const [count, setCount] = useState(1);
   const [temperature, setTemperature] = useState<string | null>(null);
@@ -66,6 +67,8 @@ export function AddMenu({
   const isActive = temperature && size;
 
   function handleSubmit() {
+    console.log('handleSubmit');
+
     const sizeNum = size === 'big' ? 2 : 1;
     const temperatureNum = temperature === 'ice' ? 2 : 1;
 
@@ -78,6 +81,8 @@ export function AddMenu({
       },
       ...prevOrderList,
     ]);
+
+    setSelectedProduct(null);
   }
 
   return (