check box 서버 연결

client/src/apis/plan.api.js

@@ -7,6 +7,12 @@ const getDetail = async (planId) => {
   return data
 }
 
+const saveCheck = async (planId, planCk) => {
+  const url = `${baseUrl}/api/plan/check/${planId}`
+  const { data } = await axios.put(url, {planCk})
+  return data
+}
+
 const submit = async (info) => {
   const url = `${baseUrl}/api/plan`
   const { data } = await axios.post(url, info)
@@ -27,6 +33,7 @@ const remove = async (planId) => {
 
 const planApi = {
   getDetail,
+  saveCheck,
   submit,
   edit,
   remove

client/src/components/StudyPlan/AddplanList.js

 import PlanItem from "./PlanItem";
 import styles from "./studyplan.module.scss";
 
-const AddplanList = ({ planList }) => {
+const AddplanList = ({ planList, getPlanList }) => {
     
     return (
         <div className={`mt-4 ${styles.list}`}>
             <div className={`accordion accordion-flush`} id="addplanlist">
-                <PlanItem planList={planList.planList} subjectId={planList.id} />
+                <PlanItem planList={planList.planList} subjectId={planList.id} getPlanList={getPlanList} />
             </div>
         </div>
     )

client/src/components/StudyPlan/PlanItem.js

@@ -7,7 +7,7 @@ import styles from "../Schedule/schedule.module.scss";
 import styles2 from "./studyplan.module.scss";
 import moment from 'moment';
 
-const PlanItem = ({ planList = [], subjectId }) => {
+const PlanItem = ({ planList = [], subjectId, getPlanList }) => {
   const { user } = useAuth()
   const [error, setError] = useState("")
   const history = useHistory()
@@ -22,11 +22,25 @@ const PlanItem = ({ planList = [], subjectId }) => {
       catchErrors(error, setError)
     }
   }
+  async function checkFn(e, planId, planCk) {
+    try {
+      setError("")
+      e.preventDefault();
+      const result = await planApi.saveCheck(planId, planCk)
+      console.log('check save result', result)
+      if (result === "success") {
+        getPlanList()
+      }
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
+
 
   return (
     <>
       {planList.length !== 0 ? planList.map((plan, idx) => <div className="d-flex">
-        <input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" checked={plan.checked} />
+        <input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" checked={plan.checked} onClick={(e) => checkFn(e, plan.id, plan.checked)} />
         <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={"#plan" + idx} aria-expanded="false" aria-controls={"plan" + idx}>
             <h5 className={`accordion-header ${styles.title}`} id={"plan-heading" + idx}>{plan.title}</h5>

client/src/components/StudyPlan/PlanLineList.js

 import { Link } from "react-router-dom";
 import styles from "./studyplan.module.scss";
 
-const PlanLineList = ({ subjectId, planList = [] }) => {
+const PlanLineList = ({ subjectId, planList = [], handleClick }) => {
   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")} />
+          <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" checked={plan.checked} onClick={(e) => handleClick(e, plan.id, plan.checked)} />
         </div>
       </div>) : <Link className="d-flex text-decoration-none link-dark" to={`/studyplan/submit/${subjectId}`}>
         <i className="bi bi-plus"></i>

client/src/components/StudyPlan/StudyPlanCard.js

 import { Link } from "react-router-dom";
 import PlanLineList from "./PlanLineList";
 
-const StudyPlanCard = ({ renList, handleClick }) => {
+const StudyPlanCard = ({ renList, handleClick, handleEdit }) => {
 
   return (
     <Link className="card text-decoration-none link-dark mb-3" to={`/studyplan/${renList.id}`} style={{ width: "20rem" }} >
@@ -15,7 +15,7 @@ const StudyPlanCard = ({ renList, handleClick }) => {
           </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} />
+        <PlanLineList subjectId={renList.id} planList={renList.planList} handleClick={handleEdit} />
       </div>
     </Link>
   )

client/src/components/StudyPlan/StudyPlanList.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link, useHistory } from "react-router-dom";
 import StudyPlanCard from "./StudyPlanCard";
 import subjectApi from '../../apis/subject.api';
+import planApi from '../../apis/plan.api';
 import catchErrors from "../../utils/catchErrors";
 import { useAuth } from "../../utils/context";
 import styles from "./studyplan.module.scss";
@@ -27,6 +28,19 @@ const StudyPlanList = () => {
     }
   }
 
+  async function checkFn(e, planId, planCk) {
+    try {
+      setError("")
+      e.preventDefault();
+      const result = await planApi.saveCheck(planId, planCk)
+      if (result === "success") {
+        getList(user.id)
+      }
+    } catch (error) {
+      catchErrors(error, setError)
+    }
+  }
+
   async function delSubject(e, subjectId) {
     e.preventDefault()
     try {
@@ -44,7 +58,7 @@ const StudyPlanList = () => {
   return (
     <div className={`mt-4 ${styles.list}`}>
       <div className="d-flex flex-column align-items-center">
-        {renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} handleClick={delSubject} />) : null}
+        {renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} handleClick={delSubject} handleEdit={checkFn} />) : null}
         <Link className="card text-decoration-none link-dark" to="/subject/edit" style={{ width: "20rem" }}>
           <div className="card-body d-flex flex-column bg-secondary bg-opacity-25">
             <i className="bi bi-plus-lg d-flex justify-content-center fs-3"></i>

client/src/pages/StudyPlanPage.js

@@ -33,7 +33,7 @@ const StudyPlanPage = () => {
             <Menu />
             <BackBtn />
             <h2 className="text-center">{planList.name}</h2>
-            <AddplanList planList={planList} />
+            <AddplanList planList={planList} getPlanList={getPlanList} />
             <Footer pathname={`studyplan/submit/${subjectId}`} />
         </>
     )

server/controllers/plan.controller.js

@@ -55,6 +55,18 @@ const edit = async (req, res) => {
   }
 }
 
+const putCk = async (req, res) => {
+  try {
+    console.log('server/planCtrl/putCk req.body', req.body)
+    const planId = req.planId
+    const result = await Plan.update({ checked: !req.body.planCk }, { where: { id: planId } })
+    if (!result) throw new Error("체크 상태 수정에 실패하였습니다.")
+    else return res.send("success")
+  } catch (error) {
+    return res.status(500).send(error.message || "체크 상태 저장 중 에러 발생")
+  }
+}
+
 const remove = async (req, res) => {
   try {
     const planId = req.planId
@@ -80,6 +92,7 @@ export default {
   getOne,
   create,
   edit,
+  putCk,
   remove,
   getParams
 }
\ No newline at end of file

server/routes/plan.route.js

@@ -7,6 +7,10 @@ router
   .route("/")
   .post(planCtrl.create)
 
+router
+  .route("/check/:planId")
+  .put(planCtrl.putCk)
+
 router
   .route("/:planId")
   .get(planCtrl.getOne)