loginAndSignupState임시저장+css

client/src/components/Login/Login.js

@@ -2,21 +2,48 @@ import { useState } from "react";
 import styles from "./login.module.scss";
 
 const Login = () => {
-    const [state, setState] = useState(true)
+    //useState를 이용해서 각 state 생성 및 초기값 저장
+    const [state, setState] = useState(true); // 이 줄은 css에 해당하는 state
+    const [loginText, setLoginText] = useState({
+        id:'',
+        password:''
+    });
+
+    const [guestText, setGusetText] = useState({
+        guestName:'',
+        gusetBirthday:'',
+        gusetMbnum:'',
+        guestPassword:''
+    })
+
+    //input태그에 걸려있는 onchange에서 실행할 함수설정
+    const handleLoginOnChange = (e) =>{
+        // ... 전개 연산자
+        // 현재 state에 방금 변화한 값을 다시 저장함
+        setLoginText({ ...loginText,
+            [e.target.name]:e.target.value,
+        })
+    };
+
+    const handleGuestOnChange = (e) =>{
+        setGusetText({ ...guestText,
+            [e.target.name]:e.target.value
+        })
+    }
 
     return (
         <div className={`d-flex flex-column col-md-5 col-10`}>
             {/* nav-tabs */}
             <ul className="nav nav-fill nav-tabs w-100" id="loginTab" role="tablist">
                 <li className="nav-item fs-6" role="presentation">
-                    <button className={`nav-link active px-2 ${styles.fontSize}`} style={{ color: state ? "black" : "yellow", backgroundColor: state ? "yellow" : "black"}} 
+                    <button className={`nav-link active px-2 ${styles.fontSize}`} style={{ color: state ? "black" : "#FEDC00", backgroundColor: state ? "#FEDC00" : "black"}} 
                     id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true" 
                     onClick={() => setState(true)}>로그인</button>
                 </li>
                 <li className="nav-item" role="presentation">
                     <button className={`nav-link px-2 ${styles.fontSize}`}
                     id="guest-tab" data-bs-toggle="tab" data-bs-target="#guest" type="button" role="tab" aria-controls="guest" aria-selected="false" 
-                    onClick={() => setState(false)} style={{ color: state ? "yellow" : "black", backgroundColor: state ? "black" : "yellow" }}>비회원 예매 확인</button>
+                    onClick={() => setState(false)} style={{ color: state ? "#FEDC00" : "black", backgroundColor: state ? "black" : "#FEDC00" }}>비회원 예매 확인</button>
                 </li>
             </ul>
 
@@ -24,9 +51,9 @@ const Login = () => {
                 {/* 로그인 */}
                 <div className="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
                     <div className="d-flex flex-column ">
-                        <input className={styles.input} type="text" name="id" id="id" placeholder="ID" />
-                        <input className={styles.input} type="text" name="password" id="password" placeholder="Password" minlength="8" required />
-                        <input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="Login" />
+                        <input className={styles.input} type="text" name="id" placeholder="ID" onChange={handleLoginOnChange}/>
+                        <input className={styles.input} type="text" name="password" placeholder="Password" onChange={handleLoginOnChange} minlength="8" required />
+                    <input className={`border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`} type="submit" value="Login" />
                         <span><a href="./signup" className={styles.intoSignupPage}>회원이 아니십니까?</a></span>
                     </div>
                 </div>
@@ -34,15 +61,15 @@ const Login = () => {
                 {/* 비회원예매 학인 */}
                 <div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
                     <div className="d-flex flex-column">
-                        <input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" minlength="8" required />
-                        <input className={styles.input} type="text" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" minlength="8" required />
-                        <input className={styles.input} type="text" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" minlength="8" required />
-                        <input className={styles.input} type="text" name="guestPassword" id="password" placeholder="비밀번호" minlength="8" required />
+                        <input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" onChange={handleGuestOnChange} minlength="8" required />
+                        <input className={styles.input} type="number" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" onChange={handleGuestOnChange} minlength="8" required />
+                        <input className={styles.input} type="number" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" onChange={handleGuestOnChange} minlength="8" required />
+                        <input className={styles.input} type="text" name="guestPassword" id="password" placeholder="비밀번호" onChange={handleGuestOnChange} minlength="8" required />
 
                         <p className={`text-white ${styles.fontSizeTwo}`}>
                             ※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
                         </p>
-                            <input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="비회원 예매 확인" />
+                            <input className={`border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`} type="submit" value="비회원 예매 확인" />
                     </div>
                 </div>
             </div>

client/src/components/Login/login.module.scss

 .intoSignupPage{
-  font-size: 10px;
+  font-size: 13px;
   text-decoration: none;
   color: white;
 }
@@ -10,7 +10,7 @@
 .input {
   margin: 0.5rem 0 0 0;
   padding: 0.5rem 0 0.5rem 0;
-  color:white;
+  color:black;
   border-radius: 3px;
 }
 
@@ -19,5 +19,15 @@
 }
 
 .fontSizeTwo{
-  font-size: 10px;
+  font-size: 11px;
+}
+
+.butterYellow{
+  background-color:  #FEDC00;
+}
+
+.btnHover:hover{
+background-color: black;
+color: #FEDC00;
+transition: 1s ease-out;
 }
\ No newline at end of file

client/src/components/Signup/Signup.js

 import styles from "./signup.module.scss";
+import { useState } from 'react';
 
 const Signup = () => {
+
+    const [userText, setUserState] = useState({
+        userName: '',
+        userBirthday: 0,
+        userMbnum: 0,
+        userPassword: '',
+        userRePassword: ''
+    })
+
+    const handleUserOnChange = (e) => {
+        setUserState({
+            ...userText,
+            [e.target.name]: e.target.value
+        })
+    }
+
+
     return (
         <div className={`d-flex ${styles.signup} col-md-8 col-12 justify-content-center`}>
             <div className="d-flex flex-column">
-                        <input className={styles.input} type="text" name="guestName" id="guestName" placeholder="이름" minlength="8" required />
-                        <input className={styles.input} type="text" name="gusetBirthday" id="gusetBirthday" placeholder="생년월일" minlength="8" required />
-                        <input className={styles.input} type="text" name="gusetMbnum" id="gusetMbnum" placeholder="휴대폰 번호" minlength="8" required />
-                        <input className={styles.input} type="text" name="guestPassword" id="password" placeholder="비밀번호" minlength="8" required />
-                        <input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="가입하기" />
+                {console.log(userText)}
+                <div className={styles.contents}>
+                    <label className={styles.signupLabel}>아이디</label>
+                    <input className={styles.input} type="text" name="userName" id="userID" placeholder="8자리" onChange={handleUserOnChange} minlength="8" required />
+                    <button className={` border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`}>중복확인</button>
+                </div>
+                <div className={styles.contents}>
+                    <label className={styles.signupLabel}>별명</label>
+                    <input className={styles.input} type="text" name="userName" id="userName" placeholder="별명" onChange={handleUserOnChange} minlength="8" required />
+                </div>
+                <div className={styles.contents}>
+                    <label className={styles.signupLabel}>생년월일</label>
+                    <input className={styles.input} type="number" name="userBirthday" id="userBirthday" placeholder="6자리" onChange={handleUserOnChange} minlength="6" required />
+                </div>
+                <div className={styles.contents}>
+                    <label className={styles.signupLabel}>휴대폰 번호</label>
+                    <input className={styles.input} type="number" name="userMbnum" id="userMbnum" placeholder="-없이 8자리 입력" onChange={handleUserOnChange} minlength="8" required />
+                </div>
+                <div className={styles.contents}>
+                    <label className={styles.signupLabel}>비밀번호</label>
+                    <input className={styles.input} type="text" name="userPassword" id="password" placeholder="비밀번호" onChange={handleUserOnChange} minlength="8" required />
+                    <input className={styles.input} type="text" name="userRePassword" id="password" placeholder="비밀번호 확인" onChange={handleUserOnChange} minlength="8" required />
+                </div>
+
+                <input className={` border-0 rounded-2 mt-2 ${styles.butterYellow} ${styles.btnHover}`} type="submit" value="가입하기" />
             </div>
         </div>
     )

client/src/components/Signup/signup.module.scss

 .input {
     margin: 0.5rem 0 0 0;
     padding: 0.5rem 0 0.5rem 0;
-    color:white;
+    color:black;
     border-radius: 3px;
   }
+  
+.butterYellow{
+  background-color:  #FEDC00;
+}
+
+.btnHover:hover{
+background-color: black;
+color: #FEDC00;
+transition: 1s ease-out;
+}
+.contents{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 5px;
+}
+.signupLabel{
+  color: white;
+}
\ No newline at end of file