Merge remote-tracking branch 'origin/mk5' into develop

frontend/src/Pages/signup.tsx

-import React from "react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+
+function PasswordUpdate() {
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [result, setResult] = useState("");
+  const [email, setEmail] = useState("");
+  const [alert, setAlert] = useState("");
+
+  function isEmail() {
+    var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
+    
+      if(regExp.test(email)){
+        setAlert("이메일 형식이 맞습니다.")
+      }else{
+        setAlert("이메일 형식이 틀립니다.")
+      }
+     return
+  }
+
+  const reform = () => {
+
+    if (password && confirm){
+    
+      if (password==confirm) {
+        setResult("비밀번호가 일치합니다.");
+      } else {
+        setResult("비밀번호가 다릅니다.");
+      }
+    }else {
+      setResult("비밀번호가 입력되지 않았습니다.")
+    }
+
+  };
 
-export default function Signup() {
   return (
     <div>
-        signup page
+      <div className="place-self-center py-3 border-b border-white ">
+        <input
+          className="placeholder:text-slate-300
+          bg-white border border-slate-500 rounded-2xl
+          py-2 pl-9 pr-3 
+          focus:border-black"placeholder="비밀번호" type="text"
+          name="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value )}
+        />
+      </div>
+      <div className="place-self-center py-3 border-b border-white ">
+        
+        <input
+          className="placeholder:text-slate-300
+          bg-white border border-slate-500 rounded-2xl
+          py-2 pl-9 pr-3 
+          focus:border-black"placeholder="비밀번호 확인" type="text"
+          name="confirm"
+          value={confirm}
+          onKeyUp={reform} onChange={(e) => setConfirm(e.target.value )}
+          >
           
-      </div> // Signup Page
+        </input>
+      </div>
+      <p>{result}</p>
+
+      <input className="placeholder:text-slate-300
+            bg-white border border-slate-500 rounded-2xl
+            py-2 pl-9 pr-3 
+            focus:border-black
+            " placeholder="email" type="text" name="Id" 
+      onChange={(e) => setEmail(e.target.value )}
+      onKeyUp={isEmail}
+      />
+      <p>{alert}</p>
+    </div>
   );
-  }
\ No newline at end of file
+}
+
+
+
+export default function Signup () {
+  return(
+
+  <div className="gap-5 flex flex-col ">
+    <div className="p-12 w-1/2 h-1/2 md:w-40 md:h-1/6 bg-red-400 place-self-center rounded-2xl">
+          <Link to="/">Travel Report</Link>
+        </div>
+      <div className="flex flex-col w-auto h-80 md:w-1/2 bg-white border-2 border-black grid place-items-center rounded-xl place-self-center">
+        
+          
+        <div className="place-self-center py-3 border-b border-white ">
+          <input className="placeholder:text-slate-300
+            bg-white border border-slate-500 rounded-2xl
+            py-2 pl-9 pr-3 
+            focus:border-black" placeholder="ID " type="text"/>
+        </div>
+          
+        <div className="showText place-self-center">
+          <PasswordUpdate />
+        </div>
+        
+        <button className="place-self-center py-3 border-b border-white 
+            ">
+              회원가입 버튼
+        </button>
+            
+      </div> 
+    
+    
+  </div>
+  )
+}
+//출처 : //https://www.daleseo.com/react-forms/
\ No newline at end of file

frontend/src/pages/login.tsx

-import { Link, Outlet } from "react-router-dom";
+import { Link, } from "react-router-dom";
 import React from "react";
 
+
+
 export default function Login () {
     return (
+        
     <div>
-        <div className="flex flex-col grid grid-rows-2 place-items-center">
+        <div className="flex flex-row grid grid-rows-2">
         
-            <div className="w-1/2 h-1/2 md:w-40 md:h-40 bg-red-400 place-self-center ">
+            <div className=" p-12 w-1/2 h-1/2 md:w-40 md:h-40 bg-red-400 place-self-center rounded-2xl">
             <Link to="/">Travel Report</Link>
             </div>
 
-            <div className="flex-row w-full h-80 md:w-1/2 bg-amber-300 grid place-items-center">
+            <div className=" flex-row w-auto h-60 md:w-1/2 bg-white border-2 border-black grid place-items-center rounded-xl place-self-center">
                 
-                <div className="flex flex-col w-full md:flex-row ">
+                <div className="flex flex-col w-full  md:flex-row md:p-20 md:gap-10">
 
-                    <div className="flex flex-col w-full">
+                    <div className="flex flex-col md:w-2/3 md:gap-2">
 
-                        <input className="placeholder:italic placeholder:text-slate-300 block
-                        bg-white border border-slate-500 rounded-md 
-                        py-2 pl-9 pr-3 shadow-sm 
-                        focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-2 
+                        <input className="placeholder:text-slate-300
+                        bg-white border border-slate-500 rounded-2xl
+                        py-2 pl-9 pr-3 
+                        focus:border-black
                         " placeholder="Id" type="text" name="Id"/>
-                        <input className="placeholder:italic placeholder:text-slate-300 block 
-                        bg-white border border-slate-500 rounded-md 
-                        py-2 pl-9 pr-3 shadow-sm 
-                        focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 
+                        <input className="placeholder:italic placeholder:text-slate-300
+                        bg-white border border-slate-500 rounded-2xl
+                        py-2 pl-9 pr-3 
+                        focus:border-black
                         " placeholder="Password" type="text" name="Password"/>
 
                     </div>
 
-                    <button className="w-full bg-sky-600 hover:bg-sky-700 ...">
-                    Log-in
+                    <button className="md:w-1/3 bg-sky-600 hover:bg-sky-700 rounded-xl">
+                    login
                     </button>
                 </div>
-            
-            </div>
-        
-        
-        </div>
-        <div className="flex-row relative w-full h-20 grid place-items-center">
-            <button className="bg-white  left-1 top-0">
+                <div className="flex-row grid grid-cols-3">
+                    <button className="bg-white bottom-0 right-0">
                         <Link to="/signup">회원가입</Link>
                     </button>
-            <button className="bg-white  left-2 top-0">
+                    <div></div>
+                    <button className="bg-white inset-x-0">
                         <Link to="/forgot">비밀번호 찾기</Link>
                     </button>
                 </div>
+            </div>
+        
+        
+        </div>
+        
     </div> // Login Page
     );
   }
\ No newline at end of file