Skip to content

GitLab

Commit 0fd1df98 authored by Kim, Subin's avatar Kim, Subin
Browse files

Merge branch 'rkyoung7'

parents 2d11add7 ce6e4668
Show whitespace changes
Inline Side-by-side
client/src/components/LoginForm.js 0 → 100644
View file @ 0fd1df98
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 @ 0fd1df98
import React from 'react'; import React from 'react';
import { Formik } from 'formik'; import { Formik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import BackBtn from './Buttons/BackBtn';
const SignupForm = () => { const SignupForm = () => {
return ( return (
<div> <div>
<div> <BackBtn />
<h1 className="text-center">회원가입</h1> <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 +46,70 @@ const SignupForm = () => { ...@@ -43,53 +46,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>
......
client/src/pages/LoginPage.js
View file @ 0fd1df98
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 />
</> </>
); );
} }
......
client/src/pages/StudyPlanEditPage.js
View file @ 0fd1df98
const StudyPlanEditPage = () => { const StudyPlanEditPage = () => {
return ( return (
<></> <>
<select className="form-select" aria-label="Default select example">
<option selected>관련 과목을 선택해주세요.</option>
<option value="1">운영체제</option>
<option value="2">네트워크 프로그래밍 및 실습</option>
<option value="3">수학적 모델링</option>
</select>
<input type="text" name="studyplanTitle"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" />
<label className="form-label m-2">마감일 </label>
<input type="date" value="2021-10-12" className="" />
<input type="time" value="00:00" className="" />
</>
) )
} }
......
client/src/pages/SubjectEditPage.js
View file @ 0fd1df98
const SubjectEditPage = () => { const SubjectEditPage = () => {
return ( return (
<></> <>
<div className="position-absolute top-50 start-50 translate-middle" style={{ width: "80%" }}>
<div>
<div className="mb-5 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>강의명</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} />
</div>
<div className="mb-5 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>교수명</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} />
</div>
<div className="mb-5 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>장소</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} />
</div>
</div>
<div className="">
<button className="btn btn-primary" type="button">취소</button>
<button className="btn btn-primary" type="button">확인</button>
</div>
</div>
</>
) )
} }
export default SubjectEditPage export default SubjectEditPage;
\ No newline at end of file \ No newline at end of file
client/src/pages/ToDoPage.js
View file @ 0fd1df98
import Menu from "../components/Menu/Menu.js"; import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js"; import HomeBtn from "../components/Buttons/HomeBtn.js";
import styles from "../components/Buttons/buttons.module.scss";
const ToDoPage = () => { const ToDoPage = () => {
return ( return (
<> <>
<Menu /> <Menu />
<HomeBtn /> <HomeBtn />
<h1>To-do</h1>
{/* modal */}
<div>
<button type="button" className={`btn position-absolute ${styles.editBtn}`}
data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i className={`bi bi-plus-circle ${styles.icon}`}></i>
</button>
<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content" style={{ backgroundColor: "crimson" }}>
<div className="modal-header p-1" >
<h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body" style={{ backgroundColor: "white" }}>
<input type="text" name="todoTitle"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" />
<label className="form-label m-2">날짜 </label>
<input type="date" value="2021-10-12" className="ms-4 mt-4" />
</div>
<div className="modal-footer p-1" style={{ backgroundColor: "white" }} >
<button type="button" className="btn btn-secondary btn-sm"
data-bs-dismiss="modal">취소</button>
<button type="button" className="btn btn-crimson btn-sm">확인</button>
</div>
</div>
</div>
</div>
</div>
</> </>
) )
} }
......
client/src/scss/custom.scss
View file @ 0fd1df98
$crimson: #DC143C; $crimson : #DC143C;
@import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/functions";
@import "~bootstrap/scss/variables"; @import "~bootstrap/scss/variables";
...@@ -48,7 +48,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors); ...@@ -48,7 +48,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
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, select {
font-family: "Plex-Bold"; font-family: "Plex-Bold";
} }
......
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