도와주세욧..!!!

Main.js

import React, { useState, useRef ,useEffect} from 'react';
import {Routes,Route,Link} from 'react-router-dom';
import {useSelector,useDispatch} from "react-redux";
import {plusPrice,minusPrice,plusAmount,minusAmount,resetAmount,resetPrice,addMenus,removeMenus,resetMenus} from "./store.js";
import Menu from './Menu';
import menuModal from './MenuModal.js';
import MenuList from './MenuList';
import './App2.css';

function Main(){
    let store = useSelector((state) => state);
    let dispatch = useDispatch();

//    const [checkedMenus,setCheckedMenus] = useState([
    
//    ]); // 선택된 메뉴들이 저장되는 배열

   const nextId = useRef(1); // 선택된 메뉴들의 id는 1부터 시작

   const onCreate = (menuImage, menuName, menuPrice,menuTemp,menuCon,syrupAmount) => {
    const checkedmenu = {
        id:nextId.current,
        menuImage,
        menuName,
        menuPrice,
        menuTemp,
        menuCon,
        syrupAmount
   }
//    setCheckedMenus([...checkedMenus,checkedmenu])
   dispatch(addMenus(checkedmenu));
   nextId.current += 1;
   dispatch(plusAmount());
   dispatch(plusPrice(parseInt(menuPrice)));
   //console.log(store.checkedMenus.menuAmount)
   console.log('Temperature:', menuTemp);
   console.log('Concentration:', menuCon);
   console.log('Syrup Amount:', syrupAmount);
   }

   const onRemove = (id,menuPrice,menuAmount) =>{
    console.log(menuAmount);
    nextId.current -= 1;
    // dispatch(store.checkedMenus.filter(checkedmenu => checkedmenu.id !== id));
    dispatch(removeMenus(id));
    dispatch(minusAmount());
    // store.orderPrice -= parseInt(menuPrice)*menuAmount;
    dispatch(minusPrice(parseInt(menuPrice)*menuAmount));
   }
   
   const Plus = (menuPrice) =>{
        dispatch(plusPrice(parseInt(menuPrice)));
   }

   const Minus = (menuPrice) =>{
        // setOrderPrice(orderPrice -parseInt(menuPrice));
        dispatch(minusPrice(parseInt(menuPrice)));
   }

   useEffect(() => {
    // orderPrice 상태가 변경된 후 실행되는 로직을 이곳에 작성
    console.log('orderPrice가 업데이트되었습니다:', store.orderPrice);
  }, [store.orderPrice]); // store.orderPrice가 변경될 때만 실행

    return(
        <>
        <nav className="nav_top">
{/* <div className="nav_logo">
    < img src="logo.png" alt="스마트정보통신공학과 로고"></img>
    스마트정보통신공학과
</div> */}

<p>주문 번호: 1번</p>
<button className="main_btn">로그아웃</button>
</nav>

<Menu
onCreate={onCreate}
onRemove={onRemove}
/>

<div style={{height:"74px"}}></div>
{/* <div className="checked_menu_line"> 
<p>선택한 메뉴</p>
</div>

<MenuList checkedMenus={store.checkedMenus} onRemove={onRemove} Plus={Plus} Minus={Minus}/>

<div className="order_line">
<p id="order_amount">
    <span>주문 수량</span>
    <span>{store.orderAmount}</span>
</p>
<p id="order_price">
    <span>주문 금액</span>
    <span>{store.orderPrice} 원</span>
</p>

</div> */}

<div className="bottom_line">
{/* <button id="all_cancel_btn" onClick={()=>{
    dispatch(resetMenus());
    // setOrderAmount(0);
    // setOrderPrice(0);
    dispatch(resetAmount());
    dispatch(resetPrice());
}}>전체 취소</button> */}
<div className="orderPrice">
    <div className="orderPrice_1">총 상품금액</div>
    <div className='orderPrice_2'>{store.orderPrice} 원</div>
</div>
<div className='orderPrice'>
<Link to="/kiosk2"><button className="main_btn">장바구니({store.orderAmount})</button></Link>
</div>
</div>
</>
    )
}
export default Main;

Menu.js

import React,{ useState, useRef } from 'react';
import MenuModal from './MenuModal';

function MenuItem({menuName,menuImage,menuPrice,onCreate}){
  const [Modal,setModal] = useState(false);
    return(
      <>
      <MenuModal show={Modal} onHide={()=>{setModal(false)}} onCreate={()=>{onCreate(menuName,menuImage,menuPrice)}}></MenuModal>
        <li onClick={()=>{
          setModal(true)}}>
            < img src={menuImage} alt={menuName}></img>
            <p>{menuName}</p>
            <p>{menuPrice}</p>
        
        </>
    );
}

function Menu({onCreate,onRemove}){
    let [menuName,setMenuName] = useState(['에스프레소','아메리카노','카푸치노','카페라떼','바닐라라떼','헤이즐넛라떼','더치커피','카페모카','돌체라떼']);
    let [menuImage,setMenuImage] = useState(['계란.jpeg','계란말이.jpeg','계란찜.jpeg','계란볶음밥.jpeg','계란후라이.jpeg','삶은계란.jpeg','계란.jpeg','계란.jpeg','계란.jpeg']);
    let [menuPrice,setMenuPrice] = useState([1500,1500,2900,2900,3300,3300,3300,3500,3800])
   

   const [menubar,setMenubar] = useState(0);

   const menuStyle = (Index)=>{
    setMenubar(Index);
    if(Index === 1){
        setMenuName(['레몬에이드','자몽에이드','청포도에이드','그린티라떼','곡물라떼','밀크티','블루베리라떼','망고라떼','딸기라떼']);
        setMenuImage(['사이다.jpeg','콜라.jpeg','환타.jpeg','맥주.jpeg','소주.jpeg','막걸리.jpeg','맥주.jpeg','소주.jpeg','막걸리.jpeg']);
        setMenuPrice([3500,3500,3500,3500,3300,3800,3800,3800,3800]);
    }
    else if(Index === 2){
        setMenuName(['딸기스무디','망고스무디','블루베리스무디','망고요거트스무디','딸기요거트스무디','유자스무디','민트초코프라페','자바칩프라페','그린티프라페']);
        setMenuImage(['감자튀김.jpeg','젤리.jpeg','과자.jpeg','아이스크림.jpeg','껌.jpeg','초콜릿.jpeg','아이스크림.jpeg','껌.jpeg','초콜릿.jpeg']);
        setMenuPrice([3800,3800,3800,4000,4000,3800,4000,4000,4000]);
    }
   else{
        setMenuName(['에스프레소','아메리카노','카푸치노','카페라떼','바닐라라떼','헤이즐넛라떼','더치커피','카페모카','돌체라떼']);
        setMenuImage(['계란.jpeg','계란말이.jpeg','계란찜.jpeg','계란볶음밥.jpeg','계란후라이.jpeg','삶은계란.jpeg','계란.jpeg','계란.jpeg','계란.jpeg']);
        setMenuPrice([1500,1500,2900,2900,3300,3300,3300,3500,3800]);
   }
   }
   
  
   const menuItems = [
    {menuName:menuName[0], menuImage:menuImage[0], menuPrice:menuPrice[0] + "원"},
    {menuName:menuName[1], menuImage:menuImage[1], menuPrice:menuPrice[1] + "원"},
    {menuName:menuName[2], menuImage:menuImage[2], menuPrice:menuPrice[2] + "원"},
    {menuName:menuName[3], menuImage:menuImage[3], menuPrice:menuPrice[3] + "원"},
    {menuName:menuName[4], menuImage:menuImage[4], menuPrice:menuPrice[4] + "원"},
    {menuName:menuName[5], menuImage:menuImage[5], menuPrice:menuPrice[5] + "원"},
    {menuName:menuName[6], menuImage:menuImage[6], menuPrice:menuPrice[6] + "원"},
    {menuName:menuName[7], menuImage:menuImage[7], menuPrice:menuPrice[7] + "원"},
    {menuName:menuName[8], menuImage:menuImage[8], menuPrice:menuPrice[8] + "원"}
   ]
  //  const [Modal,setModal] = useState(false);
    return(
    <div>
      {/* <menuModal show={Modal} onHide={()=>{setModal(false)}}></menuModal> */}
    <ul className="menu_bar">
      <li id="mainmenu" className={menubar === 0 ? 'active' : ''}
        onClick={()=>menuStyle(0)}>커피
      <li id="drink" className={menubar === 1 ? 'active' : ''}
        onClick={()=>menuStyle(1)}>논커피
      <li id="sidemenu" className={menubar === 2 ? 'active' : ''}
        onClick={()=>menuStyle(2)}>스무디/프라페
    
  
  <ul className="menu_1">
      {menuItems.slice(0,3).map(item =>(
            <MenuItem key={item.menuName}
            menuName={item.menuName}
                        menuImage={item.menuImage}
                        menuPrice={item.menuPrice}
                        onCreate={() => onCreate(item.menuImage, item.menuName, item.menuPrice)}
                        />
      ))}
  
  <ul className="menu_2">
        {menuItems.slice(3,6).map(item =>(
            <MenuItem key={item.menuName}
            menuName={item.menuName}
                        menuImage={item.menuImage}
                        menuPrice={item.menuPrice}
                        onCreate={() => onCreate(item.menuImage, item.menuName, item.menuPrice)}
                        />
        ))}
  
  <ul className="menu_3">
        {menuItems.slice(6).map(item =>(
            <MenuItem key={item.menuName}
            menuName={item.menuName}
                        menuImage={item.menuImage}
                        menuPrice={item.menuPrice}
                        onCreate={() => onCreate(item.menuImage, item.menuName, item.menuPrice)}
                        />
        ))}
  
  </div>
    )
}
export default Menu;

MenuModal.js

import React, {useState} from 'react';
import {Modal,Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

const MenuModal = ({show,onHide,onCreate}) =>{
  const [menuTemp,setMenuTemp] = useState('hot');
  const [menuCon,setMenuCon] = useState('soft');
  const [syrupAmount,setSyrupAmount] = useState(1);
    return(
        <Modal
      show={show}
      onHide={onHide}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          옵션
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className='modal_1'>
          <div className='temp'>
            <button className={menuTemp === 'hot' ? 'active_hot' : 'hot'}  onClick={()=>{setMenuTemp('hot')}}>HOT</button>
            <button className={menuTemp === 'iced' ? 'active_iced' : 'iced'}  onClick={()=>{setMenuTemp('iced')}}>ICED</button>
          </div>
          <div className='amt'>
              <button>-</button>
              <span>1</span>
              <button>+</button>
          </div>
        </div>
        <div className='option'>
          <p>농도</p>
          

            <li className={menuCon=='soft'?'active_option':''} onClick={()=>{setMenuCon('soft')}}>연하게
            <li className={menuCon=='hard'?'active_option':''} onClick={()=>{setMenuCon('hard')}}>진하게
          
        </div>
        <div className='option'>
          <p>시럽</p>
          

            <li className={syrupAmount==1?'active_option':''} onClick={()=>{setSyrupAmount(1)}}>1펌프
            <li className={syrupAmount==2?'active_option':''} onClick={()=>{setSyrupAmount(2)}}>2펌프
            <li className={syrupAmount==3?'active_option':''} onClick={()=>{setSyrupAmount(3)}}>3펌프
          
        </div>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={()=>{onHide(); onCreate(menuTemp,menuCon,syrupAmount)}}>장바구니 담기</Button>
      </Modal.Footer>
    </Modal>
    )
}
export default MenuModal;

menuModal.js 에 있는 menuTemp, menuCon, syrupAmount 의 값들을 onCreate 함수에 전달하고 싶은데
잘 안됩니당... 어떤 부분이 잘못된건가요...?