FIRE-277 add enter keyboard event press

SWM-FIRE · Jul 11, 2022 · 44658f5 · 44658f5
1 parent b5432ba
commit 44658f5
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 24 deletions.
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal"></div>
     <script type="text/html" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/src/components/atoms/ModalPotal.tsx b/src/components/atoms/ModalPotal.tsx
@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom';
+
+const ModalPortal = ({ children }) => {
+  const el = document.getElementById('modal');
+  return ReactDOM.createPortal(children, el);
+};
+
+export default ModalPortal;
diff --git a/src/components/atoms/Modal.tsx → src/components/layout/Modal.tsx b/src/components/atoms/Modal.tsx → src/components/layout/Modal.tsx
@@ -1,27 +1,29 @@
 import React from 'react';
 import styled from 'styled-components';
-import vectors from './Vectors';
+import ModalPortal from '../atoms/ModalPotal';
+import vectors from '../atoms/Vectors';
 
-export default function Modal({
-  modalHandler,
-  children,
-}: {
-  modalHandler: () => void;
+type Props = {
   children: any;
-}) {
+  modalHandler: () => void;
+};
+
+export default function Modal({ modalHandler, children }: Props) {
   return (
-    <ModalBackground onClick={modalHandler}>
-      <ModalBox onClick={(e) => e.stopPropagation()}>
-        <VectorX
-          src={vectors.X}
-          left={93}
-          top={6}
-          size={2}
-          onClick={modalHandler}
-        />
-        {children}
-      </ModalBox>
-    </ModalBackground>
+    <ModalPortal>
+      <ModalBackground onClick={modalHandler}>
+        <ModalBox onClick={(e) => e.stopPropagation()}>
+          <VectorX
+            src={vectors.X}
+            left={93}
+            top={6}
+            size={2}
+            onClick={modalHandler}
+          />
+          {children}
+        </ModalBox>
+      </ModalBackground>
+    </ModalPortal>
   );
 }
 

diff --git a/src/components/login/InputNickname.tsx b/src/components/login/InputNickname.tsx
@@ -6,7 +6,11 @@ import { v4 as uuidv4 } from 'uuid';
 import UserStore from '../../stores/userStore';
 import vectors from '../atoms/Vectors';
 
-export default function InputNickname() {
+export default function InputNickname({
+  modalHandler,
+}: {
+  modalHandler: () => void;
+}) {
   const navigate = useNavigate();
   const { nickname, uid, setNickname, setUid } = UserStore();
   useEffect(() => {
@@ -56,6 +60,13 @@ export default function InputNickname() {
     setNickname(event.target.value);
   };
 
+  const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      setNickname(event.target.value);
+      modalHandler();
+    }
+  };
+
   return (
     <>
       <Vector src={vectors.Lamp} left={0} top={0} size={40} />
@@ -71,6 +82,7 @@ export default function InputNickname() {
           autoComplete="off"
           value={nickname}
           onChange={onChange}
+          onKeyPress={onKeyPress}
           placeholder="Enter Nickname"
           id="nickname"
         />

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -6,15 +6,19 @@ import vectors from '../components/atoms/Vectors';
 import Blocks from '../components/lobby/Blocks';
 import Search from '../components/lobby/Search';
 import InputNickname from '../components/login/InputNickname';
-import Modal from '../components/atoms/Modal';
+import Modal from '../components/layout/Modal';
 
 export default function Main() {
   const navigate = useNavigate();
   const [isModal, setIsModal] = useState(true);
-  const modalHandler = () => {
+  const closeModalHandler = () => {
     setIsModal(false);
   };
 
+  // const openModalHandler = () => {
+  //   setIsModal(true);
+  // };
+
   const randomEnter = () => {
     navigate(`/room/random`);
   };
@@ -43,8 +47,8 @@ export default function Main() {
         </ScrollMenu>
       </ScrollContainer>
       {isModal && (
-        <Modal modalHandler={modalHandler}>
-          <InputNickname />
+        <Modal modalHandler={closeModalHandler}>
+          <InputNickname modalHandler={closeModalHandler} />
         </Modal>
       )}
     </Container>