signup

frontend/src/Pages/signup.tsx

-import React from "react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
 
-export default function Signup() {
-    return (
-      <div>
-        signup page
+function PasswordUpdate() {
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
 
-      </div> // Signup Page
-    );
+  const handleSubmit = () => {
+
+    if (password && confirm){
+    
+      if (password==confirm) {
+        alert("비밀번호가 일치합니다.");
+      } else {
+        alert("비밀번호가 다릅니다.");
+      }
+    }else {
+      alert("비밀번호가 입력되지 않았습니다.")
     }
+
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        className="border border-black"
+        type="password"
+        name="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value )}
+      />
+      <input
+        className="border border-black"
+        type="confirm"
+        name="confirm"
+        value={confirm}
+        onChange={(e) => setConfirm(e.target.value )}
+      />
+      <button type="submit">비밀번호 확인</button>
+    </form>
+  );
+}
+
+
+
+export default function Signup () {
+  return(
+
+  <div className="gap-5">
+    
+      <div className="flex flex-col gap-2">
+        <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="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="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
+            " name="firstPassword"placeholder="비밀번호" type="text"/>
+        </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"/>
+        </div>
+        <div className="showText place-self-center">
+        <PasswordUpdate />
+        </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="Id" type="text" name="Id"/>
+        </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