Link 해결

client/src/components/StudyPlan/PlanLineList.js

@@ -2,19 +2,19 @@ import { Link } from "react-router-dom";
 import styles from "./studyplan.module.scss";
 
 const PlanLineList = ({ subjectId, planList = [] }) => {
-    return (
-        <Link to={`/studyplan/${subjectId}`}>
-            {planList.length !== 0 ? planList.map(plan => <div className="d-flex justify-content-between">
-                <p className={`card-text mb-1 ${styles.text}`}>- {plan.title}</p>
-                <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
-            </div>) : <Link className="text-decoration-none link-dark" to={`/studyplan/submit/${subjectId}`}>
-            <div className="d-flex">
-              <i className="bi bi-plus"></i>
-              <p className="card-text mb-1">새로운 계획 추가하기</p>
-            </div>
-          </Link>}
-        </Link>
-    )
+  return (
+    <>
+      {planList.length !== 0 ? planList.map(plan => <div className="d-flex justify-content-between">
+        <Link to={`/studyplan/${subjectId}`} className={`col-11 card-text text-decoration-none link-dark mb-1 ${styles.text}`}>- {plan.title}</Link>
+        <div className="col d-flex justify-content-end">
+          <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" onClick={() => console.log("checkbox clicke")} />
+        </div>
+      </div>) : <Link className="d-flex text-decoration-none link-dark" to={`/studyplan/submit/${subjectId}`}>
+        <i className="bi bi-plus"></i>
+        <p className="card-text mb-1">새로운 계획 추가하기</p>
+      </Link>}
+    </>
+  )
 }
 
 export default PlanLineList
\ No newline at end of file

client/src/components/StudyPlan/StudyPlanCard.js

@@ -4,20 +4,20 @@ import PlanLineList from "./PlanLineList";
 const StudyPlanCard = ({ renList, handleClick }) => {
 
   return (
-    <div className="card text-decoration-none link-dark mb-3" style={{ width: "20rem" }} >
+    <Link className="card text-decoration-none link-dark mb-3" to={`/studyplan/${renList.id}`} style={{ width: "20rem" }} >
       <div className="card-body">
         <div className="d-flex">
           <h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{renList.name}</h5>
           <div className="col-2 d-flex justify-content-end">
             <Link className="text-decoration-none link-dark" to={`/subject/edit/${renList.id}`}><i className="bi bi-pencil-square pe-2"></i></Link>
-            <i className="bi bi-trash" onClick={() => handleClick(renList.id)}>
+            <i className="bi bi-trash" onClick={(e) => handleClick(e, renList.id)}>
             </i>
           </div>
         </div>
         <p className="card-subtitle ms-1 mb-2 text-muted">{renList.prof && renList.room ? renList.prof + ' - ' + renList.room : (renList.prof || renList.room)}</p>
         <PlanLineList subjectId={renList.id} planList={renList.planList} />
       </div>
-    </div>
+    </Link>
   )
 }
 

client/src/components/StudyPlan/StudyPlanList.js

@@ -27,7 +27,8 @@ const StudyPlanList = () => {
     }
   }
 
-  async function delSubject(subjectId) {
+  async function delSubject(e, subjectId) {
+    e.preventDefault()
     try {
       setError("")
       await subjectApi.removeSubject(subjectId, user.id)