Merge remote-tracking branch 'origin/rkyoung7'

client/src/components/Form/StudyPlanListForm.js → client/src/components/Card/StudyPlanCard.js

-import styles from "./form.module.scss";
+import { useState } from "react";
+import styles from "../Form/form.module.scss";
 import { Link } from "react-router-dom";
 
-const StudyPlanListForm = () => {
+const StudyPlanCard = () => {
+  const [studyplan, setStudyplan] = useState({
+    subject:"",
+    info:"",
+    contents:[]
+  })
   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>
+              <h5 className="card-title col-10">운영체제</h5>
+              <div className="col-2">
+                <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>
@@ -27,13 +32,14 @@ const StudyPlanListForm = () => {
           </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>
+            <div className="d-flex ">
+              <h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>네트워크 프로그래밍 및 실습</h5>
+              <div className="col-2">
+                <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>
@@ -47,20 +53,9 @@ const StudyPlanListForm = () => {
           </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;
+export default StudyPlanCard;
\ No newline at end of file

client/src/components/Form/StudyPlanEditForm.js

@@ -51,11 +51,11 @@ const StudyPlanEditForm = () => {
                     style={{ boxShadow: "none", borderRadius: "0" }}
                     placeholder="제목" onChange={handleChange} />
                 <div className="d-flex mb-3">
-                    <label className="col col-form-label m-2">마감일 </label>
+                    <label className="col col-form-label text-center">마감일 </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")}>
+                    <div className={"col-4 " + (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>

client/src/components/Modal/TodoPostModal.js

+const TodoPostModal = () => {
+  return (
+    <>
+      <div className="modal fade" id="postmodal" 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">
+            <div className="modal-body">
+              <p className="form-label m-2">해당 일정을 내일로 미루시겠습니까? </p>
+            </div>
+            <div className="modal-footer p-1">
+              <button type="button" className="btn btn-crimson btn-sm">네</button>
+              <button type="button" className="btn btn-secondary btn-sm"
+                data-bs-dismiss="modal">아니요</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default TodoPostModal;
\ No newline at end of file

client/src/components/StudyPlanList.js

+import { Link } from "react-router-dom";
+import StudyPlanCard  from "./Card/StudyPlanCard.js";
+
+const StudyPlanList = () => {
+  return (
+    <>
+      <div>
+        <StudyPlanCard />
+      </div>
+      <div className="d-flex justify-content-center mt-3">
+        <Link className="text-decoration-none link-dark" to="/subject/edit" style={{ width: "20rem" }}>
+          <div className="card">
+            <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 StudyPlanList;
\ No newline at end of file

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";
+import StudyPlanList from "../components/StudyPlanList.js";
 
 const StudyPlanListPage = () => {
     return (
         <>
             <Menu />
             <HomeBtn />
-            <StudyPlanListForm />
+            <h2 className="text-center">학업별 계획</h2>
+            <StudyPlanList />
         </>
     )
 }

client/src/pages/ToDoPage.js

@@ -3,6 +3,7 @@ import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
 import styles from "../components/Form/form.module.scss";
 import TodoModal from "../components/Modal/TodoModal.js";
+import TodoPostModal from "../components/Modal/TodoPostModal.js";
 
 const ToDoPage = () => {
     return (
@@ -19,7 +20,7 @@ const ToDoPage = () => {
                     <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 class="bi bi-arrow-right pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></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>