Merge branch 'rkyoung7'

client/package.json

@@ -10,11 +10,13 @@
     "bootstrap": "^5.1.1",
     "bootstrap-icons": "^1.5.0",
     "node-sass": "^6.0.1",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
 import HomePage from "./pages/HomePage";
 import SchedulePage from "./pages/SchedulePage";
 import ScheduleEditPage from "./pages/ScheduleEditPage";
@@ -12,6 +14,7 @@ function App() {
       <div className="mx-auto" style={{ width: "400px" }}>
         <Switch>
           <Route exact path="/" component={Err} />
+          <Route path="/signup" component={SignupPage} />
           <Route path="/home" component={HomePage} />
           <Route path="/schedule/edit" component={ScheduleEditPage} />
           <Route path="/schedule" component={SchedulePage} />

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/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/src/pages/SignupPage.js

+import SignupForm from '../components/SignupForm';
+
+function SingupPage () {
+
+  return(
+    <SignupForm />
+  );
+}
+
+export default SingupPage;