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

client/src/components/SignupForm.js

 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>
@@ -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

 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

 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
+export default SubjectEditPage;
\ No newline at end of file

client/src/pages/ToDoPage.js

 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

@@ -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";
 }