Merge remote-tracking branch 'origin/rkyoung7'

client/src/components/Buttons/buttons.module.scss

@@ -15,6 +15,7 @@
     & .icon {
         color: crimson;
         font-size: 2.7em;
+        
     }
 }
 

client/src/components/Form/StudyPlanEditForm.js

+import { useState, useEffect } from 'react';
+import BtnGroup from "../Buttons/BtnGroup";
+import styles from "./form.module.scss";
+
+const StudyPlanEditForm = () => {
+    const [studyplan, setStudyplan] = useState({
+        studyplanTitle: "",
+        endDate: "",
+        deadline: "",
+        memo: ""
+    })
+    const [disabled, setDisabled] = useState(true)
+
+    useEffect(() => {
+        let isMounted = true;
+        const checkInfo = { studyplanTitle: studyplan.studyplanTitle, endDate: studyplan.endDate, memo: studyplan.memo }
+        if (studyplan.deadline !== "on") {
+            checkInfo.endTime = studyplan.endTime
+        } else {
+            delete checkInfo.endTime
+        }
+        if (isMounted) {
+            const isStudyPlan = Object.values(checkInfo).every((el) => Boolean(el));
+            isStudyPlan ? setDisabled(false) : setDisabled(true);
+        }
+        return () => {
+            isMounted = false;
+        }
+    }, [studyplan])
+
+    function handleChange(e) {
+        const { name, value } = e.target
+        if (name === "deadline") {
+            studyplan.deadline !== "on" ? setStudyplan({ ...studyplan, [name]: value }) : setStudyplan({ ...studyplan, [name]: "off" })
+        } else {
+            setStudyplan({ ...studyplan, [name]: value })
+        }
+    }
+
+    return (
+        <>
+            <div className="pt-5">
+                <select className="form-select mb-4" 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 mb-5"
+                    style={{ boxShadow: "none", borderRadius: "0" }}
+                    placeholder="제목" onChange={handleChange} />
+                <div className="d-flex mb-3">
+                    <label className="col col-form-label m-2">마감일 </label>
+                    <div className={studyplan.deadline === "on" ? "col-7" : "col-5"}>
+                        <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" aria-label="endDate" onChange={handleChange} />
+                    </div>
+                    <div className={"col-5 " + (studyplan.deadline === "on" ? "d-none" : "d-block")}>
+                        <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" aria-label="endTime" onChange={handleChange} />
+                    </div>
+                </div>
+                <div className="d-flex justify-content-end form-check mb-4">
+                    <input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} />
+                    <label className="form-check-label" htmlFor="deadline">시간 </label>
+                </div>
+                <div className="d-flex justify-content-between mb-5">
+                    <i className="col bi bi-journal-text fs-3"></i>
+                    <div className="col-10">
+                        <textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" rows="5" onChange={handleChange}></textarea>
+                    </div>
+                </div>
+                <BtnGroup disabled={disabled} />
+            </div>
+        </>
+    )
+}
+
+export default StudyPlanEditForm
\ No newline at end of file

client/src/components/Form/StudyPlanListForm.js

+import styles from "./form.module.scss";
+import { Link } from "react-router-dom";
+
+const StudyPlanListForm = () => {
+  return (
+    <>
+      <h2 className="text-center">학업별 계획</h2>
+      <div className="d-flex justify-content-center mt-3">
+        <div className="card" style={{ width: "20rem" }}>
+          <div className="card-body">
+            <div className="d-flex justify-content-between">
+              <h5 className="card-title">운영체제</h5>
+              <div>
+                <i className="bi bi-pencil-square pe-2"></i>
+                <i className="bi bi-trash"></i>
+              </div>
+            </div>
+            <p className="card-subtitle mb-2 text-muted">&nbsp;김민호 - 과학기술2관 310호</p>
+            <div className="d-flex justify-content-between">
+              <p className="card-text mb-1">- ch02 내용정리하기</p>
+              <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
+            </div>
+            <div className="d-flex justify-content-between">
+              <p className="card-text mb-1">- ch03 내용정리하기</p>
+              <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="d-flex justify-content-center mt-3">
+        <div className="card" style={{ width: "20rem" }}>
+          <div className="card-body">
+            <div className="d-flex justify-content-between">
+              <h5 className="card-title">네트워크 프로그래밍 및 실습</h5>
+              <div>
+                <i className="bi bi-pencil-square pe-2"></i>
+                <i className="bi bi-trash"></i>
+              </div>
+            </div>
+            <p className="card-subtitle mb-2 text-muted">&nbsp;임치헌 - 과학기술2관 323호</p>
+            <Link className="text-decoration-none link-dark" to="/studyplan/edit">
+              <div className="d-flex">
+                <i class="bi bi-plus"></i>
+                <p className="card-text mb-1">새로운 계획 추가하기</p>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className="d-flex justify-content-center mt-3">
+        <Link className="text-decoration-none link-dark" to="/subject/edit">
+          <div className="card" style={{ width: "20rem" }}>
+            <div className="card-body d-flex flex-column bg-secondary bg-opacity-25 ">
+              <div>
+                <i class="bi bi-plus-lg d-flex justify-content-center fs-3"></i>
+                <p className="card-text mt-2 text-center">새로운 과목 추가하기</p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </>
+  )
+}
+
+export default StudyPlanListForm;
\ No newline at end of file

client/src/components/Form/SubjectForm.js

+import { useState, useEffect } from 'react';
+import BtnGroup from "../Buttons/BtnGroup";
+import styles from "./form.module.scss";
+
+const SubjectForm = () => {
+  const [subject, setSubject] = useState({
+    lectureName: "",
+    prof: "",
+    classRoom: ""
+  })
+  const [disabled, setDisabled] = useState(true)
+
+  useEffect(() => {
+    let isMounted = true;
+    const checkInfo = { lectureName: subject.lectureName, prof: subject.prof, classRoom: subject.classRoom }
+
+    if (isMounted) {
+      const isSubject = Object.values(checkInfo).every((el) => Boolean(el));
+      isSubject ? setDisabled(false) : setDisabled(true);
+    }
+    return () => {
+      isMounted = false;
+    }
+  }, [subject])
+
+  function handleChange(e) {
+    const { name, value } = e.target
+    setSubject({ ...subject, [name]: value })
+
+  }
+  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 fs-4" style={{ width: "100px" }}>강의명</label>
+            <input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} name="lectureName" onChange={handleChange} />
+          </div>
+          <div className="mb-5 pt-2 d-flex flex-row">
+            <label className="form-label fs-4" style={{ width: "100px" }}>교수명</label>
+            <input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} name="prof" onChange={handleChange} />
+          </div>
+          <div className="mb-5 pt-2 d-flex flex-row">
+            <label className="form-label fs-4 " style={{ width: "100px" }}>장&nbsp;&nbsp;소</label>
+            <input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} name="classRoom" onChange={handleChange} />
+          </div>
+        </div>
+        <div className="pt-2">
+          <BtnGroup disabled={disabled} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default SubjectForm;
\ No newline at end of file

client/src/components/Modal/TodoModal.js

+const TodoModal = () => {
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+
+export default TodoModal;

client/src/pages/StudyPlanEditPage.js

-import { useState } from 'react';
-import styles from "../components/Form/form.module.scss";
+import StudyPlanEditForm from "../components/Form/StudyPlanEditForm.js"
 
 const StudyPlanEditPage = () => {
-    const [studyplan, setStudyplan] = useState({
-        title: "",
-        endDate: "",
-        endTime: "",
-        contents: "",
-        deadline: "",
-    })
-
-    function handleChange(e) {
-        const { name, value } = e.target
-        if (name === "deadline") {
-            studyplan.deadline !== "on" ? setStudyplan({ ...studyplan, [name]: value }) : setStudyplan({ ...studyplan, [name]: "off" })
-        } else {
-            setStudyplan({ ...studyplan, [name]: value })
-        }
-    }
-
     return (
-        <>
-            <div className="pt-5">
-                <select className="form-select mb-4" 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 mb-5"
-                    style={{ boxShadow: "none", borderRadius: "0" }}
-                    placeholder="제목" />
-                <div className="d-flex mb-3">
-                    <label className="form-label m-2">마감일 </label>
-                    <div className={studyplan.deadline === "on" ? "col-7" : "col-5"}>
-                        <input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" aria-label="endDate" onChange={handleChange} />
-                    </div>
-                    <div className={"col-5 " + (studyplan.deadline === "on" ? "d-none" : "d-block")}>
-                        <input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" aria-label="endTime" onChange={handleChange} />
-                    </div>
-                </div>
-                <div className="d-flex justify-content-end form-check mb-4">
-                    <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} />
-                    <label className="form-check-label" htmlFor="deadline">시간 </label>
-                </div>
-            </div>
-        </>
+       <StudyPlanEditForm />
     )
 }
 

client/src/pages/StudyPlanListPage.js

 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
+import StudyPlanListForm from "../components/Form/StudyPlanListForm.js";
 
 const StudyPlanListPage = () => {
     return (
         <>
             <Menu />
             <HomeBtn />
+            <StudyPlanListForm />
         </>
     )
 }

client/src/pages/SubjectEditPage.js

+import SubjectForm from "../components/Form/SubjectForm.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>
-        </>
+        <SubjectForm />
     )
 }
 
-export default SubjectEditPage;
\ No newline at end of file
+export default SubjectEditPage
\ No newline at end of file

client/src/pages/ToDoPage.js

+// import { Link } from "react-router-dom";
 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
-import styles from "../components/Buttons/buttons.module.scss";
+import styles from "../components/Form/form.module.scss";
+import TodoModal from "../components/Modal/TodoModal.js";
 
 const ToDoPage = () => {
     return (
         <>
             <Menu />
             <HomeBtn />
-            <h1>To-do</h1>
-            {/* modal */}
+            <h1 className="text-center">To-do</h1>
             <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 className="d-flex justify-content-between mt-3">
+                <div className="d-flex flex-row">
+                    <input className={`form-check-input rounded-0  shadow-none mt-1 ${styles.checkBox}`} type="checkbox" />
+                    <p className={`form-check-label fs-5 ms-3 ${styles.title}`}>과제03 제출하기</p>
+                </div>
+                <div>
+                    <i class="bi bi-arrow-right pe-2 fs-5"></i>
+                    <i className="bi bi-pencil-square pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><TodoModal /></i>
+                    <i className="bi bi-trash fs-5"></i>
                 </div>
             </div>
+            <button type="button" className={`btn position-absolute bottom-0 start-0 justify-content-end d-flex justify-content-end w-100 bg-white ${styles.editBtn}`} style={{ boxShadow: "none" }}
+                data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+                <i className={`bi bi-plus-circle ${styles.icon}`}></i>
+                <TodoModal />
+            </button>
 
         </>
     )