DB데이터 연결작업

client/src/apis/plan.api.js

@@ -11,7 +11,7 @@ const addPlan = async (info, id) => {
 const editPlan = async (info, id) => {
   console.log('editPlan확인', id)
   const url = `${baseUrl}/api/plan/edit/${id}`
-  const { data } = await axios.put(url, info);
+  const { data } = await axios.put(url, { info, id });
   return data
 }
 

client/src/components/Card/StudyPlanCard.js

-import { useState } from "react";
 import { Link } from "react-router-dom";
 import styles from "../Form/form.module.scss";
 
-const StudyPlanCard = () => {
-  // studyPlanList에서 props로 받아서 뿌리기
+const StudyPlanCard = ({ renList }) => {
+  console.log('props 확인', renList)
   return (
-    <>
-      <div className="d-flex justify-content-center mt-3">
-        <div className="card" style={{ width: "20rem" }}>
-          <Link className="text-decoration-none link-dark" to="/studyplan/1be7e4db-796d-4d9b-bfab-fdc440d25171">
-            <div className="card-body">
-              <div className="d-flex justify-content-between">
-                <h5 className="card-title col-10">운영체제</h5>
-                <div className="col-2 d-flex justify-content-end">
-                  <Link className="text-decoration-none link-dark" to="/subject/edit/ed56bebd-b9ae-4065-aae2-d39aeac5f18e"><i className="bi bi-pencil-square pe-2"></i></Link>
-                  <i className="bi bi-trash"></i>
-                </div>
-              </div>
-              <p className="card-subtitle ms-1 mb-2 text-muted">김민호 - 과학기술2관 310호</p>
-              <div className="d-flex justify-content-between">
-                <p className="card-text mb-1">- ch02 내용정리하기</p>
+    <div className="d-flex justify-content-center mt-3">
+      <Link className="card text-decoration-none link-dark" style={{ width: "20rem" }} to={`/studyplan/${renList.id}`}>
+        <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"></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>
+          {renList.planList.length !== 0 ?
+            renList.planList.map((info, idx) => <><div key={idx} className="d-flex justify-content-between">
+              <p className="card-text mb-1">- {info.title}</p>
+              <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
+            </div><div key={idx} className="d-flex justify-content-between">
+                <p className="card-text mb-1">- {info.title}</p>
                 <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
-              </div>
-              <div className="d-flex justify-content-between">
-                <p className="card-text mb-1">- ch03 내용정리하기</p>
+              </div> <div key={idx} className="d-flex justify-content-between">
+                <p className="card-text mb-1">- {info.title}</p>
                 <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
-              </div>
-            </div>
-          </Link>
-        </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 ">
-              <h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>네트워크 프로그래밍 및 실습</h5>
-              <div className="col-2 d-flex justify-content-end">
-                <Link className="text-decoration-none link-dark" to="/subject/edit"><i className="bi bi-pencil-square pe-2"></i></Link>
-                <i className="bi bi-trash"></i>
-              </div>
-            </div>
-            <p className="card-subtitle ms-1 mb-2 text-muted">임치헌 - 과학기술2관 323호</p>
-            <Link className="text-decoration-none link-dark" to="/studyplan/edit">
+              </div></>)
+
+            : <Link className="text-decoration-none link-dark" to={`/studyplan/edit/add/${renList.id}`}>
               <div className="d-flex">
                 <i className="bi bi-plus"></i>
                 <p className="card-text mb-1">새로운 계획 추가하기</p>
               </div>
-            </Link>
-          </div>
+            </Link>}
         </div>
-      </div>
-    </>
+      </Link>
+    </div>
   )
 }
 

client/src/components/Form/StudyPlanEditForm.js

@@ -13,10 +13,10 @@ const StudyPlanEditForm = () => {
     const [disabled, setDisabled] = useState(true)
     const [selected, setSelected] = useState("");
     const [error, setError] = useState("");
+    const [subName, setSubName] = useState("");
     const [studyplan, setStudyplan] = useState({
         studyplanTitle: "",
         endDate: "",
-        deadline: "",
         memo: "",
         deadline: "",
         selected: ""
@@ -51,6 +51,26 @@ const StudyPlanEditForm = () => {
     async function getInfo(id) {
         const result = await planApi.getDetail(id)
         console.log('수정 getInfo result', result)
+        if (result.endTime) {
+            setStudyplan({
+                studyplanTitle: result.title,
+                endDate: result.endDate,
+                endTime: result.endTime,
+                memo: result.memo,
+                deadline: result.deadline,
+                selected: result.subjectId
+            })
+            setSubName(result.subjectName)
+        } else {
+            setStudyplan({
+                studyplanTitle: result.title,
+                endDate: result.endDate,
+                memo: result.memo,
+                deadline: result.deadline,
+                selected: result.subjectId
+            })
+            setSubName(result.subjectName)
+        }
     }
 
     async function subjectTitle(id) {
@@ -93,7 +113,7 @@ const StudyPlanEditForm = () => {
             } else {
                 //수정함수 실행
                 console.log('수정함수')
-                const result = await planApi.editPlan(studyplan, params.subjectId)
+                const result = await planApi.editPlan(studyplan, params.planId)
                 console.log('수정 후 result확인', result)
             }
 
@@ -115,7 +135,7 @@ const StudyPlanEditForm = () => {
     return (
         <div className="pt-5">
             <select className={`form-select mb-4 ${styles.selectInput}`} aria-label="Choose subject" onChange={handleSelect}>
-                <option selected>관련 과목을 선택해주세요.</option>
+                {studyplan.selected ? <option value={studyplan.selected} selected>{subName}</option> : <option selected>관련 과목을 선택해주세요.</option>}
                 {list.length !== 0 ? list.map((i) => <option value={i.id}>{i.name}</option>) : null}
             </select>
             <input type="text" name="studyplanTitle"
@@ -131,7 +151,7 @@ const StudyPlanEditForm = () => {
                 </div>
             </div>
             <div className="d-flex justify-content-end form-check mb-4">
-                <input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} />
+                <input className={`form-check-input shadow-none ${styles.checkBox} me-2`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} checked={studyplan.deadline === "on" ? true : false} />
                 <label className="form-check-label" htmlFor="deadline">시간 </label>
             </div>
             <div className="d-flex justify-content-between mb-5">

client/src/components/Form/SubjectForm.js

@@ -49,7 +49,7 @@ const SubjectForm = () => {
     })
   }
 
-  async function handleSubmit(e) { 
+  async function handleSubmit(e) {
     e.preventDefault();
     try {
       setError("")
@@ -60,7 +60,15 @@ const SubjectForm = () => {
         setSuccess(true)
       } else {
         //등록함수 실행
-        await subjectApi.addsubject(subject, user.id)
+        const result = await subjectApi.addsubject(subject, user.id)
+        if (result) {
+          alert("등록되었습니다")
+          setSubject({
+            lectureName: "",
+            prof: "",
+            classRoom: ""
+          })
+        } else alert("등록에 실패하였습니다.")
       }
     } catch (error) {
       catchErrors(error, setError)
@@ -72,31 +80,31 @@ const SubjectForm = () => {
     }
 
   }
-  
+
   if (success) {
     return <Redirect to="/studyplan" />
   }
 
   return (
-      <div className="position-absolute top-50 start-50 translate-middle" style={{ width: "80%" }}>
-        <div>
-          <div className="mb-5 d-flex flex-row">
-            <label className="form-label fs-4" style={{ width: "100px" }}>강의명</label>
-            <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.lectureName} name="lectureName" onChange={handleChange} />
-          </div>
-          <div className="mb-5 pt-2 d-flex flex-row">
-            <label className="form-label fs-4" style={{ width: "100px" }}>교수명</label>
-            <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.prof} name="prof" onChange={handleChange} />
-          </div>
-          <div className="mb-5 pt-2 d-flex flex-row">
-            <label className="form-label fs-4 " style={{ width: "100px", letterSpacing: "15px" }}>장소</label>
-            <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.classRoom} name="classRoom" onChange={handleChange} />
-          </div>
+    <div className="position-absolute top-50 start-50 translate-middle" style={{ width: "80%" }}>
+      <div>
+        <div className="mb-5 d-flex flex-row">
+          <label className="form-label fs-4" style={{ width: "100px" }}>강의명</label>
+          <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.lectureName} name="lectureName" onChange={handleChange} />
+        </div>
+        <div className="mb-5 pt-2 d-flex flex-row">
+          <label className="form-label fs-4" style={{ width: "100px" }}>교수명</label>
+          <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.prof} name="prof" onChange={handleChange} />
         </div>
-        <div className="pt-2">
-          <BtnGroup text={subjectId} disabled={disabled} handleSubmit={handleSubmit} />
+        <div className="mb-5 pt-2 d-flex flex-row">
+          <label className="form-label fs-4 " style={{ width: "100px", letterSpacing: "15px" }}>장소</label>
+          <input className={`form-control shadow-none rounded-0 ${styles.textInput}`} value={subject.classRoom} name="classRoom" onChange={handleChange} />
         </div>
       </div>
+      <div className="pt-2">
+        <BtnGroup text={subjectId} disabled={disabled} handleSubmit={handleSubmit} />
+      </div>
+    </div>
   )
 }
 

client/src/components/StudyPlanList.js

@@ -3,20 +3,24 @@ import { useAuth } from "../utils/context";
 import { Link } from "react-router-dom";
 import StudyPlanCard from "./Card/StudyPlanCard";
 import subjectApi from '../apis/subject.api';
+import styles from "./StudyPlan/studyplan.module.scss";
 
 const StudyPlanList = () => {
   const { user } = useAuth();
+  const [renList, setRenList] = useState([]);
+
   useEffect(() => {
     getList(user.id);
   }, [])
 
   async function getList(id) {
     const result = await subjectApi.allSubject(id)
+    setRenList(result)
   }
-
+  //여기서 삭제함수 만들어서 StudyPlanCard에게 넘기기
   return (
-    <>
-      <StudyPlanCard />
+    <div className={`mt-4 ${styles.list}`}>
+      {renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} />) : null}
       <div className="d-flex justify-content-center mt-3">
         <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">
@@ -27,7 +31,7 @@ const StudyPlanList = () => {
           </div>
         </Link>
       </div>
-    </>
+    </div>
   )
 }
 

server/controllers/plan.controller.js

-import { Plan } from "../db/index.js";
+import { Plan, Subject } from "../db/index.js";
+import * as ConvertDate from "./schedule.controller.js";
 
 const addPlan = async (req, res) => {
   console.log('server/addPlan req.body', req.body)
@@ -30,9 +31,37 @@ const addPlan = async (req, res) => {
 }
 
 const editPlan = async (req, res) => {
-  console.log('server/editPlan req.body', req.body)
+  const { info, id } = req.body
+  console.log('editPlan info', info, '|', id)
   try {
-
+    let result = null
+    if (info.deadline === "on") {
+      result = await Plan.update({
+        subjectId: info.selected,
+        title: info.studyplanTitle,
+        deadline: new Date(info.endDate + " " + info.endTime),
+        memo: info.memo,
+        timeChecked: true,
+        checked: false
+      }, { where: { id: id } })
+      res.send(200)
+    } else {
+      result = await Plan.update({
+        subjectId: info.selected,
+        title: info.studyplanTitle,
+        deadline: new Date(info.endDate),
+        memo: info.memo,
+        timeChecked: false,
+        checked: false
+      }, {
+        where: { id: id }
+      })
+    }
+    if (!result) {
+      throw new Error("과목정보 수정 에러발생")
+    } else {
+      return res.send(200)
+    }
   } catch (error) {
     console.log(error)
     return res.status(500).send(error.message || "계획수정 에러발생")
@@ -42,9 +71,41 @@ const editPlan = async (req, res) => {
 const getInfo = async (req, res) => {
   console.log('server/getInfo req.params', req.params)
   try {
+    let deadlineStr = null
+    let endTimeStr = null
+
     const { planId } = req.params;
     const findInfo = await Plan.findOne({ where: { id: planId } })
-    console.log('findInfo확인', findInfo.dataValues)
+    const Info = findInfo.dataValues;
+
+    const getSubTitle = await Subject.findAll({
+      attributes: ['name'],
+      where: { id: Info.subjectId }
+    })
+
+    deadlineStr = ConvertDate.dateToString(Info.deadline, "full")
+    endTimeStr = ConvertDate.dateToString(Info.deadline, "time")
+
+    if (Info.timeChecked) {
+      res.json({
+        subjectId: Info.subjectId,
+        subjectName: getSubTitle[0].dataValues.name,
+        title: Info.title,
+        endDate: deadlineStr,
+        endTime: endTimeStr,
+        deadline: "on",
+        memo: Info.memo
+      })
+    } else {
+      res.json({
+        subjectId: Info.subjectId,
+        subjectName: getSubTitle[0].dataValues.name,
+        title: Info.title,
+        endDate: deadlineStr,
+        deadline: "",
+        memo: Info.memo
+      })
+    }
   } catch (error) {
     console.log(error)
     return res.status(500).send(error.message || "계획 가져오기 에러발생")

server/controllers/schedule.controller.js

@@ -255,7 +255,7 @@ const send = async (req, res) => {
     }
 }
 
-function dateToString(dateObj, method) {
+export function dateToString(dateObj, method) {
     const year = dateObj.getFullYear()
     const year_disit = String(year).substring(2, 4)
     const month = dateObj.getMonth() + 1

server/controllers/subject.controller.js

-import { Subject } from '../db/index.js';
+import { Subject, Plan } from '../db/index.js';
 
 const addsubject = async (req, res) => {
   console.log('server/addsubject req.body', req.body)
@@ -8,12 +8,17 @@ const addsubject = async (req, res) => {
     if (findName) {
       throw new Error("이미 있는 과목입니다.")
     }
-    await Subject.create({
+    const result = await Subject.create({
       name: info.lectureName,
       prof: info.prof,
-      room: info.classRoom, 
+      room: info.classRoom,
       userId: userId
     })
+    if (!result) {
+      throw new Error("과목추가 에러발생")
+    } else {
+      return res.send(200)
+    }
 
   } catch (error) {
     console.log(error)
@@ -53,7 +58,7 @@ const editSubject = async (req, res) => {
     if (!result) {
       throw new Error("과목정보 수정 에러발생")
     } else {
-      res.send(200)
+      return res.send(200)
     }
   } catch (error) {
     console.log(error)
@@ -76,10 +81,14 @@ const allSubject = async (req, res) => {
       }
       return newList
     })
-    // const addplanlist = sublist.map(async(info)=>{
-    //   const resplan = await Plan
-    // })
 
+    const addplanlist = await Promise.all(sublist.map(async (info) => {
+      const resplan = await Plan.findAll({ where: { subjectId: info.id } })
+      info.planList = resplan
+      return info
+    }))
+
+    return res.json(addplanlist)
 
   } catch (error) {
     console.log(error)