add console

src/components/common/Console/Console.jsx

@@ -1,105 +1,26 @@
-import { useState, useRef, useEffect } from 'react';
-import styles from './Console.module.scss';
+import React, { useState } from 'react';
+import style from './Console.module.scss';
 
-export const Console = () => {
-  const [isConsoleOpen, setIsConsoleOpen] = useState(false);
-  const [consoleInput, setConsoleInput] = useState('');
-  const [consoleOutput, setConsoleOutput] = useState([]);
+export const Console = ({ isOpen, close }) => {
+  const [output, setOutput] = useState('');
 
-  const inputRef = useRef(null);
-
-  const handleConsoleButtonClick = () => {
-    setIsConsoleOpen(true);
-    inputRef.current.focus();
-  };
-
-  const handleConsoleInputSubmit = (event) => {
-    event.preventDefault();
-    const userInput = consoleInput.trim();
-    if (!userInput) {
-      return;
-    }
-
-    try {
-      const result = eval(userInput);
-      setConsoleOutput((prevState) => [...prevState, { type: 'output', data: result }]);
-    } catch (error) {
-      setConsoleOutput((prevState) => [
-        ...prevState,
-        { type: 'error', data: `${error.name}: ${error.message}` },
-      ]);
-    }
-    setConsoleInput('');
-  };
-
-  const handleClearButtonClick = () => {
-    setConsoleOutput([]);
-    inputRef.current.focus();
+  const handleClear = () => {
+    setOutput('');
   };
 
-  const handleCloseButtonClick = () => {
-    setIsConsoleOpen(false);
-    setConsoleOutput([]);
-  };
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        setIsConsoleOpen(false);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-
-  return (
-    <footer className={styles.console}>
-      {!isConsoleOpen && (
-        <button className={styles.consoleButton} onClick={handleConsoleButtonClick}>
-          Console.log
-        </button>
-      )}
-      {isConsoleOpen && (
-        <div className={styles.consoleWrapper}>
-          <div className={styles.consoleHeader}>
-            <button className={styles.closeButton} onClick={handleCloseButtonClick}>
-              X
-            </button>
-            <button className={styles.minimizeButton} onClick={() => setIsConsoleOpen(false)}>
-              &minus;
-            </button>
-            <button className={styles.maximizeButton} onClick={() => setIsConsoleOpen(true)}>
-              &#x25A1;
-            </button>
-          </div>
-          <div className={styles.consoleBody}>
-            {consoleOutput.map((output, index) => (
-              <div key={index} className={output.type === 'error' ? styles.error : styles.output}>
-                {output.data}
-              </div>
-            ))}
-            <form onSubmit={handleConsoleInputSubmit}>
-              <input
-                type="text"
-                name="consoleInput"
-                className={styles.input}
-                value={consoleInput}
-                onChange={(event) => setConsoleInput(event.target.value)}
-                ref={inputRef}
-              />
-            </form>
-          </div>
-          <div className={styles.consoleFooter}>
-            <button className={styles.clearButton} onClick={handleClearButtonClick}>
-              Clear
-            </button>
-          </div>
+  if (isOpen) {
+    return (
+      <div className={style.console}>
+        <div className={style.header}>
+          <h2>Console</h2>
+          <button onClick={handleClear}>Clear</button>
+          <button onClick={close}>x</button>
         </div>
-      )}
-    </footer>
-  );
+        <div className={style.out}>{output}</div>
+        <textarea onChange={(event) => setOutput(event.target.value)} value={output} />
+      </div>
+    );
+  } else {
+    return null;
+  }
 };

src/components/common/Console/Console.module.scss

@@ -1,115 +1,53 @@
-$console-color: #2b2b2b;
-$console-bg: #f2f2f2;
-$console-border: 1px solid #ccc;
+@import '../../../scss/index.scss';
 
 .console {
   display: flex;
-  justify-content: center;
-  margin-top: 2rem;
+  flex-direction: column;
+  height: 20%;
 
-  &Button {
-    background-color: $console-color;
-    color: #fff;
-    border: none;
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-
-    &:hover {
-      background-color: darken($console-color, 5%);
-    }
-  }
-
-  &Wrapper {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 1rem;
-    background-color: $console-bg;
-    border-top: $console-border;
-    border-bottom: $console-border;
-    z-index: 999;
-  }
-
-  &Header {
+  .header {
     display: flex;
-    justify-content: flex-end;
-    margin-bottom: 1rem;
-  }
-
-  &CloseButton {
-    background-color: transparent;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-
-    &:hover {
-      color: $console-color;
+    flex-direction: row;
+    align-items: center;
+    background-color: #060606;
+    color: #aaaebd;
+    padding: 7px 10px;
+
+    h2 {
+      font-weight: 700;
+      font-size: 1.1rem;
+      margin-right: auto;
     }
-  }
-
-  &ClearButton {
-    background-color: $console-color;
-    color: #fff;
-    border: none;
-    padding: 0.5rem 1rem;
-    margin-left: 1rem;
-    cursor: pointer;
 
-    &:hover {
-      background-color: darken($console-color, 5%);
+    button {
+      @extend %buttonGrey;
+      border-radius: 3px;
+      padding: 5px 8px;
     }
-  }
-
-  &Body {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    font-family: monospace;
-
-    &Input {
-      display: flex;
-
-      &Text {
-        flex: 1;
-        padding: 0.5rem;
-        border: $console-border;
-        border-radius: 0.25rem;
-        margin-right: 1rem;
-
-        &:focus {
-          outline: none;
-          border-color: $console-color;
-        }
-      }
 
-      &Button {
-        background-color: $console-color;
-        color: #fff;
-        border: none;
-        padding: 0.5rem 1rem;
-        cursor: pointer;
-
-        &:hover {
-          background-color: darken($console-color, 5%);
-        }
-      }
+    button:last-of-type {
+      margin-left: 5px;
     }
+  }
 
-    &Output {
-      padding: 0.5rem;
-      margin-bottom: 0.5rem;
-      border-radius: 0.25rem;
-
-      &.Error {
-        background-color: #ffcccc;
-        color: #ff0000;
-      }
+  .out {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: #1d1e22;
+    color: white;
+  }
 
-      &.Output {
-        background-color: #e6ffe6;
-        color: #008000;
-      }
-    }
+  // FIXME: height
+  textarea {
+    color: white;
+    height: 30px;
+    padding: 7px;
+    font-size: 15px;
+    background-color: #343539;
+    border: none;
+    margin-bottom: 0;
+    resize: none;
+    outline: none;
   }
 }

src/components/pages/PenPage/PenPage.jsx

@@ -10,10 +10,12 @@ import { Bar, Container, Section } from 'react-simple-resizer';
 import { Editors } from '../../common/Editors/Editors';
 import { ErrorPage } from '../ErrorPage/ErrorPage';
 import { Console } from '../../common/Console/Console';
+import { usePopup } from '../../../hooks/usePopup';
 
 export const PenPage = () => {
   const dispatch = useDispatch();
   const { id } = useParams();
+  const console = usePopup();
   const { isLoading, error, files } = useSelector((state) => state.currentWork);
   const [isSizeChanged, setIsSizeChanged] = useState(false);
   const { html, css, js } = files;
@@ -40,7 +42,12 @@ export const PenPage = () => {
         style={isSizeChanged ? { pointerEvents: 'none' } : null}
         children={<Preview html={html.text} css={css.text} js={js.text} />}
       />
-      <Console />
+
+      <Console isOpen={console.isPopupVisible} close={console.close} />
+
+      <footer>
+        <button onClick={console.toggle}>console</button>
+      </footer>
     </Container>
   );
 };

src/components/pages/PenPage/PenPage.module.scss

@@ -1,4 +1,4 @@
-@import "../../../scss/index.scss";
+@import '../../../scss/index.scss';
 
 .container {
   width: 100vw;
@@ -34,3 +34,15 @@
   border-top: 1px solid #2f2f2f;
   border-bottom: 1px solid #2f2f2f;
 }
+
+footer {
+  background-color: black;
+  height: 40px;
+}
+
+footer button {
+  margin: 8px;
+  @extend %buttonGrey;
+  border-radius: 3px;
+  padding: 5px 8px;
+}