diff --git a/.eslintrc.js b/.eslintrc.js
index db73a713bcc770104285fab3efc1985cedac24c4..9f351ab627f9681b08299feda3238876a07528ad 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -45,6 +45,7 @@ module.exports = {
"disallowTypeAnnotations": true, // optional: to disallow type annotations for variables, parameters, etc.
"fixStyle": "separate-type-imports" // optional: to define how the fix should be applied
}],
+ "@typescript-eslint/no-empty-function": "off",
// plugins
"import/order": ["error", {
diff --git a/README.md b/README.md
index b87cb00449efa5b6131f56b7e45cc63eddf37373..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +0,0 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
diff --git a/src/App.module.css b/src/App.module.css
index 30c654a543ff8647f0bdca340b675b7b81033232..26ff43c25ece83ac5841e899c07a2bf4dc550a7e 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -2,3 +2,7 @@
margin-top: var(--header-height);
height: 100%;
}
+
+.BS-on {
+ opacity: 0.2;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 2463902c05d38b99eafbbfacc2e10c2068888f2f..82afb3eec166f7184265013aa940088b9e5e2626 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,18 +4,22 @@ import './common/css/reset.css';
import {Routes, Route, useNavigate} from "react-router-dom";
import S from './App.module.css';
+import BottomSheet from "./common/components/bottom-sheet/BottomSheet";
import Header from "./common/components/header/Header";
import Navigator from "./common/components/navigator/Navigator";
import AppRoute from "./config/route";
+import {BSProvider} from "./contexts/bottom-sheet";
import {CartProvider} from "./contexts/cart";
import CartPage from "./pages/cart-page/CartPage";
import LoginPage from "./pages/login-page/LoginPage";
import MainPage from "./pages/main-page/MainPage";
import MenuPage from "./pages/menu-page/MenuPage";
import SignupPage from "./pages/signup-page/SignupPage";
+import Wrapper from "./wrapper/Wrapper";
+
function App() {
- const [login, setLogin] = useState(false);
+ const [login, setLogin] = useState(true);
const [headerName, setHeaderName] = useState('');
const navigator = useNavigate();
@@ -26,25 +30,30 @@ function App() {
}, [login]);
return (
- <CartProvider>
- <div className="App">
- {login &&
- <>
- <Header headerName={headerName} />
- <Navigator />
- </>
- }
- <article className={S['page-container']}>
- <Routes>
- <Route path={AppRoute.LOGIN} element={<LoginPage setLogin={setLogin} />} />
- <Route path={AppRoute.SIGNUP} element={<SignupPage />} />
- <Route path={AppRoute.MAIN} element={<MainPage />} />
- <Route path={AppRoute.MENU} element={<MenuPage setHeaderName={setHeaderName} />} />
- <Route path={AppRoute.CART} element={<CartPage />} />
- </Routes>
- </article>
- </div>
- </CartProvider>
+ <BSProvider>
+ <CartProvider>
+ <div className={"App"}>
+ <Wrapper>
+ {login &&
+ <>
+ <Header headerName={headerName} />
+ <Navigator />
+ </>
+ }
+ <article className={S['page-container']}>
+ <Routes>
+ <Route path={AppRoute.LOGIN} element={<LoginPage setLogin={setLogin} />} />
+ <Route path={AppRoute.SIGNUP} element={<SignupPage />} />
+ <Route path={AppRoute.MAIN} element={<MainPage />} />
+ <Route path={AppRoute.MENU} element={<MenuPage setHeaderName={setHeaderName} />} />
+ <Route path={AppRoute.CART} element={<CartPage />} />
+ </Routes>
+ </article>
+ </Wrapper>
+ </div>
+ <BottomSheet />
+ </CartProvider>
+ </BSProvider>
);
}
diff --git a/src/common/components/bottom-sheet/BottomSheet.module.css b/src/common/components/bottom-sheet/BottomSheet.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..c23016af7b3a4ffa35a17ddbdf9e4220d7fc7880
--- /dev/null
+++ b/src/common/components/bottom-sheet/BottomSheet.module.css
@@ -0,0 +1,12 @@
+.container {
+ position: fixed;
+ bottom: 0;
+ z-index: 10;
+ width: 100vw;
+ height: 50vh;
+ background-color: red;
+}
+
+.header {
+
+}
diff --git a/src/common/components/bottom-sheet/BottomSheet.tsx b/src/common/components/bottom-sheet/BottomSheet.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..25afeccb2005a789d5207edeaa78c45e54e424cd
--- /dev/null
+++ b/src/common/components/bottom-sheet/BottomSheet.tsx
@@ -0,0 +1,31 @@
+import {useContext, useEffect, useState} from "react";
+import {useLocation} from "react-router-dom";
+
+import {BSContext} from "../../../contexts/bottom-sheet";
+
+import S from './BottomSheet.module.css';
+
+import type {FC} from "react";
+
+const BottomSheet: FC = () => {
+ const { bSElement, setBSElement, flushBSElement } = useContext(BSContext);
+ const [retEl, setRetEl] = useState(<></>);
+ const location = useLocation();
+
+ useEffect(() => {
+ flushBSElement();
+ }, [location]);
+
+ useEffect(() => {
+ if (bSElement) setRetEl(
+ <div className={S['container']}>
+ {bSElement}
+ </div>
+ );
+ else setRetEl(<></>);
+ }, [bSElement]);
+
+ return retEl;
+};
+
+export default BottomSheet;
diff --git a/src/contexts/bottom-sheet/index.tsx b/src/contexts/bottom-sheet/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1a5152b0e57324f1ce5d9417d9df8d9fb1925c9a
--- /dev/null
+++ b/src/contexts/bottom-sheet/index.tsx
@@ -0,0 +1,43 @@
+import React, {createContext, useState} from "react";
+
+import type {CartItemData} from "../../pages/cart-page/config/type";
+import type {FC, ReactNode} from "react";
+
+interface BSContextType {
+ bSElement: ReactNode;
+ setBSElement: (d: ReactNode | null) => void;
+ flushBSElement: () => void;
+}
+
+const BSContext = createContext<BSContextType>({
+ bSElement: null,
+ setBSElement: (d) => { return d; },
+ flushBSElement: () => {}
+});
+
+interface pProps { children: ReactNode; }
+const BSProvider: FC<pProps> = ({ children }) => {
+ const [item, setItem] = useState<BSContextType['bSElement']>(null);
+
+ const setBSElement = (el: ReactNode | null) => {
+ setItem(() => el);
+ };
+
+ const flushBSElement = () => {
+ setItem(null);
+ };
+
+ return (
+ <BSContext.Provider
+ value={{
+ bSElement: item,
+ setBSElement,
+ flushBSElement
+ }}
+ >
+ { children }
+ </BSContext.Provider>
+ );
+};
+
+export {BSProvider, BSContext};
diff --git a/src/pages/login-page/LoginPage.tsx b/src/pages/login-page/LoginPage.tsx
index 43d82ea1506419f4972231148c4a3dd7ee6e76d1..f3a68fed9142cd1db81cd6017b2ad855ccad727d 100644
--- a/src/pages/login-page/LoginPage.tsx
+++ b/src/pages/login-page/LoginPage.tsx
@@ -1,4 +1,4 @@
-import {Link, useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
import AppRoute from "../../config/route";
diff --git a/src/pages/main-page/MainPage.tsx b/src/pages/main-page/MainPage.tsx
index f9afe610ebd30772b203a0ba2431c6be7e7a6f7e..01ab108ae147b0d0e5d8ef302b97af937f4ce556 100644
--- a/src/pages/main-page/MainPage.tsx
+++ b/src/pages/main-page/MainPage.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
import {Link} from "react-router-dom";
import {MAIN_PAGE_DUMMY} from "./config/dummy";
diff --git a/src/pages/menu-page/MenuPage.tsx b/src/pages/menu-page/MenuPage.tsx
index ccc1c70732d403032d4a8e6e12f4199b55c62d67..e0903d6ec1af2bde73192a40cbd09fad5951c99a 100644
--- a/src/pages/menu-page/MenuPage.tsx
+++ b/src/pages/menu-page/MenuPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState} from "react";
+import {useEffect, useState} from "react";
import {MENU_PAGE_DUMMY} from "./config/dummy";
import MenuBox from "./modules/menu-box/MenuBox";
diff --git a/src/wrapper/Wrapper.module.css b/src/wrapper/Wrapper.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..d03519cf5f08de9e383be5756a15b95b2dd955d0
--- /dev/null
+++ b/src/wrapper/Wrapper.module.css
@@ -0,0 +1,4 @@
+.BS-on {
+ opacity: 0.2;
+ overflow: hidden;
+}
diff --git a/src/wrapper/Wrapper.tsx b/src/wrapper/Wrapper.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..be32e15f1701f0cef24d3bead381f82faf238461
--- /dev/null
+++ b/src/wrapper/Wrapper.tsx
@@ -0,0 +1,23 @@
+
+import {useContext} from "react";
+
+import {BSContext} from "../contexts/bottom-sheet";
+
+import S from './Wrapper.module.css';
+
+import type {FC, ReactNode} from "react";
+
+interface Props { children: ReactNode; }
+
+// NEEDED TO USE CONTEXTS
+const Wrapper: FC<Props> = ({ children }) => {
+ const { bSElement, setBSElement } = useContext(BSContext);
+
+ return (
+ <div className={
+ bSElement ? S['BS-on'] : ''
+ }>{children}</div>
+ );
+};
+
+export default Wrapper;