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

Fire 277 fe 모달창 interactions 추가하기

Author: 071yoon

src/components/atoms/Modal.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled from 'styled-components';
+import vectors from './Vectors';
+
+export default function Modal({
+  modalHandler,
+  children,
+}: {
+  modalHandler: () => void;
+  children: any;
+}) {
+  return (
+    <ModalBackground onClick={modalHandler}>
+      <ModalBox onClick={(e) => e.stopPropagation()}>
+        <VectorX
+          src={vectors.X}
+          left={93}
+          top={6}
+          size={2}
+          onClick={modalHandler}
+        />
+        {children}
+      </ModalBox>
+    </ModalBackground>
+  );
+}
+
+interface Position {
+  size?: number;
+  left?: number;
+  top: number;
+  right?: number;
+}
+
+const ModalBackground = styled.div`
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  display: flex;
+  z-index: 999;
+`;
+
+const VectorX = styled.img<Position>`
+  position: absolute;
+  width: ${(props) => props.size}rem;
+  left: ${(props) => props.left}%;
+  top: ${(props) => props.top}%;
+  cursor: pointer;
+`;
+
+const ModalBox = styled.div`
+  position: fixed;
+  background-color: rgb(22, 29, 52);
+  border-radius: 1rem;
+  display: flex;
+  width: 842px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  top: 20rem;
+  padding: 9rem 3rem 7rem 3rem;
+`;

src/components/layout/Modal.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import UserStore from '../../stores/userStore';
+import vectors from '../atoms/Vectors';
 
 export default function InputNickname() {
   const navigate = useNavigate();
@@ -48,51 +49,104 @@ export default function InputNickname() {
     // socket.emit('ENTER_ROOM', payload, (confirmRoomId) => {
     //   navigate(`screens`);
     // });
-    navigate(`lobby`);
+    navigate(`/`);
   };
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNickname(event.target.value);
   };
 
   return (
-    <Form onSubmit={onSubmit}>
-      <Input
-        autoComplete="off"
-        value={nickname}
-        onChange={onChange}
-        placeholder="Enter ID"
-        id="nickname"
-      />
-      <Button disabled={nickname === null || !nickname.length}>Enter</Button>
-    </Form>
+    <>
+      <Vector src={vectors.Lamp} left={0} top={0} size={40} />
+      <Vector src={vectors.Book} left={28.7} top={14.4} size={60} />
+      <Message>
+        <TitleLogo>
+          모여서 도란도란 코딩,<span>Modoco</span>
+        </TitleLogo>
+        <TitleStart>시작하기</TitleStart>
+      </Message>
+      <Form onSubmit={onSubmit}>
+        <Input
+          autoComplete="off"
+          value={nickname}
+          onChange={onChange}
+          placeholder="Enter ID"
+          id="nickname"
+        />
+        <Button disabled={nickname === null || !nickname.length}>Enter</Button>
+        {/* <Button>GitHub 계정</Button> */}
+      </Form>
+    </>
   );
 }
 
+interface Position {
+  size?: number;
+  left?: number;
+  top: number;
+  right?: number;
+}
+
+const Vector = styled.img<Position>`
+  position: absolute;
+  width: ${(props) => props.size}rem;
+  left: ${(props) => props.left}%;
+  top: ${(props) => props.top}%;
+  opacity: 0.5;
+  z-index: 1000;
+`;
+
+const Message = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  width: 100%;
+  z-index: 1001;
+`;
+
+const TitleLogo = styled.div`
+  font-size: 18px;
+  font-family: IBMPlexMonoRegular;
+`;
+
+const TitleStart = styled.div`
+  font-family: Pretendard;
+  font-weight: 500;
+  font-size: 4rem;
+  margin-top: 2rem;
+`;
+
 const Form = styled.form`
-  margin-top: 10rem;
+  margin-top: 15rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
+  z-index: 1001;
   button,
   input {
-    height: 5rem;
-    border-radius: 0.5rem;
-    width: 100%;
-    max-width: 30rem;
-    font-size: 2rem;
-    box-shadow: 2px 2px rgb(0 0 0 / 18%);
+    font-family: Pretendard;
+    font-weight: 600;
+    height: 6rem;
+    width: 40rem;
+    border-radius: 0.8rem;
   }
 `;
 
 const Button = styled.button`
-  background-color: #fbeaeb;
+  font-size: 1.5rem;
+  background-color: white;
   margin-top: 2rem;
+  cursor: pointer;
 `;
 
 const Input = styled.input`
+  background-color: rgb(30, 41, 75);
+  color: white;
+  font-size: 1.7rem;
   text-justify: center;
   padding-left: 1rem;
 `;