signup추가

client/src/components/Signup/Signup.js

@@ -2,47 +2,14 @@ import styles from "./signup.module.scss";
 
 const Signup = () => {
     return (
-        <div className={`d-flex ${styles.signup} col-md-8 col-12 align-items-center`}>
-            <table>
-                <colgroup>
-                    <col class="col1" />
-                    <col />
-                </colgroup>
-                <tbody>
-                    <tr>
-                        <th>
-                            <label for="guestName">이름</label>
-                        </th>
-                        <td><input type="text" placeholder="이름" /></td>
-                    </tr>
-                    <tr>
-                        <th>
-                            <label for="guestBirthday">생년월일</label>
-                        </th>
-                        <td><input type="text" placeholder="생년월일(6자리)" /></td>
-                    </tr>
-                    <tr>
-                        <th>
-                            <label for="guestMbnum">휴대폰 번호</label>
-                        </th>
-                        <td><input type="text" placeholder="'-'없이 입력" /></td>
-                    </tr>
-                    <tr>
-                        <th>
-                            <label for="guestPassword">비밀번호</label>
-                        </th>
-                        <td><input type="password" placeholder="숫자 4자리" /></td>
-                    </tr>
-                    <tr>
-                    </tr>
-                </tbody>
-            </table>
-            <p>
-                ※ 비회원 정보 오 입력 시 예매 내역 확인/취소 및 티켓 발권이 어려울 수 있으니 다시 한번 확인해 주시기 바랍니다.
-            </p>
-            <div class="guestLoginBtn">
-                <input class="guestLoginBtn" type="submit" value="비회원 예매 확인" />
-            </div>
+        <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="가입하기" />
+                    </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;
+    border-radius: 3px;
+  }
\ No newline at end of file

client/src/pages/SignupPage.js

@@ -2,7 +2,7 @@ import Signup from '../components/Signup'
 
 const SignupPage = () => {
     return (
-        <div>
+        <div className="d-flex justify-content-center">
             <Signup/>
         </div>
     )