Commit 0c3b8467 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

로그인, 회원가입 페이지

parent c5f9ed3c
...@@ -11,9 +11,10 @@ import Err from "./pages/ErrorPage"; ...@@ -11,9 +11,10 @@ import Err from "./pages/ErrorPage";
function App() { function App() {
return ( return (
<Router basename={process.env.PUBLIC_URL}> <Router basename={process.env.PUBLIC_URL}>
<div className="mx-auto" style={{ width: "400px" }}> <div id="box" className="container mx-sm-auto">
<Switch> <Switch>
<Route exact path="/" component={Err} /> <Route exact path="/" component={Err} />
<Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} /> <Route path="/signup" component={SignupPage} />
<Route path="/home" component={HomePage} /> <Route path="/home" component={HomePage} />
<Route path="/schedule/edit" component={ScheduleEditPage} /> <Route path="/schedule/edit" component={ScheduleEditPage} />
......
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { Link } from "react-router-dom";
const LoginForm = () => {
return (
<div>
<Formik
initialValues={{
userId: '',
password: '',
}}
validationSchema={Yup.object({
userId: Yup.string()
.required('아이디를 입력해주세요.'),
password: Yup.string()
.required('비밀번호를 입력해주세요.'),
})}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{formik => (
<form onSubmit={formik.handleSubmit} className=" m-5" >
<div className="mb-3 ">
<input type="text" name="userId"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="아이디"
{...formik.getFieldProps('userId')} />
{formik.touched.userId && formik.errors.userId ? (
<div className="text-danger " style={{fontSize: "10px"}}>{formik.errors.userId}</div>
) : null}
</div>
<div className="mb-3">
<input type="password" name="password"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="비밀번호"
{...formik.getFieldProps('password')} />
{formik.touched.password && formik.errors.password ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.password}</div>
) : null}
</div>
<div className="d-grid gap-2 mt-5">
<button type="submit" className="btn btn-crimson">로그인</button>
<Link className="btn btn-crimson" to="/signup">회원가입</Link>
</div>
</form>
)}
</Formik>
</div>
);
}
export default LoginForm;
...@@ -6,11 +6,15 @@ const SignupForm = () => { ...@@ -6,11 +6,15 @@ const SignupForm = () => {
return ( return (
<div> <div>
<div> <div>
<h1 className="text-center">회원가입</h1> <button className="btn btn-crimson mt-2"><i className="bi bi-arrow-left"></i></button>
</div>
<div className="d-inline-block" style={{width:"-webkit-fill-available"}}>
<h1 className="text-center my-4"
>회원가입</h1>
</div> </div>
<Formik <Formik
initialValues={{ initialValues={{
userID: '', userId: '',
password: '', password: '',
repassword: '', repassword: '',
userName: '', userName: '',
...@@ -43,53 +47,70 @@ const SignupForm = () => { ...@@ -43,53 +47,70 @@ const SignupForm = () => {
}} }}
> >
{formik => ( {formik => (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit} className="mt-5" >
<div> <div className="mb-3 d-flex flex-row">
<label className="form-label">아이디</label> <label className="form-label" style={{ width: "100px" }}>아이디</label>
<input type="text" name="userID" <div className="flex-col">
<input type="text" name="userId"
className="form-control border-top-0 border-end-0 border-start-0" className="form-control border-top-0 border-end-0 border-start-0"
{...formik.getFieldProps('userID')} /> style={{ boxShadow: "none", borderRadius: "0" }}
{formik.touched.userID && formik.errors.userID ? ( {...formik.getFieldProps('userId')} />
<div className="text-secondary">{formik.errors.userID}</div> {formik.touched.userId && formik.errors.userId ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userId}</div>
) : null} ) : null}
</div> </div>
<div> </div>
<label className="form-label">비밀번호</label> <div className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>비밀번호</label>
<div className="flex-col">
<input type="password" name="password" <input type="password" name="password"
className="form-control border-top-0 border-end-0 border-start-0" className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('password')} /> {...formik.getFieldProps('password')} />
{formik.touched.password && formik.errors.password ? ( {formik.touched.password && formik.errors.password ? (
<div className="text-secondary">{formik.errors.password}</div> <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.password}</div>
) : null} ) : null}
</div> </div>
<div> </div>
<label className="form-label">비밀번호 확인</label> <div className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px", wordBreak: "keep-all" }}>비밀번호 확인</label>
<div className="flex-col">
<input type="password" name="repassword" <input type="password" name="repassword"
className="form-control border-top-0 border-end-0 border-start-0" className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('repassword')} /> {...formik.getFieldProps('repassword')} />
{formik.touched.repassword && formik.errors.repassword ? ( {formik.touched.repassword && formik.errors.repassword ? (
<div className="text-secondary">{formik.errors.repassword}</div> <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.repassword}</div>
) : null} ) : null}
</div> </div>
<div> </div>
<label className="form-label">이름</label> <div className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>이름</label>
<div className="flex-col">
<input type="text" name="userName" <input type="text" name="userName"
className="form-control border-top-0 border-end-0 border-start-0" className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('userName')} /> {...formik.getFieldProps('userName')} />
{formik.touched.userName && formik.errors.userName ? ( {formik.touched.userName && formik.errors.userName ? (
<div className="text-secondary">{formik.errors.userName}</div> <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userName}</div>
) : null} ) : null}
</div> </div>
<div> </div>
<label className="form-label">학번</label> <div className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>학번</label>
<div className="flex-col">
<input type="text" name="userStudNum" <input type="text" name="userStudNum"
className="form-control border-top-0 border-end-0 border-start-0" className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('userStudNum')} /> {...formik.getFieldProps('userStudNum')} />
{formik.touched.userStudNum && formik.errors.userStudNum ? ( {formik.touched.userStudNum && formik.errors.userStudNum ? (
<div className="text-secondary">{formik.errors.userStudNum}</div> <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userStudNum}</div>
) : null} ) : null}
</div> </div>
<button type="submit">확인</button> </div>
<div className="d-grid gap-2 ">
<button type="submit" className="btn btn-crimson my-5">확인</button>
</div>
</form> </form>
)} )}
</Formik> </Formik>
......
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './scss/custom.scss'; import './scss/custom.scss';
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 React from 'react';
import { Formik } from 'formik'; import LoginForm from '../components/LoginForm';
import * as yup from 'yup';
import SignupForm from '../components/SignupForm';
function LoginPage() { function LoginPage() {
return ( return (
<> <>
<div> <div className="d-inline-block" style={{width:"-webkit-fill-available"}}>
<h1>오늘의 KU</h1> <h1 className="mt-4">오늘의 KU</h1>
<p>-일정관리앱</p> <p className="ms-4">-일정관리앱</p>
</div> </div>
<LoginForm />
</> </>
); );
} }
......
$crimson : #DC143C;
@import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/functions";
@import "~bootstrap/scss/variables"; @import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$custom-colors: (
"crimson": $crimson
);
$theme-colors: map-merge($theme-colors, $custom-colors);
// @import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap/scss/bootstrap.scss';
// @import '~bootstrap-icons/font/bootstrap-icons'; @import '~bootstrap-icons/font/bootstrap-icons';
@font-face { @font-face {
font-family: "Plex-Bold"; font-family: "Plex-Bold";
...@@ -39,6 +48,12 @@ ...@@ -39,6 +48,12 @@
src: url("../fonts/IBMPlexSansKR-Text.ttf"); src: url("../fonts/IBMPlexSansKR-Text.ttf");
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6, label {
font-family: "Plex-Bold"; font-family: "Plex-Bold";
} }
@include media-breakpoint-up(sm) {
#box {
width: 400px;
}
}
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