studyplan관련

client/src/components/Card/StudyPlanCard.js

@@ -13,24 +13,26 @@ const StudyPlanCard = () => {
     <>
       <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 col-10">운영체제</h5>
-              <div className="col-2 d-flex justify-content-end">
-                <Link className="text-decoration-none link-dark" to="/subject/edit"><i className="bi bi-pencil-square pe-2"></i></Link>
-                <i className="bi bi-trash"></i>
+          <Link className="text-decoration-none link-dark" to="/studyplan/:">
+            <div className="card-body">
+              <div className="d-flex justify-content-between">
+                <h5 className="card-title col-10">운영체제</h5>
+                <div className="col-2 d-flex justify-content-end">
+                  <Link className="text-decoration-none link-dark" to="/subject/edit"><i className="bi bi-pencil-square pe-2"></i></Link>
+                  <i className="bi bi-trash"></i>
+                </div>
+              </div>
+              <p className="card-subtitle ms-1 mb-2 text-muted">김민호 - 과학기술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>
-            <p className="card-subtitle ms-1 mb-2 text-muted">김민호 - 과학기술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>
+          </Link>
         </div>
       </div>
       {/*계획 없을 때 보여질 카드*/}

client/src/components/Form/StudyPlanEditForm.js

@@ -13,7 +13,7 @@ const StudyPlanEditForm = () => {
 
     useEffect(() => {
         let isMounted = true;
-        const checkInfo = { studyplanTitle: studyplan.studyplanTitle, endDate: studyplan.endDate, memo: studyplan.memo }
+        const checkInfo = { studyplanTitle: studyplan.studyplanTitle, endDate: studyplan.endDate}
         if (studyplan.deadline !== "on") {
             checkInfo.endTime = studyplan.endTime
         } else {

client/src/components/Form/SubjectForm.js

@@ -12,7 +12,7 @@ const SubjectForm = () => {
 
   useEffect(() => {
     let isMounted = true;
-    const checkInfo = { lectureName: subject.lectureName, prof: subject.prof, classRoom: subject.classRoom }
+    const checkInfo = { lectureName: subject.lectureName }
 
     if (isMounted) {
       const isSubject = Object.values(checkInfo).every((el) => Boolean(el));
@@ -34,15 +34,15 @@ const SubjectForm = () => {
         <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 shadow-none rounded-0" name="lectureName" onChange={handleChange} />
+            <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} 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 shadow-none rounded-0" name="prof" onChange={handleChange} />
+            <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} 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 shadow-none rounded-0" name="classRoom" onChange={handleChange} />
+            <label className="form-label fs-4 " style={{ width: "100px", letterSpacing: "15px" }}>장소</label>
+            <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} name="classRoom" onChange={handleChange} />
           </div>
         </div>
         <div className="pt-2">

client/src/components/StudyPlan/AddplanList.js

+import PlanItem from "./PlanItem.js";
+import styles from "./studyplan.module.scss";
+
+const AddplanList = () => {
+    return (
+        <div className={`mt-5 ${styles.list}`}>
+            <div className={`accordion accordion-flush`} id="addplanlist">
+                <PlanItem />
+                <PlanItem />
+                <PlanItem />
+            </div>
+        </div>
+    )
+}
+
+export default AddplanList
\ No newline at end of file

client/src/components/StudyPlan/PlanItem.js

+import { useState } from "react";
+import { Link } from "react-router-dom";
+import catchErrors from "../../utils/catchErrors.js";
+import styles from "../Schedule/schedule.module.scss";
+import styles2 from "./studyplan.module.scss";
+
+const PlanItem = () => {
+  const [error, setError] = useState("")
+
+  async function delSchedule() {
+    try {
+      setError("")
+      alert("해당 일정을 삭제했습니다.")
+      window.location.reload()
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
+
+  return (
+      <div className="d-flex">
+        <input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{width:"5%"}} type="checkbox" />
+        <div className="accordion-item border-0 col"  style={{width:"95%"}}>
+          <button className={`d-flex flex-column align-items-start accordion-button collapsed bg-white shadow-none px-0 pt-0 ps-3 ${styles.activeBtn}`} type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+            <h5 className={`accordion-header ${styles.title}`} id="flush-headingOne">
+              과제02 제출하기, 코딩과제 있음ssssssssss
+            </h5>
+            <p className={`text-secondary mb-0 ${styles.time}`}>~21.09.30 16:00</p>
+          </button>
+          <div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="S#addplanlist">
+            <div className={`accordion-body px-0 pt-2 pb-0 mb-3 ${styles.textBox}`}>
+              컴퓨터의 프로세스 수 체크하는 프로그램 만들기 과제<br />결과화면 캡쳐해서 exe파일이랑 함께 압축하여 제출하기
+              <div className="d-flex justify-content-end mt-3">
+                <Link className="btn btn-light btn-sm border-dark" to="/studyplan/edit">수정</Link>
+                <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  )
+}
+
+export default PlanItem;
\ No newline at end of file

client/src/components/StudyPlan/studyplan.module.scss

+.list {
+  height: 70vh;
+  overflow-y: auto;
+}
+
+.checkBox {
+  border-color: black;
+
+  &:focus {
+      border-color: black;
+  }
+
+  &:checked {
+      border-color: crimson;
+      background-color: crimson;
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  }
+}

client/src/pages/StudyPlanPage.js

 import Menu from "../components/Menu/Menu.js";
 import BackBtn from "../components/Buttons/BackBtn.js";
 import Footer from "../components/Footer.js";
+import AddplanList from "../components/StudyPlan/AddplanList.js";
 
 const StudyPlanPage = () => {
     return (
         <>
             <Menu />
             <BackBtn />
+            <h2 className="text-center">운영체제</h2>
+            <AddplanList />
             <Footer pathname="studyplan/edit" />
         </>
     )