Merge pull request #41 from SWM-FIRE/FIRE-277-fe-모달창-interactions-추가하기

Fire 277 fe 모달창 interactions 추가하기
SWM-FIRE · Jul 11, 2022 · ea6b7e0 · ea6b7e0
2 parents 56cca9b + 44658f5
commit ea6b7e0
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 27 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,7 +82,8 @@ export default function InputNickname() {
           autoComplete="off"
           value={nickname}
           onChange={onChange}
-          placeholder="Enter ID"
+          onKeyPress={onKeyPress}
+          placeholder="Enter Nickname"
           id="nickname"
         />
         <Button disabled={nickname === null || !nickname.length}>Enter</Button>
@@ -113,7 +125,7 @@ const TitleLogo = styled.div`
 `;
 
 const TitleStart = styled.div`
-  font-family: Pretendard;
+  font-family: PretendardRegular;
   font-weight: 500;
   font-size: 4rem;
   margin-top: 2rem;
@@ -128,7 +140,7 @@ const Form = styled.form`
   z-index: 1001;
   button,
   input {
-    font-family: Pretendard;
+    font-family: PretendardRegular;
     font-weight: 600;
     height: 6rem;
     width: 40rem;

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/main/Blocks';
 import Search from '../components/main/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>