Skip to content

GitLab

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

로그인, 회원가입 페이지

parent c5f9ed3c
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 0c3b8467
......@@ -11,9 +11,10 @@ import Err from "./pages/ErrorPage";
function App() {
return (
<Router basename={process.env.PUBLIC_URL}>
<div className="mx-auto" style={{ width: "400px" }}>
<div id="box" className="container mx-sm-auto">
<Switch>
<Route exact path="/" component={Err} />
<Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} />
<Route path="/home" component={HomePage} />
<Route path="/schedule/edit" component={ScheduleEditPage} />
......
client/src/components/LoginForm.js 0 → 100644
View file @ 0c3b8467
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;
client/src/components/SignupForm.js
View file @ 0c3b8467
......@@ -6,11 +6,15 @@ const SignupForm = () => {
return (
<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>
<Formik
initialValues={{
userID: '',
userId: '',
password: '',
repassword: '',
userName: '',
......@@ -43,53 +47,70 @@ const SignupForm = () => {
}}
>
{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}
<form onSubmit={formik.handleSubmit} className="mt-5" >
<div className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>아이디</label>
<div className="flex-col">
<input type="text" name="userId"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('userId')} />
{formik.touched.userId && formik.errors.userId ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userId}</div>
) : null}
</div>
</div>
<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"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('password')} />
{formik.touched.password && formik.errors.password ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.password}</div>
) : null}
</div>
</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 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"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('repassword')} />
{formik.touched.repassword && formik.errors.repassword ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.repassword}</div>
) : null}
</div>
</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 className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>이름</label>
<div className="flex-col">
<input type="text" name="userName"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('userName')} />
{formik.touched.userName && formik.errors.userName ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userName}</div>
) : null}
</div>
</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 className="mb-3 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>학번</label>
<div className="flex-col">
<input type="text" name="userStudNum"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
{...formik.getFieldProps('userStudNum')} />
{formik.touched.userStudNum && formik.errors.userStudNum ? (
<div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userStudNum}</div>
) : null}
</div>
</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 className="d-grid gap-2 ">
<button type="submit" className="btn btn-crimson my-5">확인</button>
</div>
<button type="submit">확인</button>
</form>
)}
</Formik>
......
client/src/index.js
View file @ 0c3b8467
......@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './scss/custom.scss';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
......
client/src/pages/LoginPage.js
View file @ 0c3b8467
import React from 'react';
import { Formik } from 'formik';
import * as yup from 'yup';
import SignupForm from '../components/SignupForm';
import LoginForm from '../components/LoginForm';
function LoginPage() {
return (
<>
<div>
<h1>오늘의 KU</h1>
<p>-일정관리앱</p>
<div className="d-inline-block" style={{width:"-webkit-fill-available"}}>
<h1 className="mt-4">오늘의 KU</h1>
<p className="ms-4">-일정관리앱</p>
</div>
<LoginForm />
</>
);
}
......
client/src/scss/custom.scss
View file @ 0c3b8467
$crimson : #DC143C;
@import "../../node_modules/bootstrap/scss/functions";
@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-icons/font/bootstrap-icons';
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-icons/font/bootstrap-icons';
@font-face {
font-family: "Plex-Bold";
......@@ -39,6 +48,12 @@
src: url("../fonts/IBMPlexSansKR-Text.ttf");
}
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6, label {
font-family: "Plex-Bold";
}
\ No newline at end of file
}
@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