Commit 5da655b9 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

studyplan컴포넌트 분리

parent 8e4e78cc
import styles from "./form.module.scss";
import styles from "../Form/form.module.scss";
import { Link } from "react-router-dom";
const StudyPlanListForm = () => {
const StudyPlanCard= () => {
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>
<h5 className="card-title col-10">운영체제</h5>
<div className="col-2">
<i className="bi bi-pencil-square pe-2"></i>
<i className="bi bi-trash"></i>
</div>
......@@ -27,12 +26,13 @@ const StudyPlanListForm = () => {
</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>
<div className="d-flex ">
<h5 className="card-title col-10 text-nowrap" style={{overflow:"hidden", textOverflow:"ellipsis"}}>네트워크 프로그래밍 실습</h5>
<div className="col-2">
<i className="bi bi-pencil-square pe-2"></i>
<i className="bi bi-trash"></i>
</div>
......@@ -47,20 +47,9 @@ const StudyPlanListForm = () => {
</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
export default StudyPlanCard;
\ No newline at end of file
......@@ -51,11 +51,11 @@ const StudyPlanEditForm = () => {
style={{ boxShadow: "none", borderRadius: "0" }}
placeholder="제목" onChange={handleChange} />
<div className="d-flex mb-3">
<label className="col col-form-label m-2">마감일 </label>
<label className="col col-form-label text-center">마감일 </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")}>
<div className={"col-4 " + (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>
......
import { Link } from "react-router-dom";
import StudyPlanCard from "./Card/StudyPlanCard.js";
const StudyPlanList = () => {
return (
<>
<div>
<StudyPlanCard />
</div>
<div className="d-flex justify-content-center mt-3">
<Link className="text-decoration-none link-dark" to="/subject/edit" style={{ width: "20rem" }}>
<div className="card">
<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 StudyPlanList;
\ No newline at end of file
import Menu from "../components/Menu/Menu.js";
import HomeBtn from "../components/Buttons/HomeBtn.js";
import StudyPlanListForm from "../components/Form/StudyPlanListForm.js";
import StudyPlanList from "../components/StudyPlanList.js";
const StudyPlanListPage = () => {
return (
<>
<Menu />
<HomeBtn />
<StudyPlanListForm />
<h2 className="text-center">학업별 계획</h2>
<StudyPlanList />
</>
)
}
......
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