wip: 로그인 상태값 변경테스트

로그인상태값에 따라 인풋폼과 화면이동버튼 컨포넌트 전환 #14
Soongsil-University-MakeUs-Challenge · Aug 20, 2022 · 81cd6db · 81cd6db
1 parent 91fc685
commit 81cd6db
Show file tree

Hide file tree

Showing 2 changed files with 1,791 additions and 19 deletions.
diff --git a/pages/login/index.js b/pages/login/index.js
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { func } from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import styles from "../../styles/Login.module.css";
@@ -11,30 +12,42 @@ export default function Login(){
         setCodeNumber( value )
     }
 
+    const [isLoginSuccess, setIsLoginSuccess] = useState(false)
+
+    const onLoginChange = () => {
+        setIsLoginSuccess(prev => !prev)
+    }
+
+    console.log(isLoginSuccess)
+
     return(
         <div className={styles.background}>
             <div className={styles.logo_img}/>
-                <div><a className={styles.inputrequest}>Input your code number..</a>
-                    <div>
-                        <input
-                            name="student-id"
-                            type="text"
-                            value={codeNumber}
-                            className={styles.inputBox}
-                            onChange={onChange}
-                            placeholder="code number"/>
-
-                        <div className={styles.prove}>
-                            <a><span style={{color:"#F9E219"}}>학번</span>으로 대숭실대 우주전사임을 증명해주세요!</a>
+                { !isLoginSuccess && 
+                    <div><a className={styles.inputrequest}>Input your code number..</a>
+                        <div>
+                            <input
+                                name="student-id"
+                                type="text"
+                                value={codeNumber}
+                                className={styles.inputBox}
+                                onChange={onChange}
+                                placeholder="code number"/>
+
+                            <div className={styles.prove}>
+                                <a><span style={{color:"#F9E219"}}>학번</span>으로 대숭실대 우주전사임을 증명해주세요!</a>
+                            </div>
                         </div>
                     </div>
-
-                </div>
-                <div className={styles.loginBtn}><a href="/login">Login{">"}</a></div>
-                <div className={styles.ssumcLogo}><a>SSUMC</a></div>
-                <div className={styles.startrequest}><a>Do you want to go <br/> hunting stardust?</a></div>
-                <div><button className={styles.goBtn}>Go!</button></div>
-                <div><button className={styles.awayBtn}>Run away?</button></div>
+                }
+
+                { !isLoginSuccess &&  <div className={styles.loginBtn} onClick={onLoginChange}>Login{">"}</div> }
+
+                { isLoginSuccess &&  <div className={styles.startrequest}><a>Do you want to go <br/> hunting stardust?</a></div> }
+                { isLoginSuccess && <div><button className={styles.goBtn}>Go!</button></div> }
+                { isLoginSuccess && <div><button className={styles.awayBtn} onClick={onLoginChange}>Run away?</button></div> }
+
+                <div className={styles.ssumcLogo}><a>SSUMC</a></div>   
         </div>  
     )
 }