회원가입 폼 작성중/ for merge

client/pages/LoginPage.js

-import React from 'react';
-
-function LoginPage () {
-  return(
-    <p>로그인</p>
-  );
-}
-
-export default LoginPage;
\ No newline at end of file

client/src/App.js

@@ -5,17 +5,23 @@ import ScheduleEditPage from "./pages/ScheduleEditPage";
 import AdminPage from "./pages/AdminPage";
 import PrivateRoute from "./components/PrivateRoute";
 import Err from "./pages/ErrorPage";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
 
 function App() {
   return (
     <Router basename={process.env.PUBLIC_URL}>
-      <Switch>
-        <Route path="/" component={Err} />
-        <Route path="/home" component={HomePage} />
-        <Route path="/schedule/edit" component={ScheduleEditPage} />
-        <Route path="/schedule" component={SchedulePage} />
-        <PrivateRoute path="/admin" component={AdminPage} role="admin" />
-      </Switch>
+      <div className="mx-auto" style={{ width: "400px" }}>
+        <Switch>
+          <Route exact path="/" component={LoginPage} />
+          <Route path="/signup" component={SignupPage} />
+          <Route path="/home" component={HomePage} />
+          <Route path="/schedule/edit" component={ScheduleEditPage} />
+          <Route path="/schedule" component={SchedulePage} />
+          <PrivateRoute path="/admin" component={AdminPage} role="admin" />
+        </Switch>
+      </div>
+
     </Router>
   );
 }

client/src/components/SignupForm.js

+import React from 'react';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+
+const SignupForm = () => {
+  return (
+    <div>
+      <div>
+        <h1 className="text-center">회원가입</h1>
+      </div>
+      <Formik
+        initialValues={{
+          userID: '',
+          password: '',
+          repassword: '',
+          userName: '',
+          userStudNum: ''
+        }}
+
+        validationSchema={Yup.object({
+          userId: Yup.string()
+            .required('아이디를 입력해주세요.')
+            .max(15, '15자 이내로 입력해주세요.')
+            .min(5, '최소 5자 이상 입력해주세요.'),
+          password: Yup.string()
+            .required('비밀번호를 입력해주세요.')
+            .min(8, '최소 8자 이상 입력해주세요.'),
+          repassword: Yup.string()
+            .required('비밀번호를 입력해주세요.')
+            .min(8, '최소 8자 이상 입력해주세요.')
+            .oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
+          userName: Yup.string()
+            .required('이름을 입력해주세요.'),
+          userStudNum: Yup.string()
+            .required('학번을 입력해주세요.')
+            .min(7, '학번을 정확히 입력해주세요.'),
+        })}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            alert(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+      >
+        {formik => (
+          <form onSubmit={formik.handleSubmit}>
+            <div>
+              <label className="form-label">아이디</label>
+              <input type="text" name="userID"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('userID')} />
+              {formik.touched.userID && formik.errors.userID ? (
+                <div className="text-secondary">{formik.errors.userID}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">비밀번호</label>
+              <input type="password" name="password"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('password')} />
+              {formik.touched.password && formik.errors.password ? (
+                <div className="text-secondary">{formik.errors.password}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">비밀번호 확인</label>
+              <input type="password" name="repassword"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('repassword')} />
+              {formik.touched.repassword && formik.errors.repassword ? (
+                <div className="text-secondary">{formik.errors.repassword}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">이름</label>
+              <input type="text" name="userName"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('userName')} />
+              {formik.touched.userName && formik.errors.userName ? (
+                <div className="text-secondary">{formik.errors.userName}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">학번</label>
+              <input type="text" name="userStudNum"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('userStudNum')} />
+              {formik.touched.userStudNum && formik.errors.userStudNum ? (
+                <div className="text-secondary">{formik.errors.userStudNum}</div>
+              ) : null}
+            </div>
+            <button type="submit">확인</button>
+          </form>
+        )}
+      </Formik>
+    </div>
+  );
+}
+
+export default SignupForm;
+

client/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

client/src/pages/LoginPage.js

+import React from 'react';
+import { Formik } from 'formik';
+import * as yup from 'yup';
+import SignupForm from '../components/SignupForm';
+
+function LoginPage() {
+  return (
+    <>
+      <div>
+        <h1>오늘의 KU</h1>
+        <p>-일정관리앱</p>
+      </div>
+    </>
+  );
+}
+
+export default LoginPage;
\ No newline at end of file

client/pages/SignupPage.js → client/src/pages/SignupPage.js

-import React from 'react';
+import SignupForm from '../components/SignupForm';
 
 function SingupPage () {
+
   return(
-    <p>회원가입</p>
+    <SignupForm />
   );
 }
 
-export default SingupPage;
\ No newline at end of file
+export default SingupPage;