Skip to content

GitLab

Commit 9271b22e authored by Kim, Subin's avatar Kim, Subin
Browse files

Subject&StudyPlan

parent 6d87ec3b
Hide whitespace changes
Inline Side-by-side
client/src/App.js
View file @ 9271b22e
...@@ -28,7 +28,7 @@ function App() { ...@@ -28,7 +28,7 @@ function App() {
<PrivateRoute path="/schedule/edit" component={ScheduleEditPage} /> <PrivateRoute path="/schedule/edit" component={ScheduleEditPage} />
<PrivateRoute path="/schedule/:date" component={SchedulePage} /> <PrivateRoute path="/schedule/:date" component={SchedulePage} />
<PrivateRoute path="/todo/:date" component={ToDoPage} /> <PrivateRoute path="/todo/:date" component={ToDoPage} />
<PrivateRoute path="/studyplan/edit/add/:subjectId" component={StudyPlanEditPage} /> <PrivateRoute path="/studyplan/submit/:subjectId" component={StudyPlanEditPage} />
<PrivateRoute path="/studyplan/edit/:planId" component={StudyPlanEditPage} /> <PrivateRoute path="/studyplan/edit/:planId" component={StudyPlanEditPage} />
<PrivateRoute path="/studyplan/:subjectId" component={StudyPlanPage} /> <PrivateRoute path="/studyplan/:subjectId" component={StudyPlanPage} />
<PrivateRoute path="/studyplan" component={StudyPlanListPage} /> <PrivateRoute path="/studyplan" component={StudyPlanListPage} />
......
client/src/apis/plan.api.js
View file @ 9271b22e
import axios from "axios"; import axios from "axios";
import baseUrl from "../utils/baseUrl"; import baseUrl from "../utils/baseUrl";
const getDetail = async (id) => {
const url = `${baseUrl}/api/plan/getDetail/${id}`
const { data } = await axios.get(url)
return data
}
const addPlan = async (info, id) => { const addPlan = async (info, id) => {
console.log('addPlan 확인', id) console.log('addPlan 확인', id)
const url = `${baseUrl}/api/plan/addplan/${id}` const url = `${baseUrl}/api/plan/addplan/${id}`
...@@ -15,15 +21,17 @@ const editPlan = async (info, id) => { ...@@ -15,15 +21,17 @@ const editPlan = async (info, id) => {
return data return data
} }
const getDetail = async (id) => { const remove = async (planId, userId) => {
const url = `${baseUrl}/api/plan/getDetail/${id}` const url = `${baseUrl}/api/plan/${planId}?userId=${userId}`
const { data } = await axios.get(url) const { data } = await axios.delete(url)
return data return data
} }
const planApi = { const planApi = {
getDetail,
addPlan, addPlan,
editPlan, editPlan,
getDetail remove
}; };
export default planApi export default planApi
\ No newline at end of file
client/src/apis/subject.api.js
View file @ 9271b22e
import axios from "axios"; import axios from "axios";
import baseUrl from "../utils/baseUrl"; import baseUrl from "../utils/baseUrl";
const addsubject = async (info, userId) => { const allSubject = async (userId, subjectId = "") => {
const url = `${baseUrl}/api/subject/addsubject`; const url = `${baseUrl}/api/subject/allaboutplan/${userId}?subjectId=${subjectId}`
const { data } = await axios.post(url, { info, userId }); const { data } = await axios.get(url);
return data return data
} }
const allSubject = async (info) => { const getSubInfo = async (userId, subjectId) => {
const url = `${baseUrl}/api/subject/all/${info}` const url = `${baseUrl}/api/subject/${userId}?subjectId=${subjectId}`
const { data } = await axios.get(url); const { data } = await axios.get(url);
return data return data
} }
const editSubject = async (info, id) => {
const url = `${baseUrl}/api/subject/${id}` const subjectTitle = async (userId) => {
const { data } = await axios.put(url, info) const url = `${baseUrl}/api/subject/${userId}`
const { data } = await axios.get(url);
return data return data
} }
const getSubInfo = async (info) => { const addSubject = async (info, userId) => {
const url = `${baseUrl}/api/subject/${info}` const url = `${baseUrl}/api/subject/${userId}`;
const { data } = await axios.get(url); const { data } = await axios.post(url, info);
return data return data
} }
const subjectTitle = async (info) => { const editSubject = async (info, userId, subjectId) => {
const url = `${baseUrl}/api/subject/title/${info}` const url = `${baseUrl}/api/subject/${userId}?subjectId=${subjectId}`
const { data } = await axios.get(url); const { data } = await axios.put(url, info)
return data return data
} }
const removeSubject = async (subjectId, userId) => {
const url = `${baseUrl}/api/subject/${userId}?subjectId=${subjectId}`;
const { data } = await axios.delete(url);
return data
}
const subjectApi = { const subjectApi = {
addsubject, addSubject,
getSubInfo,
editSubject, editSubject,
removeSubject,
getSubInfo,
allSubject, allSubject,
subjectTitle subjectTitle
}; };
......
client/src/components/Card/StudyPlanCard.js
View file @ 9271b22e
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import styles from "../Form/form.module.scss"; import PlanLineList from "../StudyPlan/PlanLineList";
const StudyPlanCard = ({ renList }) => { const StudyPlanCard = ({ renList }) => {
console.log('props 확인', renList)
return ( return (
<div className="d-flex justify-content-center mt-3"> <Link className="card text-decoration-none link-dark mb-3" style={{ width: "20rem" }} to={`/studyplan/${renList.id}`}>
<Link className="card text-decoration-none link-dark" style={{ width: "20rem" }} to={`/studyplan/${renList.id}`}> <div className="card-body">
<div className="card-body"> <div className="d-flex">
<div className="d-flex"> <h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{renList.name}</h5>
<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">
<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>
<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>
<i className="bi bi-trash"></i>
</div>
</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 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></>)
: <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> </div>
</Link> <p className="card-subtitle ms-1 mb-2 text-muted">{renList.prof && renList.room ? renList.prof + ' - ' + renList.room : (renList.prof || renList.room)}</p>
</div> <PlanLineList subjectId={renList.id} planList={renList.planList} />
</div>
</Link>
) )
} }
......
client/src/components/Form/StudyPlanEditForm.js
View file @ 9271b22e
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams, Redirect } from 'react-router-dom';
import { useAuth } from "../../utils/context"; import { useAuth } from "../../utils/context";
import BtnGroup from "../Buttons/BtnGroup"; import BtnGroup from "../Buttons/BtnGroup";
import subjectApi from '../../apis/subject.api'; import subjectApi from '../../apis/subject.api';
...@@ -13,6 +13,7 @@ const StudyPlanEditForm = () => { ...@@ -13,6 +13,7 @@ const StudyPlanEditForm = () => {
const [disabled, setDisabled] = useState(true) const [disabled, setDisabled] = useState(true)
const [selected, setSelected] = useState(""); const [selected, setSelected] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
const [success, setSuccess] = useState(false)
const [subName, setSubName] = useState(""); const [subName, setSubName] = useState("");
const [studyplan, setStudyplan] = useState({ const [studyplan, setStudyplan] = useState({
studyplanTitle: "", studyplanTitle: "",
...@@ -21,7 +22,7 @@ const StudyPlanEditForm = () => { ...@@ -21,7 +22,7 @@ const StudyPlanEditForm = () => {
deadline: "", deadline: "",
selected: "" selected: ""
}) })
const [list, setList] = useState([]) const [subjectList, setList] = useState([])
useEffect(() => { useEffect(() => {
let isMounted = true; let isMounted = true;
...@@ -41,7 +42,7 @@ const StudyPlanEditForm = () => { ...@@ -41,7 +42,7 @@ const StudyPlanEditForm = () => {
}, [studyplan]) }, [studyplan])
useEffect(() => { useEffect(() => {
subjectTitle(user.id) getSubject(user.id)
if (params.hasOwnProperty('planId')) { if (params.hasOwnProperty('planId')) {
console.log('planId params확인'); console.log('planId params확인');
getInfo(params.planId); getInfo(params.planId);
...@@ -49,34 +50,43 @@ const StudyPlanEditForm = () => { ...@@ -49,34 +50,43 @@ const StudyPlanEditForm = () => {
}, []) }, [])
async function getInfo(id) { async function getInfo(id) {
const result = await planApi.getDetail(id) try {
console.log('수정 getInfo result', result) setError("")
if (result.endTime) { const result = await planApi.getDetail(id)
setStudyplan({ console.log('수정 getInfo result', result)
studyplanTitle: result.title, if (result.endTime) {
endDate: result.endDate, setStudyplan({
endTime: result.endTime, studyplanTitle: result.title,
memo: result.memo, endDate: result.endDate,
deadline: result.deadline, endTime: result.endTime,
selected: result.subjectId memo: result.memo,
}) deadline: result.deadline,
setSubName(result.subjectName) selected: result.subjectId
} else { })
setStudyplan({ setSubName(result.subjectName)
studyplanTitle: result.title, } else {
endDate: result.endDate, setStudyplan({
memo: result.memo, studyplanTitle: result.title,
deadline: result.deadline, endDate: result.endDate,
selected: result.subjectId memo: result.memo,
}) deadline: result.deadline,
setSubName(result.subjectName) selected: result.subjectId
})
setSubName(result.subjectName)
}
} catch (error) {
catchErrors(error, setError)
} }
} }
async function subjectTitle(id) { async function getSubject(id) {
const result = await subjectApi.subjectTitle(id) try {
console.log('result확인--select', result) setError("")
setList(result) const result = await subjectApi.subjectTitle(id)
setList(result)
} catch (error) {
catchErrors(error, setError)
}
} }
function handleChange(e) { function handleChange(e) {
...@@ -97,26 +107,15 @@ const StudyPlanEditForm = () => { ...@@ -97,26 +107,15 @@ const StudyPlanEditForm = () => {
//등록함수 실행 //등록함수 실행
console.log('등록함수') console.log('등록함수')
const result = await planApi.addPlan(studyplan, params.subjectId) const result = await planApi.addPlan(studyplan, params.subjectId)
if (result) { alert("해당 학업계획이 성공적으로 등록되었습니다.")
alert("등록되었습니다")
setList([])
setStudyplan({
studyplanTitle: "",
endDate: "",
deadline: "",
memo: "",
selected: ""
})
} else {
alert("등록에 실패하였습니다.")
}
} else { } else {
//수정함수 실행 //수정함수 실행
console.log('수정함수') console.log('수정함수')
const result = await planApi.editPlan(studyplan, params.planId) const result = await planApi.editPlan(studyplan, params.planId)
console.log('수정 후 result확인', result) console.log('수정 후 result확인', result)
alert("해당 학업계획이 성공적으로 수정되었습니다.")
} }
setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
setStudyplan({ setStudyplan({
...@@ -132,11 +131,15 @@ const StudyPlanEditForm = () => { ...@@ -132,11 +131,15 @@ const StudyPlanEditForm = () => {
setSelected(e.target.value); setSelected(e.target.value);
} }
if (success) {
return <Redirect to="/studyplan" />
}
return ( return (
<div className="pt-5"> <div className="pt-5">
<select className={`form-select mb-4 ${styles.selectInput}`} aria-label="Choose subject" onChange={handleSelect}> <select className={`form-select mb-4 ${styles.selectInput}`} aria-label="Choose subject" onChange={handleSelect}>
{studyplan.selected ? <option value={studyplan.selected} selected>{subName}</option> : <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} {subjectList.length !== 0 ? subjectList.map((i) => <option value={i.id}>{i.name}</option>) : null}
</select> </select>
<input type="text" name="studyplanTitle" <input type="text" name="studyplanTitle"
className={`form-control shadow-none rounded-0 mb-5 ${styles.textInput}`} className={`form-control shadow-none rounded-0 mb-5 ${styles.textInput}`}
......
client/src/components/Form/SubjectForm.js
View file @ 9271b22e
...@@ -19,7 +19,7 @@ const SubjectForm = () => { ...@@ -19,7 +19,7 @@ const SubjectForm = () => {
}) })
useEffect(() => { useEffect(() => {
getInfo(subjectId); if (subjectId) getInfo(subjectId);
}, []) }, [])
useEffect(() => { useEffect(() => {
...@@ -40,13 +40,14 @@ const SubjectForm = () => { ...@@ -40,13 +40,14 @@ const SubjectForm = () => {
setSubject({ ...subject, [name]: value }) setSubject({ ...subject, [name]: value })
} }
async function getInfo(id) { async function getInfo(subjectId) {
const result = await subjectApi.getSubInfo(id) try {
setSubject({ setError("")
lectureName: result.name, const result = await subjectApi.getSubInfo(user.id, subjectId)
prof: result.prof, setSubject({ ...subject, ...result })
classRoom: result.room } catch (error) {
}) catchErrors(error, setError)
}
} }
async function handleSubmit(e) { async function handleSubmit(e) {
...@@ -55,21 +56,14 @@ const SubjectForm = () => { ...@@ -55,21 +56,14 @@ const SubjectForm = () => {
setError("") setError("")
if (subjectId) { if (subjectId) {
//수정함수 실행 //수정함수 실행
await subjectApi.editSubject(subject, subjectId) await subjectApi.editSubject(subject, user.id, subjectId)
alert("과목정보가 수정되었습니다.") alert("해당 과목 정보가 성공적으로 수정되었습니다.")
setSuccess(true)
} else { } else {
//등록함수 실행 //등록함수 실행
const result = await subjectApi.addsubject(subject, user.id) await subjectApi.addSubject(subject, user.id)
if (result) { alert("해당 과목 정보가 성공적으로 등록되었습니다.")
alert("등록되었습니다")
setSubject({
lectureName: "",
prof: "",
classRoom: ""
})
} else alert("등록에 실패하였습니다.")
} }
setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
setSubject({ setSubject({
...@@ -78,7 +72,6 @@ const SubjectForm = () => { ...@@ -78,7 +72,6 @@ const SubjectForm = () => {
classRoom: "" classRoom: ""
}) })
} }
} }
if (success) { if (success) {
......
client/src/components/Modal/PlanAlertModal.js 0 → 100644
View file @ 9271b22e
const PlanAlertModal = ({ planId, handleClick }) => {
return (
<div className="modal fade" id="planmodal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="planLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-body">
관련 학업계획까지 삭제됩니다.
정말 삭제하시겠습니까?
</div>
<div className="modal-footer p-1">
<button type="button" className="btn btn-secondary btn-sm" data-bs-dismiss="modal">취소</button>
<button type="button" className="btn btn-crimson btn-sm" onClick={() => handleClick(planId)}>삭제</button>
</div>
</div>
</div>
</div>
)
}
export default PlanAlertModal
\ No newline at end of file
client/src/components/StudyPlan/AddplanList.js
View file @ 9271b22e
import PlanItem from "./PlanItem"; import PlanItem from "./PlanItem";
import styles from "./studyplan.module.scss"; import styles from "./studyplan.module.scss";
const AddplanList = () => { const AddplanList = ({ planList }) => {
console.log("planList ",planList)
return ( return (
<div className={`mt-5 ${styles.list}`}> <div className={`mt-5 ${styles.list}`}>
<div className={`accordion accordion-flush`} id="addplanlist"> <div className={`accordion accordion-flush`} id="addplanlist">
<PlanItem /> <PlanItem planList={planList.planList} subjectId={planList.id} />
<PlanItem />
<PlanItem />
</div> </div>
</div> </div>
) )
......
client/src/components/StudyPlan/PlanItem.js
View file @ 9271b22e
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import AlertModal from "../Modal/PlanAlertModal";
import planApi from "../../apis/plan.api";
import { useAuth } from "../../utils/context";
import catchErrors from "../../utils/catchErrors"; import catchErrors from "../../utils/catchErrors";
import styles from "../Schedule/schedule.module.scss"; import styles from "../Schedule/schedule.module.scss";
import styles2 from "./studyplan.module.scss"; import styles2 from "./studyplan.module.scss";
import moment from 'moment';
const PlanItem = () => { const PlanItem = ({ planList = [], subjectId }) => {
const { user } = useAuth()
const [error, setError] = useState("") const [error, setError] = useState("")
const history = useHistory()
async function delPlan() { async function delPlan(planId) {
try { try {
setError("") setError("")
alert("해당 일정을 삭제했습니다.") await planApi.remove(planId, user.id)
window.location.reload() alert("해당 계획을 성공적으로 삭제했습니다.")
history.push(`/studyplan/${subjectId}`)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
return ( return (
<div className="d-flex"> <>
<input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" /> {planList.length !== 0 ? planList.map((plan, idx) => <div className="d-flex">
<div className="accordion-item border-0 col" style={{ width: "95%" }}> <input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" checked={plan.checked} />
<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="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> <div className="accordion-item border-0 col" style={{ width: "95%" }}>
<h5 className={`accordion-header ${styles.title}`} id="flush-headingOne"> <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}>
과제02 제출하기, 코딩과제 있음ssssssssss <h5 className={`accordion-header ${styles.title}`} id={"plan-heading" + idx}>{plan.title}</h5>
</h5> <p className={`text-secondary mb-0 ${styles.time}`}>
<p className={`text-secondary mb-0 ${styles.time}`}>~21.09.30 16:00</p> ~ {plan.timeChecked ? moment(plan.deadline).format("YY.MM.DD HH:mm") : moment(plan.deadline).format("YY.MM.DD")}
</button> </p>
<div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="S#addplanlist"> </button>
<div className={`accordion-body px-0 pt-2 pb-0 mb-3 ${styles.textBox}`}> <div id={"plan" + idx} className="accordion-collapse collapse" aria-labelledby={"plan-heading" + idx} data-bs-parent="S#addplanlist">
<div className="d-flex align-items-start fw-bold"> <div className={`accordion-body px-0 pt-2 pb-0 mb-3 ${styles.textBox}`}>
<i className="bi bi-clock-history fs-5"></i> <div className="d-flex align-items-start fw-bold">
<div className="col-11 ms-2 align-self-center"> <i className="bi bi-clock-history fs-5"></i>
21.09.30 16:00 <div className="col-11 ms-2 align-self-center">
~ {plan.timeChecked ? moment(plan.deadline).format("YY.MM.DD HH:mm") : moment(plan.deadline).format("YY.MM.DD")}
</div>
</div>
{plan.memo}
<div className="d-flex justify-content-end mt-3">
<Link className="btn btn-light btn-sm border-dark" to={`/studyplan/edit/${plan.id}`}>수정</Link>
<button type="button" className="btn btn-crimson btn-sm ms-2" data-bs-toggle="modal" data-bs-target="#planmodal">삭제</button>
<AlertModal planId={plan.id} handleClick={delPlan} />
</div> </div>
</div>
컴퓨터의 프로세스 수 체크하는 프로그램 만들기 과제<br />결과화면 캡쳐해서 exe파일이랑 함께 압축하여 제출하기
<div className="d-flex justify-content-end mt-3">
<Link className="btn btn-light btn-sm border-dark" to="/studyplan/edit/bd67541e-504d-402f-8190-18808c229fcf">수정</Link>
<button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delPlan}>삭제</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>)
</div> : <p className="text-center">등록된 학업 계획이 없습니다. </p>}
</>
) )
} }
......
client/src/components/StudyPlan/PlanLineList.js 0 → 100644
View file @ 9271b22e
import { Link } from "react-router-dom";
import styles from "../Form/form.module.scss";
const PlanLineList = ({ subjectId, planList = [] }) => {
return (
<>
{planList.length !== 0 ? planList.map(plan => <div className="d-flex justify-content-between">
<p className="card-text mb-1">- {plan.title}</p>
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
</div>) : <Link className="text-decoration-none link-dark" to={`/studyplan/edit/add/${subjectId}`}>
<div className="d-flex">
<i className="bi bi-plus"></i>
<p className="card-text mb-1">새로운 계획 추가하기</p>
</div>
</Link>}
</>
)
}
export default PlanLineList
\ No newline at end of file
client/src/components/StudyPlanList.js
View file @ 9271b22e
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useAuth } from "../utils/context";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import StudyPlanCard from "./Card/StudyPlanCard"; import StudyPlanCard from "./Card/StudyPlanCard";
import subjectApi from '../apis/subject.api'; import subjectApi from '../apis/subject.api';
import catchErrors from "../utils/catchErrors";
import { useAuth } from "../utils/context";
import styles from "./StudyPlan/studyplan.module.scss"; import styles from "./StudyPlan/studyplan.module.scss";
const StudyPlanList = () => { const StudyPlanList = () => {
const { user } = useAuth(); const { user } = useAuth();
const [renList, setRenList] = useState([]); const [renList, setRenList] = useState([])
const [error, setError] = useState("")
useEffect(() => { useEffect(() => {
getList(user.id); getList(user.id);
}, []) }, [])
async function getList(id) { async function getList(userId) {
const result = await subjectApi.allSubject(id) try {
setRenList(result) setError("")
const result = await subjectApi.allSubject(userId)
setRenList(result)
} catch (error) {
catchErrors(error, setError)
}
} }
//여기서 삭제함수 만들어서 StudyPlanCard에게 넘기기
return ( return (
<div className={`mt-4 ${styles.list}`}> <div className={`mt-4 ${styles.list}`}>
{renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} />) : null} <div className="d-flex flex-column align-items-center">
<div className="d-flex justify-content-center mt-3"> {renList.length !== 0 ? renList.map((info, idx) => <StudyPlanCard key={idx} renList={info} />) : null}
<Link className="card text-decoration-none link-dark" to="/subject/edit" style={{ width: "20rem" }}> <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"> <div className="card-body d-flex flex-column bg-secondary bg-opacity-25">
<div> <i className="bi bi-plus-lg d-flex justify-content-center fs-3"></i>
<i className="bi bi-plus-lg d-flex justify-content-center fs-3"></i> <p className="card-text mt-2 text-center">새로운 과목 추가하기</p>
<p className="card-text mt-2 text-center">새로운 과목 추가하기</p>
</div>
</div> </div>
</Link> </Link>
</div> </div>
......
client/src/components/TodoList.js
View file @ 9271b22e
...@@ -11,8 +11,8 @@ const TodoList = () => { ...@@ -11,8 +11,8 @@ const TodoList = () => {
<label className="form-check-label fs-5 ms-3 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>과제03 제출하기sadsa</label> <label className="form-check-label fs-5 ms-3 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>과제03 제출하기sadsa</label>
</div> </div>
<div className="d-flex justify-content-between" style={{ cursor: "pointer", width: "25%" }}> <div className="d-flex justify-content-between" style={{ cursor: "pointer", width: "25%" }}>
<i className="bi bi-arrow-right fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></i> <i className="bi bi-arrow-right fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></i>
<i className="bi bi-pencil-square fs-5" data-bs-toggle="modal" data-bs-target="#todomodal"></i> <i className="bi bi-pencil-square fs-5" data-bs-toggle="modal" data-bs-target="#todomodal"></i>
<TodoModal /> <TodoModal />
<i className="bi bi-trash fs-5"></i> <i className="bi bi-trash fs-5"></i>
</div> </div>
......
client/src/pages/StudyPlanPage.js
View file @ 9271b22e
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Menu from "../components/Menu/Menu"; import Menu from "../components/Menu/Menu";
import BackBtn from "../components/Buttons/BackBtn"; import BackBtn from "../components/Buttons/BackBtn";
import Footer from "../components/Footer";
import AddplanList from "../components/StudyPlan/AddplanList"; import AddplanList from "../components/StudyPlan/AddplanList";
import Footer from "../components/Footer";
import subjectApi from "../apis/subject.api";
import catchErrors from "../utils/catchErrors";
import { useAuth } from "../utils/context";
const StudyPlanPage = () => { const StudyPlanPage = () => {
const { user } = useAuth()
const [planList, setPlanList] = useState({})
const [error, setError] = useState("");
const { subjectId } = useParams(); const { subjectId } = useParams();
useEffect(() => {
getPlanList()
}, [])
async function getPlanList() {
try {
setError("")
const res = await subjectApi.allSubject(user.id, subjectId)
setPlanList(res[0])
} catch (error) {
catchErrors(error, setError)
}
}
return ( return (
<> <>
<Menu /> <Menu />
<BackBtn /> <BackBtn />
<h2 className="text-center">운영체제</h2> <h2 className="text-center">{planList.name}</h2>
<AddplanList /> <AddplanList planList={planList} />
<Footer pathname={`studyplan/edit/add/${subjectId}`} /> <Footer pathname={`studyplan/submit/${subjectId}`} />
</> </>
) )
} }
......
server/controllers/schedule.controller.js
View file @ 9271b22e
...@@ -240,7 +240,6 @@ const remove = async (req, res) => { ...@@ -240,7 +240,6 @@ const remove = async (req, res) => {
let deleted = null let deleted = null
const userId = req.userId const userId = req.userId
const { scheduleId } = req.query const { scheduleId } = req.query
console.log("scheduleId==",scheduleId)
if (userId === "ku") deleted = await KU.destroy({ where: { id: scheduleId } }) if (userId === "ku") deleted = await KU.destroy({ where: { id: scheduleId } })
else deleted = await Schedule.destroy({ where: { [Op.and]: [{ id: scheduleId }, { userId: userId }] } }) else deleted = await Schedule.destroy({ where: { [Op.and]: [{ id: scheduleId }, { userId: userId }] } })
if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.") if (!deleted) throw new Error("해당 일정을 삭제하는데 실패하였습니다.")
...@@ -253,7 +252,6 @@ const remove = async (req, res) => { ...@@ -253,7 +252,6 @@ const remove = async (req, res) => {
const getParams = async (req, res, next) => { const getParams = async (req, res, next) => {
try { try {
const { userId } = req.params const { userId } = req.params
console.log("getParams", userId)
req.userId = userId req.userId = userId
next() next()
} catch (error) { } catch (error) {
......
server/controllers/subject.controller.js
View file @ 9271b22e
import { Subject, Plan } from '../db/index.js'; import { Subject, Plan } from '../db/index.js';
import sequelize from 'sequelize';
const addsubject = async (req, res) => { const { Op } = sequelize
console.log('server/addsubject req.body', req.body)
try {
const { info, userId } = req.body;
const findName = await Subject.findOne({ where: { name: info.lectureName } });
if (findName) {
throw new Error("이미 있는 과목입니다.")
}
const result = await Subject.create({
name: info.lectureName,
prof: info.prof,
room: info.classRoom,
userId: userId
})
if (!result) {
throw new Error("과목추가 에러발생")
} else {
return res.send(200)
}
const findAll = async (req, res) => {
try {
let findList = null
const { subjectId } = req.query
const userId = req.userId
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 } })
subjectInfo.dataValues.planList = resPlan
return subjectInfo
}))
return res.json(subjectAndPlan)
} catch (error) { } catch (error) {
console.log(error) return res.status(500).send(error.message || "과목 및 해당 과목 관련 학업계획 조회 에러 발생")
return res.status(500).send(error.message || "과목저장 에러발생")
} }
} }
const getSubInfo = async (req, res) => { const findSubject = async (req, res) => {
console.log('server/getSubInfo req.params', req.params)
try { try {
const { subjectId } = req.params; let find = null
const findSubInfo = await Subject.findOne({ where: { id: subjectId } }) const { subjectId } = req.query
if (findSubInfo) { const userId = req.userId
res.json({ if (subjectId) find = await Subject.findOne({ where: { [Op.and]: [{ id: subjectId }, { userId: userId }] }, attributes: ['id', ['name', 'lectureName'], 'prof', ['room', 'classRoom']] })
name: findSubInfo.dataValues.name, else find = await Subject.findAll({ attributes: ['id', 'name'] })
prof: findSubInfo.dataValues.prof, if (!find) throw new Error("과목 정보를 찾지 못했습니다.")
room: findSubInfo.dataValues.room return res.json(find)
})
} else {
throw new Error("과목 찾기 실패")
}
} catch (error) { } catch (error) {
console.log(error) return res.status(500).send(error.message || "과목 조회 에러 발생")
return res.status(500).send(error.message || "과목정보 가져오기 에러발생")
} }
} }
const editSubject = async (req, res) => { const create = async (req, res) => {
console.log('server/editSubject req.body', req.body)
try { try {
const { info, id } = req.body; const userId = req.userId
const result = await Subject.update({ const { lectureName, prof, classRoom } = req.body
name: info.lectureName, const newSubject = await Subject.create({ name: lectureName, prof: prof, room: classRoom, userId: userId })
prof: info.prof, return res.json(newSubject)
room: info.classRoom,
}, { where: { id: id } })
if (!result) {
throw new Error("과목정보 수정 에러발생")
} else {
return res.send(200)
}
} catch (error) { } catch (error) {
console.log(error) return res.status(500).send(error.message || "과목 생성 에러 발생")
return res.status(500).send(error.message || "과목정보 수정 에러발생")
} }
} }
const allSubject = async (req, res) => { const edit = async (req, res) => {
console.log('server/allSubject req.params', req.params)
try { try {
const { userId } = req.params; const { subjectId } = req.query
const findAllInfo = await Subject.findAll({ where: { userId: userId } }) const userId = req.userId
const sublist = findAllInfo.map(info => { const { lectureName, prof, classRoom } = req.body
const newList = { const updated = await Subject.update({ name: lectureName, prof: prof, room: classRoom }, { where: { [Op.and]: [{ id: subjectId }, { userId: userId }] } })
id: info.id, if (!updated) throw new Error("해당 과목의 일부 정보를 수정하는데 실패하였습니다.")
name: info.name, else return res.send(200)
prof: info.prof, } catch (error) {
room: info.room, return res.status(500).send(error.message || "과목 수정 에러 발생")
time: info.updatedAt }
} }
return newList
})
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)
const remove = async (req, res) => {
try {
const { subjectId } = req.query
const userId = req.userId
const deleted = await Subject.destroy({ where: { [Op.and]: [{ id: subjectId }, { userId: userId }] } })
if (!deleted) throw new Error("해당 과목을 삭제하는데 실패하였습니다.")
else return res.send(200)
} catch (error) { } catch (error) {
console.log(error) return res.status(500).send(error.message || "과목 삭제 에러 발생")
return res.status(500).send(error.message || "전체과목 조회 에러")
} }
} }
const subjectTitle = async (req, res) => { const getParams = async (req, res, next) => {
console.log('server/subjectTitle req.params', req.params)
try { try {
const { userId } = req.params const { userId } = req.params
const findAllTitle = await Subject.findAll({ where: { userId: userId } }) req.userId = userId
const sublist = findAllTitle.map(info => { next()
const newList = {
id: info.id,
name: info.name,
}
return newList
})
res.json(sublist)
} catch (error) { } catch (error) {
console.log(error) return res.status(500).send(error.message || "사용자 정보 조회 에러 발생")
return res.status(500).send(error.message || "과목명 조회 에러")
} }
} }
export default { export default {
addsubject, findAll,
getSubInfo, findSubject,
editSubject, create,
allSubject, edit,
subjectTitle remove,
getParams
} }
\ No newline at end of file
server/routes/subject.route.js
View file @ 9271b22e
...@@ -4,20 +4,16 @@ import subjectCtrl from '../controllers/subject.controller.js'; ...@@ -4,20 +4,16 @@ import subjectCtrl from '../controllers/subject.controller.js';
const router = express.Router(); const router = express.Router();
router router
.route("/addsubject") .route("/allaboutplan/:userId")
.post(subjectCtrl.addsubject) .get(subjectCtrl.findAll)
router router
.route("/all/:userId") .route("/:userId")
.get(subjectCtrl.allSubject) .get(subjectCtrl.findSubject)
.post(subjectCtrl.create)
.put(subjectCtrl.edit)
.delete(subjectCtrl.remove)
router router.param("userId", subjectCtrl.getParams)
.route("/title/:userId")
.get(subjectCtrl.subjectTitle)
router
.route("/:subjectId")
.put(subjectCtrl.editSubject)
.get(subjectCtrl.getSubInfo)
export default router; export default router;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment