삭제 모달 및 계획정렬

client/src/components/Modal/DeleteModal.js

+const DeleteModal = ({ handleClick, renListID }) => {
+  return (
+    <div className="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-body text-center">
+            <p>관련 학업계획까지 삭제됩니다.</p>
+            <p>정말 삭제하시겠습니까?</p>
+          </div>
+          <div className="modal-footer">
+            <button type="button" className="btn btn-secondary btn-sm" data-bs-dismiss="modal">취소</button>
+            <button type="button" className="btn btn-crimson btn-sm" data-bs-dismiss="modal" onClick={(e) => handleClick(e, renListID)}>삭제</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DeleteModal;

client/src/components/StudyPlan/StudyPlanCard.js

 import { Link } from "react-router-dom";
 import PlanLineList from "./PlanLineList";
+import DeleteModal from "../Modal/DeleteModal";
 import style from "./studyplan.module.scss";
 
-const StudyPlanCard = ({ renList, handleClick, handleEdit }) => {
+const StudyPlanCard = ({ renList, handleEdit, delSubject }) => {
 
   return (
-    <Link className="card text-decoration-none link-dark mb-3" to={`/studyplan/${renList.id}`} style={{ width: "20rem" }} >
-      <div className="card-body" style={{ height: "150px" }}>
-        <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={(e) => handleClick(e, renList.id)}>
-            </i>
+    <>
+      <Link className="card text-decoration-none link-dark mb-3" to={`/studyplan/${renList.id}`} style={{ width: "20rem" }} >
+        <div className="card-body" style={{ height: "150px" }}>
+          <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" data-bs-toggle="modal" data-bs-target="#deleteModal" onClick={(e) => e.preventDefault()}>
+              </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>
+          <div className={`${style.inCard}`} style={{ height: "60px" }}>
+            <PlanLineList subjectId={renList.id} planList={renList.planList} handleClick={handleEdit} />
           </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>
-        <div className={`${style.inCard}`} style={{ height: "60px" }}>
-          <PlanLineList subjectId={renList.id} planList={renList.planList} handleClick={handleEdit} />
-        </div>
-      </div>
-    </Link>
+      </Link>
+      <DeleteModal handleClick={delSubject} renListID={renList.id} />
+    </>
   )
 }
 

client/src/components/StudyPlan/StudyPlanList.js

@@ -58,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} handleEdit={checkFn} />) : null}
+        {renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} handleEdit={checkFn} delSubject={delSubject} />) : 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>

server/controllers/subject.controller.js

@@ -11,7 +11,7 @@ const findAll = async (req, res) => {
     if (subjectId) findList = await Subject.findAll({ where: { [Op.and]: [{ id: subjectId }, { userId: userId }] }, order: [['updatedAt', 'DESC']] })
     else findList = await Subject.findAll({ where: { userId: userId }, order: [['updatedAt', 'DESC']] })
     const subjectAndPlan = await Promise.all(findList.map(async (subjectInfo) => {
-      const resPlan = await Plan.findAll({ where: { subjectId: subjectInfo.id }, order:[[sequelize.literal('checked, deadline'), 'ASC']] })
+      const resPlan = await Plan.findAll({ where: { subjectId: subjectInfo.id }, order: [[sequelize.literal('checked, deadline'), 'ASC']] })
       subjectInfo.dataValues.planList = resPlan
       return subjectInfo
     }))
@@ -63,8 +63,9 @@ const remove = async (req, res) => {
   try {
     const { subjectId } = req.query
     const userId = req.userId
+    const deleted2 = await Plan.destroy({ where: { subjectId: subjectId } })
     const deleted = await Subject.destroy({ where: { [Op.and]: [{ id: subjectId }, { userId: userId }] } })
-    if (!deleted) throw new Error("해당 과목을 삭제하는데 실패하였습니다.")
+    if (!(deleted && deleted2)) throw new Error("해당 과목을 삭제하는데 실패하였습니다.")
     else return res.send(200)
   } catch (error) {
     return res.status(500).send(error.message || "과목 삭제 에러 발생")

server/db/index.js

@@ -34,11 +34,6 @@ const Plan = PlanModel(sequelize)
 Schedule.belongsTo(User)
 Subject.belongsTo(User)
 Todo.belongsTo(User)
-
-Subject.hasOne(Plan, {
-    onDelete: "CASCADE"
-})
-
 Plan.belongsTo(Subject)
 
 export {