studyplan컴포넌트 분리

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

-import styles from "./form.module.scss";
+import styles from "../Form/form.module.scss";
 import { Link } from "react-router-dom";
 
-const StudyPlanListForm = () => {
+const StudyPlanCard= () => {
   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>
+              <h5 className="card-title col-10">운영체제</h5>
+              <div className="col-2">
                 <i className="bi bi-pencil-square pe-2"></i>
                 <i className="bi bi-trash"></i>
               </div>
@@ -27,12 +26,13 @@ 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>
+            <div className="d-flex ">
+              <h5 className="card-title col-10 text-nowrap" style={{overflow:"hidden", textOverflow:"ellipsis"}}>네트워크 프로그래밍 및 실습</h5>
+              <div className="col-2">
                 <i className="bi bi-pencil-square pe-2"></i>
                 <i className="bi bi-trash"></i>
               </div>
@@ -47,20 +47,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/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 />
         </>
     )
 }