Skip to content

GitLab

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

회원가입, 스터디 폼, 과목폼, 투두페이지 작성중

parent 86e65a6a
Hide whitespace changes
Inline Side-by-side
client/src/components/SignupForm.js
View file @ ce6e4668
import React from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import BackBtn from './Buttons/BackBtn';
const SignupForm = () => {
return (
<div>
<div>
<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"}}>
<BackBtn />
<div className="d-inline-block" style={{ width: "-webkit-fill-available" }}>
<h1 className="text-center my-4"
>회원가입</h1>
</div>
......@@ -47,7 +46,7 @@ const SignupForm = () => {
}}
>
{formik => (
<form onSubmit={formik.handleSubmit} className="mt-5" >
<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">
......@@ -56,7 +55,7 @@ const SignupForm = () => {
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>
<div className="text-danger" style={{ fontSize: "10px" }}>{formik.errors.userId}</div>
) : null}
</div>
</div>
......@@ -68,7 +67,7 @@ const SignupForm = () => {
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>
<div className="text-danger" style={{ fontSize: "10px" }}>{formik.errors.password}</div>
) : null}
</div>
</div>
......@@ -80,7 +79,7 @@ const SignupForm = () => {
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>
<div className="text-danger" style={{ fontSize: "10px" }}>{formik.errors.repassword}</div>
) : null}
</div>
</div>
......@@ -92,7 +91,7 @@ const SignupForm = () => {
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>
<div className="text-danger" style={{ fontSize: "10px" }}>{formik.errors.userName}</div>
) : null}
</div>
</div>
......@@ -104,7 +103,7 @@ const SignupForm = () => {
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>
<div className="text-danger" style={{ fontSize: "10px" }}>{formik.errors.userStudNum}</div>
) : null}
</div>
</div>
......
client/src/pages/StudyPlanEditPage.js
View file @ ce6e4668
const StudyPlanEditPage = () => {
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 @ ce6e4668
const SubjectEditPage = () => {
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
\ No newline at end of file
export default SubjectEditPage;
\ No newline at end of file
client/src/pages/ToDoPage.js
View file @ ce6e4668
import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js";
import styles from "../components/Buttons/buttons.module.scss";
const ToDoPage = () => {
return (
<>
<Menu />
<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 @ ce6e4668
......@@ -48,7 +48,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
src: url("../fonts/IBMPlexSansKR-Text.ttf");
}
h1, h2, h3, h4, h5, h6, label {
h1, h2, h3, h4, h5, h6, label, select {
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