chore/#2 : add WeeklyMenu

주간 메뉴 항목 추가
EAT-SSU · Mar 16, 2024 · 679d994 · 679d994
1 parent 914cf3b
commit 679d994
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 82 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API_HOST = https://dev.eatssu.shop/admin
diff --git a/src/components/Manage/Manage.js b/src/components/Manage/Manage.js
@@ -1,36 +1,38 @@
-import React, { useState } from 'react';
-import NavBar from '../NavBar/NavBar';
-import Inquiry from '../Inquiry/Inquiry';
-import Report from '../Report/Report';
-import Menu from '../Menu/Menu';
+import React, { useState } from "react";
+import NavBar from "../NavBar/NavBar";
+import Inquiry from "../Inquiry/Inquiry";
+import Report from "../Report/Report";
+import Menu from "../Menu/Menu";
+import WeeklyMenu from "components/Menu/WeeklyMenu";
 
 function Manage() {
-    const [selectedComponent, setSelectedComponent] = useState('menu');
+  const [selectedComponent, setSelectedComponent] = useState("menu");
 
-    const renderSelectedComponent = () => {
-        switch (selectedComponent) {
-            case 'menu':
-                return <Menu />;
-            case 'report':
-                return <Report />;
-            case 'inquiry':
-                return <Inquiry />;
-            default:
-                return <Menu />;
-        }
-    };
+  const renderSelectedComponent = () => {
+    switch (selectedComponent) {
+      case "menu":
+        return <Menu />;
+      case "weeklyMenu":
+        return <WeeklyMenu />;
+      case "report":
+        return <Report />;
+      case "inquiry":
+        return <Inquiry />;
+      default:
+        return <Menu />;
+    }
+  };
 
-    return (
-        <div>
-            <NavBar
-                selectedComponent={selectedComponent}
-                setSelectedComponent={setSelectedComponent}
-            />
-            {/* 선택된 컴포넌트 렌더링 */}
-            {renderSelectedComponent()}
-        </div>
-    );
+  return (
+    <div>
+      <NavBar
+        selectedComponent={selectedComponent}
+        setSelectedComponent={setSelectedComponent}
+      />
+      {/* 선택된 컴포넌트 렌더링 */}
+      {renderSelectedComponent()}
+    </div>
+  );
 }
 
 export default Manage;
-
diff --git a/src/components/Menu/WeeklyMenu.js b/src/components/Menu/WeeklyMenu.js
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import Meal from "./Meal/Meal";
+import FixMenu from "./FixMenu/FixMenu";
+import DateNavigator from "./DateNavigator";
+import MenuTypeRadio from "./MenuTypeRadio";
+import TimePartSelector from "./TimePartSelector";
+import "./Menu.css";
+
+function WeeklyMenu() {
+  const [selectedMenuType, setSelectedMenuType] = useState("meal");
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [selectedTimePart, setSelectedTimePart] = useState("lunch");
+
+  const renderSelectedComponent = () => {
+    switch (selectedMenuType) {
+      case "meal":
+        return <Meal date={selectedDate} timePart={selectedTimePart} />;
+      case "fix-menu":
+        return <FixMenu />;
+      default:
+        return <Meal />;
+    }
+  };
+  return (
+    <div className="rootWrapper">
+      <DateNavigator
+        selectedDate={selectedDate}
+        setSelectedDate={setSelectedDate}
+        hidden={selectedMenuType === "fix-menu"}
+      />
+      <MenuTypeRadio
+        selectedMenuType={selectedMenuType}
+        setselectedMenuType={setSelectedMenuType}
+      />
+    </div>
+  );
+}
+export default WeeklyMenu;
diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js
@@ -1,67 +1,77 @@
-import React from 'react';
-import { AppBar, Toolbar, Typography, Button } from '@mui/material';
-import './NavBar.css';
-import { styled } from '@mui/material/styles';
-import { useAuth } from '../../contexts/AuthContext';
+import React from "react";
+import { AppBar, Toolbar, Typography, Button } from "@mui/material";
+import "./NavBar.css";
+import { styled } from "@mui/material/styles";
+import { useAuth } from "../../contexts/AuthContext";
 
 const navItems = [
-    { label: '메뉴 관리', value: 'menu' },
-    { label: '리뷰 신고', value: 'report' },
-    { label: '문의 내역', value: 'inquiry' },
-]
+  { label: "메뉴 관리", value: "menu" },
+  { label: "주간 메뉴 관리", value: "weeklyMenu" },
+  { label: "리뷰 신고", value: "report" },
+  { label: "문의 내역", value: "inquiry" },
+];
 
 const MenuButton = styled(Button)({
-    margin: '0 1rem',
-    '&:hover': {
-        backgroundColor: 'lightgray',
-    },
+  margin: "0 1rem",
+  "&:hover": {
+    backgroundColor: "lightgray",
+  },
 });
 
 const LogoutButton = styled(Button)({
-    fontSize: '1rem',
-    fontWeight: '700',
-    borderRadius: '0.7rem',
-    padding: '0.4rem 1rem',
-    backgroundColor: '#DF5757',
-    '&:hover': {
-        backgroundColor: '#DF5757',
-    },
+  fontSize: "1rem",
+  fontWeight: "700",
+  borderRadius: "0.7rem",
+  padding: "0.4rem 1rem",
+  backgroundColor: "#DF5757",
+  "&:hover": {
+    backgroundColor: "#DF5757",
+  },
 });
 
 function NavBar({ selectedComponent, setSelectedComponent }) {
+  const { logout } = useAuth();
 
-    const { logout } = useAuth();
+  const handleComponentChange = (component) => {
+    setSelectedComponent(component);
+  };
 
-    const handleComponentChange = (component) => {
-        setSelectedComponent(component);
-    };
-
-    return (
-        <AppBar position="static" color="white" className="appBar" elevation={0}>
-            <Toolbar >
-                <Typography variant="h4" color="primary" component="div" className="logoContainer">
-                    <span className="logoText">EAT</span>
-                    <img src={`${process.env.PUBLIC_URL}/images/cutlery.png`} className="logoImage" />
-                    <span className="logoText">SSU</span>
-                </Typography>
-                <div className='menuContainer'>
-                    {navItems.map(item => (
-                        <MenuButton
-                            variant="text"
-                            key={item.value}
-                            color={selectedComponent == item.value ? 'primary' : 'inherit'}
-                            onClick={() => handleComponentChange(item.value)}
-                        >
-                            {item.label}
-                        </MenuButton>
-                    ))}
-                </div>
-                <div className='logoutButton'>
-                    <LogoutButton color='grey'  onClick={logout} >로그아웃</LogoutButton>
-                </div>
-            </Toolbar>
-        </AppBar>
-    );
+  return (
+    <AppBar position="static" color="white" className="appBar" elevation={0}>
+      <Toolbar>
+        <Typography
+          variant="h4"
+          color="primary"
+          component="div"
+          className="logoContainer"
+        >
+          <span className="logoText">EAT</span>
+          <img
+            src={`${process.env.PUBLIC_URL}/images/cutlery.png`}
+            className="logoImage"
+          />
+          <span className="logoText">SSU</span>
+        </Typography>
+        <div className="menuContainer">
+          {navItems.map((item) => (
+            <MenuButton
+              variant="text"
+              key={item.value}
+              color={selectedComponent == item.value ? "primary" : "inherit"}
+              onClick={() => handleComponentChange(item.value)}
+            >
+              {item.label}
+            </MenuButton>
+          ))}
+        </div>
+        <div className="logoutButton">
+          <LogoutButton color="grey" onClick={logout}>
+            로그아웃
+          </LogoutButton>
+        </div>
+      </Toolbar>
+    </AppBar>
+  );
 }
 
-export default NavBar;
+export default NavBar;