Merge remote-tracking branch 'origin/gyumin'

client/src/components/Login/Login.js

@@ -8,12 +8,15 @@ const Login = () => {
         <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-10" role="presentation">
-                    <button className={`nav-link active px-2 bg-black ${styles.fontSize}`} style={{ color: state ? "black" : "yellow", background: 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 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"}} 
+                    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 bg-black ${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" }}>비회원 예매 확인</button>
+                    <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>
                 </li>
             </ul>
 
@@ -31,14 +34,15 @@ const Login = () => {
                 {/* 비회원예매 학인 */}
                 <div className="tab-pane fade" id="guest" role="tabpanel" aria-labelledby="guest-tab">
                     <div className="d-flex flex-column">
-                        <input type="text" name="id" id="id" placeholder="ID" />
-                        <input type="text" name="password" id="password" placeholder="Password" minlength="8" required />
-                        <p>
+                        <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 />
+
+                        <p className={`text-white ${styles.fontSizeTwo}`}>
                             ※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
                         </p>
-                        <div class="guestLoginBtn">
-                            <input class="guestLoginBtn" type="submit" value="비회원 예매 확인" />
-                        </div>
+                            <input className="bg-ButterYellow text-dark border-0 rounded-2 mt-2" type="submit" value="비회원 예매 확인" />
                     </div>
                 </div>
             </div>

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

 .intoSignupPage{
-  font-size: 8px;
+  font-size: 10px;
   text-decoration: none;
   color: white;
 }
@@ -9,10 +9,15 @@
 }
 .input {
   margin: 0.5rem 0 0 0;
+  padding: 0.5rem 0 0.5rem 0;
   color:white;
   border-radius: 3px;
 }
 
 .fontSize{
-  font-size: 5px;
+  font-size: 16px;
+}
+
+.fontSizeTwo{
+  font-size: 10px;
 }
\ No newline at end of file

client/src/pages/LoginPage.js

@@ -3,7 +3,7 @@ import Login from "../components/Login/Login";
 
 const LoginPage = () => {
     return (
-        <div className="d-flex justify-content-center bg-dark">
+        <div className="d-flex justify-content-center py-5">
             <Login />
         </div>
     )