1219chaemin

src/component/header.js

@@ -1,8 +1,25 @@
 import styles from '../css/Header.module.css';
 import homelogo from '../img/symbol-mark.png'
 import { Link } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import SignUp from '../pages/SignUp';
+import Login from '../pages/Login';
 
 function Header() {
+
+    const [LoginmodalOpen, setLoginModalOpen] = useState(false);
+    const [SignUpmodalOpen, setSignUpModalOpen] = useState(false);
+
+    // 모달창 노출
+    const showLoginModal = () => {
+        setLoginModalOpen(true);
+    };
+
+    const showSignUpModal = () => {
+        setSignUpModalOpen(true);
+    };
+
     return (
         <div>
             <header>
@@ -11,8 +28,10 @@ function Header() {
                     <Link to="/" class={styles.hometitle}>이화여자대학교 맛집 오픈소스</Link>
                 </div>
                 <div class={styles.signInUp}>
-                    <Link to="/Login">로그인</Link>
-                    <Link to="/SignUp">회원가입</Link>
+                    <Link onClick={showLoginModal}>로그인</Link>
+                    {LoginmodalOpen && <Login setLoginModalOpen={setLoginModalOpen} />}
+                    <Link onClick={showSignUpModal}>회원가입</Link>
+                    {SignUpmodalOpen && <SignUp setSignUpModalOpen={setSignUpModalOpen} />}
                 </div>
             </header>
         </div>

src/css/Login.module.css

@@ -1,7 +1,7 @@
 /* .Header {
     float: center;
 } */
-
+/* 
 .Headline {
     font-family: 'Work Sans';
     font-style: normal;
@@ -45,4 +45,82 @@
     border-radius: 10px;
     text-align: center;
     color: white;
-}
+} */
+.container {
+    position: relative;
+    width: 400px;
+    height:250px;
+    padding: 30px 50px;
+    background: #FFF;
+    text-align: center;
+    border-radius: 15px;
+      /* 모달창 크기 */
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px;
+
+    z-index : 100;
+
+  /* 최상단 위치 */
+  z-index: 999;
+
+  /* 중앙 배치 */
+  /* top, bottom, left, right 는 브라우저 기준으로 작동한다. */
+  /* translate는 본인의 크기 기준으로 작동한다. */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.container::after {
+    content: '';
+    position: absolute;
+    top: -200px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 420px;
+    background-position: top;
+    background-size: cover;
+    z-index: -11;
+}
+
+.inputbox{
+    display: flex;
+    flex-direction: column;
+}
+
+.logindesc{
+
+}
+
+  /* 모달창 내부 X버튼 */
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+
+    /*디자인*/
+    background: #222228;
+    border-radius: 15px;
+    border: 1px solid #202020;
+    cursor: pointer;
+    color: #ffffff;
+    font-family: Arial;
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    -webkit-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+    transition: all 0.4s;
+  }

src/css/SignUp.module.css

@@ -1,68 +1,126 @@
-.SignIn {
+/* .Header {
     float: center;
-    margin: 0;
+} */
+/* 
+.Headline {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 55px;
+    line-height: 65px;
+    color: black;
 }
 
-.SignIn-logo {
-    float: left;
+.Left {
+    position: absolute;
+    width: 540px;
+    height: 443.72px;
+    left: 86px;
+    top: 369px;
+    color: black;
 }
 
-.SignIn-div-Headline {
-    float: center;
+.Right {
+    position: absolute;
+    width: 717px;
+    height: 421.72px;
+    left: 723px;
+    top: 391px;
+    color: black;
+}
+
+.Right-p {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 40px;
+    line-height: 47px;
     display: flex;
+    align-items: center;
     text-align: center;
 }
 
-.SignIn-table-Th1 {
-    width: 20%;
-    background-color: rgba(217, 217, 217, 0.8);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
-}
+.button {
+    background: #00462A;
+    border-radius: 10px;
+    text-align: center;
+    color: white;
+} */
+.container {
+    position: relative;
+    width: 400px;
+    height:250px;
+    padding: 30px 50px;
+    background: #FFF;
+    text-align: center;
+    border-radius: 15px;
+      /* 모달창 크기 */
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px;
 
-.SignIn-table-tr {
-    width: 100%;
-}
+    z-index : 100;
 
-#lastLine {
-    border-bottom: none;
+  /* 최상단 위치 */
+  z-index: 999;
+
+  /* 중앙 배치 */
+  /* top, bottom, left, right 는 브라우저 기준으로 작동한다. */
+  /* translate는 본인의 크기 기준으로 작동한다. */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-.SignIn-table-input {
-    background-color: rgba(217, 217, 217, 0.21);
-    border: 1px solid #000000;
-    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25);
-    border-radius: 10px;
+.container::after {
+    content: '';
     position: absolute;
-    width: 806px;
-    height: 56px;
-    left: 470px;
-
+    top: -200px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 420px;
+    background-position: top;
+    background-size: cover;
+    z-index: -11;
 }
 
-.SignIn-table-input.withButton {
-    width: 615px;
+.inputbox{
+    display: flex;
+    flex-direction: column;
 }
 
-.SignIn-table-Th1-p {
-    font-size: 24px;
-    left: 470px;
-}
+.logindesc{
 
-.SignIn-table-button {
-    background-color: #00462A;
-    color: white;
-    position: absolute;
-    width: 171px;
-    height: 343px;
-    left: 1100px;
 }
-
-#black_button {
-    background-color: black;
+  
+  /* 모달창 내부 X버튼 */
+  .close {
     position: absolute;
-    width: 337.97px;
-    height: 81px;
-    left: 551px;
-    top: 877px;
-    font-size: 30px;
-}
+    right: 10px;
+    top: 10px;
+
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+
+    /*디자인*/
+    background: #222228;
+    border-radius: 15px;
+    border: 1px solid #202020;
+    cursor: pointer;
+    color: #ffffff;
+    font-family: Arial;
+    font-size: 15px;
+    font-weight: 600;
+    text-decoration: none;
+    -webkit-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+    transition: all 0.4s;
+  }

src/pages/Login.js

@@ -11,7 +11,7 @@ import {
 } from "firebase/auth";
 import { auth } from "./firebase";
 
-const Login = () => {
+const Login = ({ setLoginModalOpen, id, title, content, writer }) => {
     const [registerEmail, setRegisterEmail] = useState("");
     const [registerPassword, setRegisterPassword] = useState("");
 
@@ -23,6 +23,9 @@ const Login = () => {
         setUser(currentUser);
     });
 
+    const closeLoginModal = () => {
+        setLoginModalOpen(false);
+    };
 
     //로그인
     const login = async () => {
@@ -44,11 +47,16 @@ const Login = () => {
     };
 
     return (
-        <div style={{ textAlign: "center", margin: 10 }}>
+        <div>
 
-            <div>
+        <div className={styles.container}>
                 {/* 로그인 */}
-                <h3>Login</h3>
+                <button className={styles.close} onClick={closeLoginModal}>
+                X
+            </button>
+            <h3>Login</h3>
+            <div class={styles.logindesc}>
+                <div class={styles.inputbox}>
                 <input
                     placeholder="Email"
                     onChange={(e) => {
@@ -61,9 +69,11 @@ const Login = () => {
                         setLoginPassword(e.target.value);
                     }}
                 />
+                </div>
                 <button onClick={login}>Login</button>
                 <div>User Logged In:</div>
                 <div>{user?.email}</div>
+                </div>
                 <button onClick={logout}>로그아웃</button>
             </div>
         </div>