Commit 443851bc authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

Merge remote-tracking branch 'origin/master' into master-up-merge-master

parents 155b7e3c b3127999
...@@ -7,6 +7,12 @@ const getDetail = async (planId) => { ...@@ -7,6 +7,12 @@ const getDetail = async (planId) => {
return data 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 submit = async (info) => {
const url = `${baseUrl}/api/plan` const url = `${baseUrl}/api/plan`
const { data } = await axios.post(url, info) const { data } = await axios.post(url, info)
...@@ -27,6 +33,7 @@ const remove = async (planId) => { ...@@ -27,6 +33,7 @@ const remove = async (planId) => {
const planApi = { const planApi = {
getDetail, getDetail,
saveCheck,
submit, submit,
edit, edit,
remove remove
......
...@@ -134,8 +134,10 @@ const AdminMonthly = () => { ...@@ -134,8 +134,10 @@ const AdminMonthly = () => {
timeZone="local" timeZone="local"
events={scheduleList} events={scheduleList}
eventLimit={3} eventLimit={3}
moreLinkContent={function(arg) { moreLinkContent={arg => arg.shortText}
return arg.shortText moreLinkClick={info => {
setDateShow({ ...dateShow, date: moment(info.date).format('YYYY-MM-DD'), show: true })
return <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scheduleModal"></button>
}} }}
themeSystem='bootstrap' themeSystem='bootstrap'
height='78vh' height='78vh'
......
...@@ -8,7 +8,7 @@ const DateSet = ({ index, info, today, handleClick }) => { ...@@ -8,7 +8,7 @@ const DateSet = ({ index, info, today, handleClick }) => {
<div className="col d-flex flex-column text-center" onClick={() => handleClick(info.date)}> <div className="col d-flex flex-column text-center" onClick={() => handleClick(info.date)}>
<span className="text-center">{week[index]}</span> <span className="text-center">{week[index]}</span>
<span className={today ? `rounded-circle ${styles.today}` : ""}>{moment(info.date).format("DD")}</span> <span className={today ? `rounded-circle ${styles.today}` : ""}>{moment(info.date).format("DD")}</span>
<span className="text-secondary">{info.rate ? info.rate + "%" : null}</span> <span className="text-secondary">{info.rate !== "" ? info.rate + "%" : null}</span>
</div> </div>
) )
} }
......
...@@ -126,12 +126,8 @@ const Monthly = () => { ...@@ -126,12 +126,8 @@ const Monthly = () => {
timeZone="local" timeZone="local"
themeSystem='bootstrap' themeSystem='bootstrap'
eventLimit={3} eventLimit={3}
moreLinkClick={function(arg) { moreLinkContent={arg => arg.shortText}
console.log("click..?",arg) moreLinkClick={info => history.push(`/schedule/${moment(info.date).format('YYYY-MM-DD')}`)}
}}
moreLinkContent={function(arg) {
return arg.shortText
}}
height='80vh' height='80vh'
/> />
<DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} show={show} setShow={setShow} /> <DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} show={show} setShow={setShow} />
......
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { useHistory, useParams } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import Date from "./DateSet"; import Date from "./DateSet";
import todoApi from "../../apis/todo.api";
import { useAuth } from "../../utils/context";
import catchErrors from "../../utils/catchErrors";
import moment from 'moment'; import moment from 'moment';
import FullCalendar, { createPlugin } from '@fullcalendar/react'; import FullCalendar, { createPlugin } from '@fullcalendar/react';
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import bootstrapPlugin from '@fullcalendar/bootstrap'; import bootstrapPlugin from '@fullcalendar/bootstrap';
const Weekly = () => { const Weekly = () => {
const { user } = useAuth()
const history = useHistory() const history = useHistory()
const { date } = useParams() const { date } = useParams()
const [initialDate, setInitialDate] = useState(moment().format("YYYY-MM-DD"))
const [chooseDate, setChooseDate] = useState(moment(date).format("YYYY-MM-DD")) const [chooseDate, setChooseDate] = useState(moment(date).format("YYYY-MM-DD"))
const [week, setWeek] = useState([ const [week, setWeek] = useState([
{ date: moment(date).day(0).format("YYYY-MM-DD"), rate: "75" }, { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(1).format("YYYY-MM-DD"), rate: "85" }, { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(2).format("YYYY-MM-DD"), rate: "40" }, { date: moment(date).day(2).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(3).format("YYYY-MM-DD"), rate: "100" }, { date: moment(date).day(3).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" }, { date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" }, { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" } { date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
]) ])
const [error, setError] = useState("")
const calendarRef = useRef(null) const calendarRef = useRef(null)
let calendar = null let calendar = null
...@@ -29,27 +35,36 @@ const Weekly = () => { ...@@ -29,27 +35,36 @@ const Weekly = () => {
}) })
useEffect(() => { useEffect(() => {
setChooseDate(moment(date).format("YYYY-MM-DD")) setChooseDate(date)
setWeek([ getTodoList(date)
{ date: moment(date).day(0).format("YYYY-MM-DD"), rate: "7" },
{ date: moment(date).day(1).format("YYYY-MM-DD"), rate: "8" },
{ date: moment(date).day(2).format("YYYY-MM-DD"), rate: "4" },
{ date: moment(date).day(3).format("YYYY-MM-DD"), rate: "100" },
{ date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" },
{ date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" },
{ date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
])
}, [date]) }, [date])
async function getTodoList(date) {
try {
setError("")
let weekArr = []
const result = await todoApi.getTodopercent(user.id, moment(date).day(0).format("YYYY-MM-DD"), moment(date).day(6).format("YYYY-MM-DD"))
for (let i = 0; i < 7; i++) {
const generateDate = moment(date).day(i).format("YYYY-MM-DD")
const find = result.find(el => el.date === generateDate)
if (find) weekArr[i] = find
else weekArr[i] = { date: generateDate, rate: "" }
}
setWeek(weekArr)
} catch (error) {
catchErrors(error, setError)
}
}
function prev() { function prev() {
calendar.prev() calendar.prev()
let date = moment(calendar.getDate()).format('YYYY-MM-DD') const date = moment(calendar.getDate()).format('YYYY-MM-DD')
history.push(`/todo/${date}`) history.push(`/todo/${date}`)
} }
function next() { function next() {
calendar.next() calendar.next()
let date = moment(calendar.getDate()).format('YYYY-MM-DD') const date = moment(calendar.getDate()).format('YYYY-MM-DD')
history.push(`/todo/${date}`) history.push(`/todo/${date}`)
} }
...@@ -91,8 +106,8 @@ const Weekly = () => { ...@@ -91,8 +106,8 @@ const Weekly = () => {
views={{ views={{
week: { week: {
validRange: { validRange: {
start: moment(chooseDate).subtract(3, 'years').format('YYYY-MM[-01]'), start: moment(initialDate).subtract(3, 'years').format('YYYY-MM[-01]'),
end: moment(chooseDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]') end: moment(initialDate).add(3, 'years').add(1, 'months').format('YYYY-MM[-01]')
}, },
dateIncrement: { dateIncrement: {
days: 7 days: 7
......
...@@ -30,7 +30,6 @@ const LoginForm = () => { ...@@ -30,7 +30,6 @@ const LoginForm = () => {
})} })}
onSubmit={async (values, { setSubmitting, resetForm }) => { onSubmit={async (values, { setSubmitting, resetForm }) => {
try { try {
console.log('login values', values)
setError("") setError("")
const result = await login(values) const result = await login(values)
if (result) { if (result) {
......
...@@ -49,7 +49,6 @@ const SignupForm = () => { ...@@ -49,7 +49,6 @@ const SignupForm = () => {
try { try {
setError("") setError("")
const result = await authApi.signup(values) const result = await authApi.signup(values)
// console.log('회원가입 요청 후 result 확인', result, '|', result.status)
if (result.status === 201) { if (result.status === 201) {
alert("회원가입이 완료되었습니다.") alert("회원가입이 완료되었습니다.")
setSuccess(true) setSuccess(true)
......
...@@ -106,7 +106,6 @@ const StudyPlanEditForm = () => { ...@@ -106,7 +106,6 @@ const StudyPlanEditForm = () => {
return ( return (
<div className="pt-5"> <div className="pt-5">
{console.log("studyplan---",studyplan)}
<select className={`form-select mb-4 ${styles.selectInput}`} name="selected" aria-label="Choose subject" onChange={handleChange}> <select className={`form-select mb-4 ${styles.selectInput}`} name="selected" aria-label="Choose subject" onChange={handleChange}>
{subjectList.length !== 0 ? subjectList.map((subject, idx) => { {subjectList.length !== 0 ? subjectList.map((subject, idx) => {
if (idx === 0) return <> if (idx === 0) return <>
......
...@@ -45,3 +45,9 @@ ...@@ -45,3 +45,9 @@
border-color: crimson; border-color: crimson;
} }
} }
.list {
height: 60vh;
overflow-y: auto;
padding-bottom: 4em;
}
\ No newline at end of file
...@@ -19,8 +19,18 @@ const Menu = () => { ...@@ -19,8 +19,18 @@ const Menu = () => {
try { try {
setError("") setError("")
const result = await todoApi.getTodopercent(user.id, moment().format("YYYY-MM-DD")) const result = await todoApi.getTodopercent(user.id, moment().format("YYYY-MM-DD"))
console.log("client resList",result) setTodoList({ ...todoList, ...result })
setTodoList({...todoList, ...result}) } catch (error) {
catchErrors(error, setError)
}
}
async function checkFn(e, todoId) {
try {
setError("")
const check_v = e.target.value === "true" ? true : false
await todoApi.edit({id: todoId, done: check_v}, user.id)
todayTodo()
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -41,13 +51,11 @@ const Menu = () => { ...@@ -41,13 +51,11 @@ const Menu = () => {
<div className="d-flex flex-column justify-content-between flex-grow-1 py-4 ps-3 text-dark" > <div className="d-flex flex-column justify-content-between flex-grow-1 py-4 ps-3 text-dark" >
<div className="user-select-none w-75 ps-3"> <div className="user-select-none w-75 ps-3">
<h2 className="mb-4">To-do</h2> <h2 className="mb-4">To-do</h2>
{todoList.list.length!==0 ? todoList.list.map((todo, idx) => { {todoList.list.length !== 0 ? todoList.list.map((todo, idx) => <div className="d-flex">
if (idx <= 2) return <div className="d-flex"> <p className={`form-check-label border-bottom border-2 text-nowrap fs-5 pb-1 me-3 ${styles.title}`}>{todo.title}</p>
<p className={`form-check-label border-bottom border-2 fs-5 pb-1 me-3 ${styles.title}`}>{todo.title}</p> <input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id={"todoCheck" + idx} value={todo.done} aria-label="checkbox" onClick={(e) => checkFn(e, todo.id)} checked={todo.done} />
<input className={`form-check-input rounded-0 border-dark shadow-none mt-1 ${styles.checkBox}`} type="checkbox" id="inlineCheckbox1" aria-label="checkbox" checked={todo.done} /> </div>) : <div className="text-center border-bottom border-2 pb-1">오늘의 Todo를 등록해 보세요!</div>}
</div> <Link className="d-flex justify-content-center text-dark text-decoration-none mt-2" to={`/todo/${moment().format("YYYY-MM-DD")}`}>
}) : null}
<Link className="d-flex justify-content-center text-dark text-decoration-none" to={`/todo/${moment().format("YYYY-MM-DD")}`}>
<i className="bi bi-plus-lg me-2"></i> <i className="bi bi-plus-lg me-2"></i>
<p className="mb-0">더보기</p> <p className="mb-0">더보기</p>
</Link> </Link>
......
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;
...@@ -5,30 +5,32 @@ import catchErrors from "../../utils/catchErrors"; ...@@ -5,30 +5,32 @@ import catchErrors from "../../utils/catchErrors";
import moment from "moment"; import moment from "moment";
import styles from "./modal.module.scss"; import styles from "./modal.module.scss";
const TodoModal = ({ curDate, selectTodo = "" }) => { const TodoModal = ({ curDate, selectTodo, clicked, setClicked }) => {
const { user } = useAuth() const { user } = useAuth()
const [todo, setTodo] = useState({ const [todo, setTodo] = useState({
todoTitle: "", todoTitle: "",
todoDate: moment(curDate).format("YYYY-MM-DD") todoDate: moment(curDate).format("YYYY-MM-DD")
}) })
const [error, setError] = useState(""); const [error, setError] = useState("")
useEffect(() => { useEffect(() => {
setTodo({ ...todo, todoDate: curDate }) if (clicked) setTodo({ ...todo, ...selectTodo })
}, [curDate]) }, [clicked])
useEffect(() => { useEffect(() => {
if (selectTodo) { setTodo({ ...todo, todoDate: curDate })
console.log("selectTodo 값 변경으로 실행") }, [curDate])
setTodo({ ...todo, ...selectTodo })
}
}, [selectTodo])
const handleChange = (e) => { const handleChange = (e) => {
const { name, value } = e.target const { name, value } = e.target
setTodo({ ...todo, [name]: value }) setTodo({ ...todo, [name]: value })
} }
function handleClick() {
setTodo({ todoTitle: "", todoDate: "" })
setClicked(false)
}
async function handleSubmit() { async function handleSubmit() {
try { try {
setError("") setError("")
...@@ -39,6 +41,7 @@ const TodoModal = ({ curDate, selectTodo = "" }) => { ...@@ -39,6 +41,7 @@ const TodoModal = ({ curDate, selectTodo = "" }) => {
await todoApi.submit(todo, user.id) await todoApi.submit(todo, user.id)
alert("해당 할일이 성공적으로 등록되었습니다.") alert("해당 할일이 성공적으로 등록되었습니다.")
} }
setClicked(false)
window.location.reload() window.location.reload()
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -60,13 +63,13 @@ const TodoModal = ({ curDate, selectTodo = "" }) => { ...@@ -60,13 +63,13 @@ const TodoModal = ({ curDate, selectTodo = "" }) => {
<div className="d-flex justify-content-between mt-4"> <div className="d-flex justify-content-between mt-4">
<label className="col-2 col-form-label ms-2">날짜</label> <label className="col-2 col-form-label ms-2">날짜</label>
<div className="col-8 d-flex align-items-center"> <div className="col-8 d-flex align-items-center">
<input type="date" className="form-control form-control-sm" name="todoDate" onChange={handleChange} value={todo.todoDate} /> <input type="date" className={`form-control form-control-sm shadow-none ${styles.dateInput}`} name="todoDate" onChange={handleChange} value={todo.todoDate} />
</div> </div>
</div> </div>
</div> </div>
<div className="modal-footer bg-white p-1" > <div className="modal-footer bg-white p-1" >
<button type="button" className="btn btn-secondary btn-sm" <button type="button" className="btn btn-secondary btn-sm"
data-bs-dismiss="modal" onClick={() => setTodo({ todoTitle: "", todoDate: "" })}>취소</button> data-bs-dismiss="modal" onClick={handleClick}>취소</button>
<button type="button" className="btn btn-crimson btn-sm" onClick={handleSubmit}>{selectTodo ? "수정" : "확인"}</button> <button type="button" className="btn btn-crimson btn-sm" onClick={handleSubmit}>{selectTodo ? "수정" : "확인"}</button>
</div> </div>
</div> </div>
......
...@@ -19,6 +19,14 @@ ...@@ -19,6 +19,14 @@
} }
} }
.dateInput {
font-size: 0.75rem;
&:focus {
border-color: crimson;
}
}
.cursor { .cursor {
cursor: pointer; cursor: pointer;
} }
\ No newline at end of file
...@@ -24,14 +24,22 @@ const ScheduleCarousel = () => { ...@@ -24,14 +24,22 @@ const ScheduleCarousel = () => {
} }
return ( return (
<div id="scheduleListCarousel" className="carousel slide" data-bs-ride="carousel"> <div id="scheduleListCarousel" className="carousel carousel-dark slide" data-bs-ride="carousel">
<div className="carousel-inner"> <div className="carousel-inner">
{scheduleList.length !== 0 ? {scheduleList.length !== 0 ?
scheduleList.map((schedule, idx) => scheduleList.map((schedule, idx) =>
<div key={idx} className={"carousel-item" + (idx === 0 ? " active" : "")}> <div className={"carousel-item" + (idx === 0 ? " active" : " ")}>
<KU key={idx} schedule={schedule} /> <KU schedule={schedule} />
</div>) : null} </div>) : null}
</div> </div>
<button className="carousel-control-prev" type="button" data-bs-target="#scheduleListCarousel" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#scheduleListCarousel" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div> </div>
) )
} }
......
...@@ -20,7 +20,7 @@ const ScheduleItem = ({ index, curDate, schedule, handleClick }) => { ...@@ -20,7 +20,7 @@ const ScheduleItem = ({ index, curDate, schedule, handleClick }) => {
<div className="col-11">{schedule.location}</div> <div className="col-11">{schedule.location}</div>
</div> : null} </div> : null}
{schedule.memo} {schedule.memo}
<div className="d-flex justify-content-end mt-3"> <div className={"d-flex justify-content-end " + ((schedule.location || schedule.memo) ? "mt-3" : null)}>
<Link className="btn btn-light btn-sm border-dark" to={`/schedule/edit/${schedule.id}`}>수정</Link> <Link className="btn btn-light btn-sm border-dark" to={`/schedule/edit/${schedule.id}`}>수정</Link>
<button type="button" className="btn btn-crimson btn-sm ms-2" onClick={() => handleClick(schedule.id)}>삭제</button> <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={() => handleClick(schedule.id)}>삭제</button>
</div> </div>
......
import PlanItem from "./PlanItem"; import PlanItem from "./PlanItem";
import styles from "./studyplan.module.scss"; import styles from "./studyplan.module.scss";
const AddplanList = ({ planList }) => { const AddplanList = ({ planList, getPlanList }) => {
return ( return (
<div className={`mt-5 ${styles.list}`}> <div className={`mt-4 ${styles.list}`}>
<div className={`accordion accordion-flush`} id="addplanlist"> <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>
</div> </div>
) )
......
...@@ -7,7 +7,7 @@ import styles from "../Schedule/schedule.module.scss"; ...@@ -7,7 +7,7 @@ import styles from "../Schedule/schedule.module.scss";
import styles2 from "./studyplan.module.scss"; import styles2 from "./studyplan.module.scss";
import moment from 'moment'; import moment from 'moment';
const PlanItem = ({ planList = [], subjectId }) => { const PlanItem = ({ planList = [], subjectId, getPlanList }) => {
const { user } = useAuth() const { user } = useAuth()
const [error, setError] = useState("") const [error, setError] = useState("")
const history = useHistory() const history = useHistory()
...@@ -17,16 +17,30 @@ const PlanItem = ({ planList = [], subjectId }) => { ...@@ -17,16 +17,30 @@ const PlanItem = ({ planList = [], subjectId }) => {
setError("") setError("")
await planApi.remove(planId, user.id) await planApi.remove(planId, user.id)
alert("해당 계획을 성공적으로 삭제했습니다.") alert("해당 계획을 성공적으로 삭제했습니다.")
history.push(`/studyplan/${subjectId}`) history.push("/studyplan")
} catch (error) { } catch (error) {
catchErrors(error, setError) 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 ( return (
<> <>
{planList.length !== 0 ? planList.map((plan, idx) => <div className="d-flex"> {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%" }}> <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}> <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> <h5 className={`accordion-header ${styles.title}`} id={"plan-heading" + idx}>{plan.title}</h5>
......
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import styles from "./studyplan.module.scss"; import styles from "./studyplan.module.scss";
const PlanLineList = ({ subjectId, planList = [] }) => { const PlanLineList = ({ subjectId, planList = [], handleClick }) => {
return ( return (
<Link to={`/studyplan/${subjectId}`}> <>
{planList.length !== 0 ? planList.map(plan => <div className="d-flex justify-content-between"> {planList.length !== 0 ? planList.map(plan => <div className="d-flex justify-content-between">
<p className={`card-text mb-1 ${styles.text}`}>- {plan.title}</p> <Link to={`/studyplan/${subjectId}`} className={`col-11 card-text text-decoration-none link-dark mb-1 ${styles.text}`}>- {plan.title}</Link>
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" /> <div className="col d-flex justify-content-end">
</div>) : <Link className="text-decoration-none link-dark" to={`/studyplan/submit/${subjectId}`}> <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" checked={plan.checked} onClick={(e) => handleClick(e, plan.id, plan.checked)} />
<div className="d-flex"> </div>
</div>) : <Link className="d-flex text-decoration-none link-dark" to={`/studyplan/submit/${subjectId}`}>
<i className="bi bi-plus"></i> <i className="bi bi-plus"></i>
<p className="card-text mb-1">새로운 계획 추가하기</p> <p className="card-text mb-1">새로운 계획 추가하기</p>
</div>
</Link>} </Link>}
</Link> </>
) )
} }
......
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import PlanLineList from "./PlanLineList"; import PlanLineList from "./PlanLineList";
import DeleteModal from "../Modal/DeleteModal";
import style from "./studyplan.module.scss";
const StudyPlanCard = ({ renList, handleClick }) => { const StudyPlanCard = ({ renList, handleEdit, delSubject }) => {
return ( return (
<div className="card text-decoration-none link-dark mb-3" style={{ width: "20rem" }} > <>
<div className="card-body"> <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"> <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" onClick={() => handleClick(renList.id)}> <i className="bi bi-trash" data-bs-toggle="modal" data-bs-target="#deleteModal" onClick={(e) => e.preventDefault()}>
</i> </i>
</div> </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> <p className="card-subtitle ms-1 mb-0 text-muted">{renList.prof && renList.room ? renList.prof + ' - ' + renList.room : (renList.prof || renList.room)}</p>
<PlanLineList subjectId={renList.id} planList={renList.planList} /> <div className={`mt-2 ${style.inCard}`} style={{ height: (renList.prof || renList.room ? "50%" : "70%") }}>
<PlanLineList subjectId={renList.id} planList={renList.planList} handleClick={handleEdit} />
</div> </div>
</div> </div>
</Link>
<DeleteModal handleClick={delSubject} renListID={renList.id} />
</>
) )
} }
......
...@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'; ...@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import StudyPlanCard from "./StudyPlanCard"; import StudyPlanCard from "./StudyPlanCard";
import subjectApi from '../../apis/subject.api'; import subjectApi from '../../apis/subject.api';
import planApi from '../../apis/plan.api';
import catchErrors from "../../utils/catchErrors"; import catchErrors from "../../utils/catchErrors";
import { useAuth } from "../../utils/context"; import { useAuth } from "../../utils/context";
import styles from "./studyplan.module.scss"; import styles from "./studyplan.module.scss";
...@@ -27,7 +28,21 @@ const StudyPlanList = () => { ...@@ -27,7 +28,21 @@ const StudyPlanList = () => {
} }
} }
async function delSubject(subjectId) { 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 { try {
setError("") setError("")
await subjectApi.removeSubject(subjectId, user.id) await subjectApi.removeSubject(subjectId, user.id)
...@@ -43,7 +58,7 @@ const StudyPlanList = () => { ...@@ -43,7 +58,7 @@ const StudyPlanList = () => {
return ( return (
<div className={`mt-4 ${styles.list}`}> <div className={`mt-4 ${styles.list}`}>
<div className="d-flex flex-column align-items-center"> <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} handleEdit={checkFn} delSubject={delSubject} />) : 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">
<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>
......
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