From c0d95ac8b6d19a18e9b2f426eb162c45a4e51c19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EA=B0=80=EC=98=81?= <gyty7@naver.com>
Date: Fri, 12 Nov 2021 13:42:52 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EA=B3=84=ED=9A=8D=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Modal/DeleteModal.js    | 20 +++++++++++
 .../src/components/StudyPlan/StudyPlanCard.js | 34 +++++++++++--------
 .../src/components/StudyPlan/StudyPlanList.js |  2 +-
 server/controllers/subject.controller.js      |  5 +--
 server/db/index.js                            |  5 ---
 5 files changed, 43 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/Modal/DeleteModal.js

diff --git a/client/src/components/Modal/DeleteModal.js b/client/src/components/Modal/DeleteModal.js
new file mode 100644
index 0000000..b877f14
--- /dev/null
+++ b/client/src/components/Modal/DeleteModal.js
@@ -0,0 +1,20 @@
+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;
diff --git a/client/src/components/StudyPlan/StudyPlanCard.js b/client/src/components/StudyPlan/StudyPlanCard.js
index bede003..3adc521 100644
--- a/client/src/components/StudyPlan/StudyPlanCard.js
+++ b/client/src/components/StudyPlan/StudyPlanCard.js
@@ -1,26 +1,30 @@
 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} />
+    </>
   )
 }
 
diff --git a/client/src/components/StudyPlan/StudyPlanList.js b/client/src/components/StudyPlan/StudyPlanList.js
index 3d524f5..4b3de44 100644
--- a/client/src/components/StudyPlan/StudyPlanList.js
+++ b/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>
diff --git a/server/controllers/subject.controller.js b/server/controllers/subject.controller.js
index a0dc680..4b1aebb 100644
--- a/server/controllers/subject.controller.js
+++ b/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 || "과목 삭제 에러 발생")
diff --git a/server/db/index.js b/server/db/index.js
index 276bf85..52de169 100644
--- a/server/db/index.js
+++ b/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 {
-- 
GitLab