Skip to content

GitLab

Commit 8e4e78cc authored by Kim, Subin's avatar Kim, Subin
Browse files

Merge remote-tracking branch 'origin/rkyoung7'

parents ff9dad79 ba096590
Show whitespace changes
Inline Side-by-side
client/src/components/Buttons/buttons.module.scss
View file @ 8e4e78cc
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
& .icon { & .icon {
color: crimson; color: crimson;
font-size: 2.7em; font-size: 2.7em;
} }
} }
......
client/src/components/Form/StudyPlanEditForm.js 0 → 100644
View file @ 8e4e78cc
import { useState, useEffect } from 'react';
import BtnGroup from "../Buttons/BtnGroup";
import styles from "./form.module.scss";
const StudyPlanEditForm = () => {
const [studyplan, setStudyplan] = useState({
studyplanTitle: "",
endDate: "",
deadline: "",
memo: ""
})
const [disabled, setDisabled] = useState(true)
useEffect(() => {
let isMounted = true;
const checkInfo = { studyplanTitle: studyplan.studyplanTitle, endDate: studyplan.endDate, memo: studyplan.memo }
if (studyplan.deadline !== "on") {
checkInfo.endTime = studyplan.endTime
} else {
delete checkInfo.endTime
}
if (isMounted) {
const isStudyPlan = Object.values(checkInfo).every((el) => Boolean(el));
isStudyPlan ? setDisabled(false) : setDisabled(true);
}
return () => {
isMounted = false;
}
}, [studyplan])
function handleChange(e) {
const { name, value } = e.target
if (name === "deadline") {
studyplan.deadline !== "on" ? setStudyplan({ ...studyplan, [name]: value }) : setStudyplan({ ...studyplan, [name]: "off" })
} else {
setStudyplan({ ...studyplan, [name]: value })
}
}
return (
<>
<div className="pt-5">
<select className="form-select mb-4" aria-label="Default select example">
<option selected>관련 과목을 선택해주세요.</option>
<option value="1">운영체제</option>
<option value="2">네트워크 프로그래밍 및 실습</option>
<option value="3">수학적 모델링</option>
</select>
<input type="text" name="studyplanTitle"
className="form-control border-top-0 border-end-0 border-start-0 mb-5"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" onChange={handleChange} />
<div className="d-flex mb-3">
<label className="col col-form-label m-2">마감일 </label>
<div className={studyplan.deadline === "on" ? "col-7" : "col-5"}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" aria-label="endDate" onChange={handleChange} />
</div>
<div className={"col-5 " + (studyplan.deadline === "on" ? "d-none" : "d-block")}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" aria-label="endTime" onChange={handleChange} />
</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} />
<label className="form-check-label" htmlFor="deadline">시간 </label>
</div>
<div className="d-flex justify-content-between mb-5">
<i className="col bi bi-journal-text fs-3"></i>
<div className="col-10">
<textarea className={`form-control shadow-none ${styles.textArea}`} name="memo" rows="5" onChange={handleChange}></textarea>
</div>
</div>
<BtnGroup disabled={disabled} />
</div>
</>
)
}
export default StudyPlanEditForm
\ No newline at end of file
client/src/components/Form/StudyPlanListForm.js 0 → 100644
View file @ 8e4e78cc
import styles from "./form.module.scss";
import { Link } from "react-router-dom";
const StudyPlanListForm = () => {
return (
<>
<h2 className="text-center">학업별 계획</h2>
<div className="d-flex justify-content-center mt-3">
<div className="card" style={{ width: "20rem" }}>
<div className="card-body">
<div className="d-flex justify-content-between">
<h5 className="card-title">운영체제</h5>
<div>
<i className="bi bi-pencil-square pe-2"></i>
<i className="bi bi-trash"></i>
</div>
</div>
<p className="card-subtitle mb-2 text-muted">&nbsp;김민호 - 과학기술2관 310호</p>
<div className="d-flex justify-content-between">
<p className="card-text mb-1">- ch02 내용정리하기</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>
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
</div>
</div>
</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 justify-content-between">
<h5 className="card-title">네트워크 프로그래밍 및 실습</h5>
<div>
<i className="bi bi-pencil-square pe-2"></i>
<i className="bi bi-trash"></i>
</div>
</div>
<p className="card-subtitle mb-2 text-muted">&nbsp;임치헌 - 과학기술2관 323호</p>
<Link className="text-decoration-none link-dark" to="/studyplan/edit">
<div className="d-flex">
<i class="bi bi-plus"></i>
<p className="card-text mb-1">새로운 계획 추가하기</p>
</div>
</Link>
</div>
</div>
</div>
<div className="d-flex justify-content-center mt-3">
<Link className="text-decoration-none link-dark" to="/subject/edit">
<div className="card" style={{ width: "20rem" }}>
<div className="card-body d-flex flex-column bg-secondary bg-opacity-25 ">
<div>
<i class="bi bi-plus-lg d-flex justify-content-center fs-3"></i>
<p className="card-text mt-2 text-center">새로운 과목 추가하기</p>
</div>
</div>
</div>
</Link>
</div>
</>
)
}
export default StudyPlanListForm;
\ No newline at end of file
client/src/components/Form/SubjectForm.js 0 → 100644
View file @ 8e4e78cc
import { useState, useEffect } from 'react';
import BtnGroup from "../Buttons/BtnGroup";
import styles from "./form.module.scss";
const SubjectForm = () => {
const [subject, setSubject] = useState({
lectureName: "",
prof: "",
classRoom: ""
})
const [disabled, setDisabled] = useState(true)
useEffect(() => {
let isMounted = true;
const checkInfo = { lectureName: subject.lectureName, prof: subject.prof, classRoom: subject.classRoom }
if (isMounted) {
const isSubject = Object.values(checkInfo).every((el) => Boolean(el));
isSubject ? setDisabled(false) : setDisabled(true);
}
return () => {
isMounted = false;
}
}, [subject])
function handleChange(e) {
const { name, value } = e.target
setSubject({ ...subject, [name]: value })
}
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 border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} 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 border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} name="prof" onChange={handleChange} />
</div>
<div className="mb-5 pt-2 d-flex flex-row">
<label className="form-label fs-4 " style={{ width: "100px" }}>장&nbsp;&nbsp;소</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} name="classRoom" onChange={handleChange} />
</div>
</div>
<div className="pt-2">
<BtnGroup disabled={disabled} />
</div>
</div>
</>
)
}
export default SubjectForm;
\ No newline at end of file
client/src/components/Modal/TodoModal.js 0 → 100644
View file @ 8e4e78cc
const TodoModal = () => {
return (
<>
<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content" style={{ backgroundColor: "crimson" }}>
<div className="modal-header p-1" >
<h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body" style={{ backgroundColor: "white" }}>
<input type="text" name="todoTitle"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" />
<label className="form-label m-2">날짜 </label>
<input type="date" value="2021-10-12" className="ms-4 mt-4" />
</div>
<div className="modal-footer p-1" style={{ backgroundColor: "white" }} >
<button type="button" className="btn btn-secondary btn-sm"
data-bs-dismiss="modal">취소</button>
<button type="button" className="btn btn-crimson btn-sm">확인</button>
</div>
</div>
</div>
</div>
</>
)
}
export default TodoModal;
client/src/pages/StudyPlanEditPage.js
View file @ 8e4e78cc
import { useState } from 'react'; import StudyPlanEditForm from "../components/Form/StudyPlanEditForm.js"
import styles from "../components/Form/form.module.scss";
const StudyPlanEditPage = () => { const StudyPlanEditPage = () => {
const [studyplan, setStudyplan] = useState({
title: "",
endDate: "",
endTime: "",
contents: "",
deadline: "",
})
function handleChange(e) {
const { name, value } = e.target
if (name === "deadline") {
studyplan.deadline !== "on" ? setStudyplan({ ...studyplan, [name]: value }) : setStudyplan({ ...studyplan, [name]: "off" })
} else {
setStudyplan({ ...studyplan, [name]: value })
}
}
return ( return (
<> <StudyPlanEditForm />
<div className="pt-5">
<select className="form-select mb-4" aria-label="Default select example">
<option selected>관련 과목을 선택해주세요.</option>
<option value="1">운영체제</option>
<option value="2">네트워크 프로그래밍 및 실습</option>
<option value="3">수학적 모델링</option>
</select>
<input type="text" name="studyplanTitle"
className="form-control border-top-0 border-end-0 border-start-0 mb-5"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" />
<div className="d-flex mb-3">
<label className="form-label m-2">마감일 </label>
<div className={studyplan.deadline === "on" ? "col-7" : "col-5"}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="date" name="endDate" aria-label="endDate" onChange={handleChange} />
</div>
<div className={"col-5 " + (studyplan.deadline === "on" ? "d-none" : "d-block")}>
<input className={`form-control shadow-none ${styles.dateInput}`} type="time" name="endTime" aria-label="endTime" onChange={handleChange} />
</div>
</div>
<div className="d-flex justify-content-end form-check mb-4">
<input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" id="deadline" name="deadline" onChange={handleChange} />
<label className="form-check-label" htmlFor="deadline">시간 </label>
</div>
</div>
</>
) )
} }
......
client/src/pages/StudyPlanListPage.js
View file @ 8e4e78cc
import Menu from "../components/Menu/Menu.js"; import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js"; import HomeBtn from "../components/Buttons/HomeBtn.js";
import StudyPlanListForm from "../components/Form/StudyPlanListForm.js";
const StudyPlanListPage = () => { const StudyPlanListPage = () => {
return ( return (
<> <>
<Menu /> <Menu />
<HomeBtn /> <HomeBtn />
<StudyPlanListForm />
</> </>
) )
} }
......
client/src/pages/SubjectEditPage.js
View file @ 8e4e78cc
import SubjectForm from "../components/Form/SubjectForm.js"
const SubjectEditPage = () => { const SubjectEditPage = () => {
return ( return (
<> <SubjectForm />
<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" style={{ width: "100px" }}>강의명</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} />
</div>
<div className="mb-5 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>교수명</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} />
</div>
<div className="mb-5 d-flex flex-row">
<label className="form-label" style={{ width: "100px" }}>장소</label>
<input className="form-control border-top-0 border-end-0 border-start-0" style={{ boxShadow: "none", borderRadius: "0" }} />
</div>
</div>
<div className="">
<button className="btn btn-primary" type="button">취소</button>
<button className="btn btn-primary" type="button">확인</button>
</div>
</div>
</>
) )
} }
export default SubjectEditPage; export default SubjectEditPage
\ No newline at end of file \ No newline at end of file
client/src/pages/ToDoPage.js
View file @ 8e4e78cc
// import { Link } from "react-router-dom";
import Menu from "../components/Menu/Menu.js"; import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js"; import HomeBtn from "../components/Buttons/HomeBtn.js";
import styles from "../components/Buttons/buttons.module.scss"; import styles from "../components/Form/form.module.scss";
import TodoModal from "../components/Modal/TodoModal.js";
const ToDoPage = () => { const ToDoPage = () => {
return ( return (
<> <>
<Menu /> <Menu />
<HomeBtn /> <HomeBtn />
<h1>To-do</h1> <h1 className="text-center">To-do</h1>
{/* modal */}
<div> <div>
<button type="button" className={`btn position-absolute ${styles.editBtn}`} 캘린더 자리
data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i className={`bi bi-plus-circle ${styles.icon}`}></i>
</button>
<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content" style={{ backgroundColor: "crimson" }}>
<div className="modal-header p-1" >
<h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body" style={{ backgroundColor: "white" }}>
<input type="text" name="todoTitle"
className="form-control border-top-0 border-end-0 border-start-0"
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" />
<label className="form-label m-2">날짜 </label>
<input type="date" value="2021-10-12" className="ms-4 mt-4" />
</div>
<div className="modal-footer p-1" style={{ backgroundColor: "white" }} >
<button type="button" className="btn btn-secondary btn-sm"
data-bs-dismiss="modal">취소</button>
<button type="button" className="btn btn-crimson btn-sm">확인</button>
</div>
</div> </div>
<div className="d-flex justify-content-between mt-3">
<div className="d-flex flex-row">
<input className={`form-check-input rounded-0 shadow-none mt-1 ${styles.checkBox}`} type="checkbox" />
<p className={`form-check-label fs-5 ms-3 ${styles.title}`}>과제03 제출하기</p>
</div> </div>
<div>
<i class="bi bi-arrow-right pe-2 fs-5"></i>
<i className="bi bi-pencil-square pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><TodoModal /></i>
<i className="bi bi-trash fs-5"></i>
</div> </div>
</div> </div>
<button type="button" className={`btn position-absolute bottom-0 start-0 justify-content-end d-flex justify-content-end w-100 bg-white ${styles.editBtn}`} style={{ boxShadow: "none" }}
data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<i className={`bi bi-plus-circle ${styles.icon}`}></i>
<TodoModal />
</button>
</> </>
) )
......
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