병합 오류 수정

client/src/components/Buttons/AddBtn.js

+import TodoModal from "../Modal/TodoModal.js";
+import styles from "./buttons.module.scss";
+
+const AddBtn = () => {
+    return (
+        <>
+            <i className={`bi bi-plus-circle me-2 mb-1 ${styles.icon}`} data-bs-toggle="modal" data-bs-target="#staticBackdrop"></i>
+            <TodoModal />
+        </>
+    )
+}
+
+export default AddBtn
\ No newline at end of file

client/src/components/Buttons/EditBtn.js

@@ -3,7 +3,7 @@ import styles from "./buttons.module.scss";
 
 const EditBtn = ({ pathname }) => {
     return (
-        <Link className={`me-2 mb-1 ${styles.editBtn}`} to={{
+        <Link className="me-2 mb-1" to={{
             pathname: "/" + pathname,
             state: {}
         }}>

client/src/components/Buttons/buttons.module.scss

@@ -11,12 +11,9 @@
     }
 }
 
-.editBtn {
-    & .icon {
-        color: crimson;
-        font-size: 2.7em;
-        
-    }
+.icon {
+    color: crimson;
+    font-size: 2.7em;
 }
 
 .backBtn {

client/src/components/Card/StudyPlanCard.js

 import { useState } from "react";
-import styles from "../Form/form.module.scss";
 import { Link } from "react-router-dom";
+import styles from "../Form/form.module.scss";
 
 const StudyPlanCard = () => {
   const [studyplan, setStudyplan] = useState({
-    subject:"",
-    info:"",
-    contents:[]
+    subject: "",
+    info: "",
+    contents: []
   })
+
   return (
     <>
       <div className="d-flex justify-content-center mt-3">
@@ -15,12 +16,12 @@ const StudyPlanCard = () => {
           <div className="card-body">
             <div className="d-flex justify-content-between">
               <h5 className="card-title col-10">운영체제</h5>
-              <div className="col-2">
+              <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 mb-2 text-muted">&nbsp;김민호 - 과학기술2관 310호</p>
+            <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>
               <input className={`form-check-input shadow-none ${styles.checkBox}`} type="checkbox" />
@@ -38,12 +39,12 @@ const StudyPlanCard = () => {
           <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">
+              <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 mb-2 text-muted">&nbsp;임치헌 - 과학기술2관 323호</p>
+            <p className="card-subtitle ms-1 mb-2 text-muted">임치헌 - 과학기술2관 323호</p>
             <Link className="text-decoration-none link-dark" to="/studyplan/edit">
               <div className="d-flex">
                 <i class="bi bi-plus"></i>

client/src/components/Footer.js

 import EditBtn from "./Buttons/EditBtn.js";
+import AddBtn from "./Buttons/AddBtn.js";
 
-const Footer = ({ pathname }) => {
+const Footer = ({ pathname="todo" }) => {
     return (
         <div className="position-absolute bottom-0 start-0 justify-content-end d-flex justify-content-end w-100 bg-white" style={{ zIndex: "50" }}>
-            <EditBtn pathname={pathname} />
+            {pathname === "todo" ? <AddBtn /> : <EditBtn pathname={pathname} />}
         </div>
     )
 }

client/src/components/Form/LoginForm.js

@@ -44,8 +44,7 @@ const LoginForm = () => {
           <form onSubmit={formik.handleSubmit} className="m-5">
             <div className="mb-3">
               <input type="text" name="userId"
-                className="form-control border-top-0 border-end-0 border-start-0"
-                style={{ boxShadow: "none", borderRadius: "0" }}
+                className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                 placeholder="아이디"
                 {...formik.getFieldProps('userId')} />
               {formik.touched.userId && formik.errors.userId ? (
@@ -54,8 +53,7 @@ const LoginForm = () => {
             </div>
             <div className="mb-3">
               <input type="password" name="password"
-                className="form-control border-top-0 border-end-0 border-start-0"
-                style={{ boxShadow: "none", borderRadius: "0" }}
+                className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                 placeholder="비밀번호"
                 {...formik.getFieldProps('password')} />
               {formik.touched.password && formik.errors.password ? (

client/src/components/Form/ScheduleForm.js

@@ -69,7 +69,7 @@ const ScheduleForm = () => {
     return (
         <form className="pt-5" onSubmit={handleSubmit}>
             <div>
-                <input className={`form-control form-control-lg shadow-none px-1 mb-5 ${styles.textInput}`} type="text" name="title" placeholder="제목" aria-label="title" onChange={handleChange} autoFocus />
+                <input className={`form-control form-control-lg shadow-none rounded-0 px-1 mb-5 ${styles.textInput}`} type="text" name="title" placeholder="제목" aria-label="title" onChange={handleChange} autoFocus />
             </div>
             <div className="d-flex mb-4">
                 <label className="col col-form-label align-self-center py-0">시작</label>
@@ -96,7 +96,7 @@ const ScheduleForm = () => {
             <div className="d-flex justify-content-between align-items-center mb-4">
                 <i className="col bi bi-geo-alt fs-3"></i>
                 <div className="col-10">
-                    <input className={`form-control shadow-none px-1 ${styles.textInput}`} type="text" name="location" placeholder="장소" aria-label="location" onChange={handleChange} />
+                    <input className={`form-control shadow-none rounded-0 px-1 ${styles.textInput}`} type="text" name="location" placeholder="장소" aria-label="location" onChange={handleChange} />
                 </div>
             </div>
             <div className="d-flex justify-content-between mb-5">

client/src/components/Form/SignupForm.js

@@ -67,8 +67,7 @@ const SignupForm = () => {
               <label className="form-label" style={{ width: "100px" }}>아이디</label>
               <div className="flex-col">
                 <input type="text" name="userId"
-                  className="form-control border-top-0 border-end-0 border-start-0"
-                  style={{ boxShadow: "none", borderRadius: "0" }}
+                  className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                   {...formik.getFieldProps('userId')} />
                 {formik.touched.userId && formik.errors.userId ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userId}</div>
@@ -79,8 +78,7 @@ const SignupForm = () => {
               <label className="form-label" style={{ width: "100px" }}>비밀번호</label>
               <div className="flex-col">
                 <input type="password" name="password"
-                  className="form-control border-top-0 border-end-0 border-start-0"
-                  style={{ boxShadow: "none", borderRadius: "0" }}
+                  className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                   {...formik.getFieldProps('password')} />
                 {formik.touched.password && formik.errors.password ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.password}</div>
@@ -91,8 +89,7 @@ const SignupForm = () => {
               <label className="form-label" style={{ width: "100px", wordBreak: "keep-all" }}>비밀번호 확인</label>
               <div className="flex-col">
                 <input type="password" name="repassword"
-                  className="form-control border-top-0 border-end-0 border-start-0"
-                  style={{ boxShadow: "none", borderRadius: "0" }}
+                  className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                   {...formik.getFieldProps('repassword')} />
                 {formik.touched.repassword && formik.errors.repassword ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.repassword}</div>
@@ -103,8 +100,7 @@ const SignupForm = () => {
               <label className="form-label" style={{ width: "100px" }}>이름</label>
               <div className="flex-col">
                 <input type="text" name="userName"
-                  className="form-control border-top-0 border-end-0 border-start-0"
-                  style={{ boxShadow: "none", borderRadius: "0" }}
+                  className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                   {...formik.getFieldProps('userName')} />
                 {formik.touched.userName && formik.errors.userName ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userName}</div>
@@ -115,8 +111,7 @@ const SignupForm = () => {
               <label className="form-label" style={{ width: "100px" }}>학번</label>
               <div className="flex-col">
                 <input type="text" name="userStudNum"
-                  className="form-control border-top-0 border-end-0 border-start-0"
-                  style={{ boxShadow: "none", borderRadius: "0" }}
+                  className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                   {...formik.getFieldProps('userStudNum')} />
                 {formik.touched.userStudNum && formik.errors.userStudNum ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userStudNum}</div>
@@ -124,7 +119,7 @@ const SignupForm = () => {
               </div>
             </div>
             <div className="d-grid gap-2 ">
-              <button type="submit" className="btn btn-crimson my-5">확인</button>
+              <button type="submit" className="btn btn-crimson mt-5">확인</button>
             </div>
           </form>
         )}

client/src/components/Form/StudyPlanEditForm.js

@@ -47,11 +47,10 @@ const StudyPlanEditForm = () => {
                     <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" }}
+                    className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0 mb-5"
                     placeholder="제목" onChange={handleChange} />
                 <div className="d-flex mb-3">
-                    <label className="col col-form-label text-center">마감일 </label>
+                    <label className="col col-form-label align-self-center py-0">마감일</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>

client/src/components/Form/SubjectForm.js

@@ -34,15 +34,15 @@ const SubjectForm = () => {
         <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} />
+            <input className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-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} />
+            <input className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-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} />
+            <input className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0" name="classRoom" onChange={handleChange} />
           </div>
         </div>
         <div className="pt-2">

client/src/components/Form/form.module.scss

@@ -15,7 +15,6 @@
 .textInput {
     border: none;
     border-bottom: 1px solid #000;
-    border-radius: 0;
 
     &:focus {
         border-color: crimson;

client/src/components/Modal/TodoModal.js

@@ -4,14 +4,13 @@ const TodoModal = () => {
       <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" >
+            <div className="modal-header px-2 py-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>
+              <button type="button" className="btn-close btn-close-white" 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" }}
+                className="form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0"
                 placeholder="제목" />
               <label className="form-label m-2">날짜 </label>
               <input type="date" value="2021-10-12" className="ms-4 mt-4" />

client/src/components/Modal/TodoPostModal.js

@@ -5,7 +5,7 @@ const TodoPostModal = () => {
         <div className="modal-dialog modal-dialog-centered">
           <div className="modal-content">
             <div className="modal-body">
-              <p className="form-label m-2">해당 일정을 내일로 미루시겠습니까? </p>
+              <p className="m-2">해당 일정을 내일로 미루시겠습니까?</p>
             </div>
             <div className="modal-footer p-1">
               <button type="button" className="btn btn-crimson btn-sm">네</button>

client/src/pages/ToDoPage.js

-// import { Link } from "react-router-dom";
 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
-import styles from "../components/Form/form.module.scss";
 import TodoModal from "../components/Modal/TodoModal.js";
 import TodoPostModal from "../components/Modal/TodoPostModal.js";
+import Footer from "../components/Footer.js";
+import styles from "../components/Form/form.module.scss";
 
 const ToDoPage = () => {
     return (
@@ -15,22 +15,18 @@ const ToDoPage = () => {
                 캘린더 자리
             </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 className="d-flex align-items-center">
+                    <input className={`form-check-input rounded-0 shadow-none mt-0 ${styles.checkBox}`} type="checkbox" />
+                    <label className={`form-check-label fs-5 ms-3 ${styles.title}`}>과제03 제출하기sadsa</label>
                 </div>
-                <div>
+                <div style={{ cursor: "pointer" }}>
                     <i class="bi bi-arrow-right pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></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-pencil-square pe-2 fs-5" data-bs-toggle="modal" data-bs-target="#staticBackdrop"></i>
+                    <TodoModal />
                     <i className="bi bi-trash fs-5"></i>
                 </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>
-
+            <Footer />
         </>
     )
 }

client/src/scss/custom.scss

@@ -56,6 +56,10 @@ input, label, textarea, p {
     font-family: "Plex-Text";
 }
 
+i {
+    font-style: normal;
+}
+
 button {
     font-family: "Plex-Reg";
 }