Commit f54f8d33 authored by Kim, Subin's avatar Kim, Subin
Browse files

Merge branch 'rkyoung7'

parents 2f73640f 05747218
This diff is collapsed.
......@@ -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",
......
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} />
......
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;
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
import SignupForm from '../components/SignupForm';
function SingupPage () {
return(
<SignupForm />
);
}
export default SingupPage;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment