Commit 05747218 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

회원가입 폼 작성중/ for merge

parent 753429a6
import React from 'react';
function LoginPage () {
return(
<p>로그인</p>
);
}
export default LoginPage;
\ No newline at end of file
...@@ -5,17 +5,23 @@ import ScheduleEditPage from "./pages/ScheduleEditPage"; ...@@ -5,17 +5,23 @@ import ScheduleEditPage from "./pages/ScheduleEditPage";
import AdminPage from "./pages/AdminPage"; import AdminPage from "./pages/AdminPage";
import PrivateRoute from "./components/PrivateRoute"; import PrivateRoute from "./components/PrivateRoute";
import Err from "./pages/ErrorPage"; import Err from "./pages/ErrorPage";
import LoginPage from "./pages/LoginPage";
import SignupPage from "./pages/SignupPage";
function App() { function App() {
return ( return (
<Router basename={process.env.PUBLIC_URL}> <Router basename={process.env.PUBLIC_URL}>
<Switch> <div className="mx-auto" style={{ width: "400px" }}>
<Route path="/" component={Err} /> <Switch>
<Route path="/home" component={HomePage} /> <Route exact path="/" component={LoginPage} />
<Route path="/schedule/edit" component={ScheduleEditPage} /> <Route path="/signup" component={SignupPage} />
<Route path="/schedule" component={SchedulePage} /> <Route path="/home" component={HomePage} />
<PrivateRoute path="/admin" component={AdminPage} role="admin" /> <Route path="/schedule/edit" component={ScheduleEditPage} />
</Switch> <Route path="/schedule" component={SchedulePage} />
<PrivateRoute path="/admin" component={AdminPage} role="admin" />
</Switch>
</div>
</Router> </Router>
); );
} }
......
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;
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import 'bootstrap'; import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
......
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 React from 'react'; import SignupForm from '../components/SignupForm';
function SingupPage () { function SingupPage () {
return( return(
<p>회원가입</p> <SignupForm />
); );
} }
export default SingupPage; export default SingupPage;
\ No newline at end of file
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