modal

src/components/inputs/text-input/text-input.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import classes from './text-input.module.scss';
 
 const Input = ({
@@ -19,4 +20,4 @@ const Input = ({
   )
 }
 
-export default Input;
+export default memo(Input);

src/components/modal/index.jsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useCallback } from 'react';
+import ReactDom from 'react-dom';
+
+import classes from './style.module.scss';
+
+export const CustomModal = ({ children, closeEvent }) => {
+  const modal = useRef();
+
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (modal.current) {
+        if (event.target && !modal.current.contains(event.target)) closeEvent();
+      }
+    },
+    [closeEvent],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [handleClickOutside])
+
+
+  return ReactDom.createPortal(<div className={classes.wrapper}>
+    <div className={classes.modal} ref={modal}>
+      {/* <div>header <button>x</button></div> */}
+      {children}
+    </div>
+  </div>, document.body)
+} 

src/components/modal/style.module.scss

@@ -0,0 +1,20 @@
+.wrapper {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+
+  top: 0;
+	left: 0;
+	z-index: 99999;
+
+  background-color: rgba(0,0,0, 0.3);
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background-color: #fff;
+}

src/routes/main/index.js

@@ -1,11 +1,14 @@
-import { useEffect, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
 
 import { uploadPicture } from 'store/user/actions';
+import { CustomModal } from 'components/modal';
 
 import classes from './index.module.scss';
 
 const Main = () => {
+  const [showModal, setShowModal] = useState(false);
+
   const [file, setFile] = useState(null);
   const dispatch = useDispatch();
   console.log('file', file);
@@ -16,11 +19,27 @@ const Main = () => {
 
   return (
     <div>
-    <h1>MAIN PAGE</h1>
+      <h1>MAIN PAGE</h1>
+      {showModal && (
+        <CustomModal
+          closeEvent={() => setShowModal(false)}>
+            <div style={{ padding: 30}}><h2>HELLO</h2></div>
+        </CustomModal>
+      )}
+
+      <input type="file" onChange={(e) => setFile(e.target.files[0])} />
+      
+      <button onClick={uploadHandler}>UPLOAD</button>
+      <button onClick={() => setShowModal(true)}>OPEN MODAL</button>
+
+
+      <div className={classes.grid}>
+        <div className={classes.header}>header</div>
+        <div className={classes.sidebar}>sidebar</div>
+        <div className={classes.item}>main</div>
+        <div className={classes.footer}>footer</div>
+      </div>
 
-    <input type="file" onChange={(e) => setFile(e.target.files[0])} />
-    
-    <button onClick={uploadHandler}>UPLOAD</button>
     </div>
   )
 }

src/routes/main/index.module.scss

@@ -21,4 +21,30 @@
     font-size: 12px;
     margin-bottom: 6px;
   }
+}
+
+.grid {
+  display: grid;
+
+  grid-template-columns: repeat(12, 1fr);
+  // grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  // grid-template-areas: "header header header header header header header header header header header header
+  //   sidebar sidebar sidebar main main main main main main main main main
+  //   footer footer footer footer footer footer footer footer footer footer footer footer";
+  grid-row-gap: 20px;
+}
+
+.header {
+  grid-column: 1 / -1;
+  grid-area: header;
+}
+
+.footer {
+  grid-row: 3;
+  grid-column: 1 / -1;
+}
+
+.sidebar {
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
 }

src/store/auth/saga.js

@@ -30,9 +30,9 @@ function* runAuth({ payload }) {
   try {
     const result = yield call(authRequest, credentials);
 
-    yield setToLocalStorage(result.token)
+    yield setToLocalStorage(result.token);
 
-    yield put(actions.runAuthSubmit(result.user))
+    yield put(actions.runAuthSubmit(result.user));
   } catch (error) {
     yield put(actions.runAuthFail(error))
   }

src/store/user/saga.js

@@ -51,9 +51,9 @@ function* uploadPicture({ payload }) {
     const result = yield call(uploadRequest, formData);
     console.log('result', result);
 
-    yield put(actions.getUsersSuccess(result))
+    // yield put(actions.getUsersSuccess(result))
   } catch (error) {
-    yield put(actions.getUsersFail(error))
+    // yield put(actions.getUsersFail(error))
   }
 }