세부사항 수정 완료

client/src/components/Form/LoginForm.js

@@ -4,6 +4,7 @@ import { Formik } from 'formik';
 import * as Yup from 'yup';
 import authApi from '../../apis/auth.api';
 import catchErrors from "../../utils/catchErrors.js";
+import styles from "./form.module.scss";
 
 const LoginForm = () => {
   const [success, setSuccess] = useState(false);
@@ -45,7 +46,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 shadow-none rounded-0"
+                className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                 placeholder="아이디"
                 {...formik.getFieldProps('userId')} />
               {formik.touched.userId && formik.errors.userId ? (
@@ -54,7 +55,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 shadow-none rounded-0"
+                className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                 placeholder="비밀번호"
                 {...formik.getFieldProps('password')} />
               {formik.touched.password && formik.errors.password ? (

client/src/components/Form/SignupForm.js

@@ -4,6 +4,7 @@ import { Formik } from 'formik';
 import * as Yup from 'yup';
 import authApi from '../../apis/auth.api';
 import catchErrors from "../../utils/catchErrors.js";
+import styles from "./form.module.scss";
 
 const SignupForm = () => {
   const [success, setSuccess] = useState(false);
@@ -68,7 +69,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 shadow-none rounded-0"
+                  className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                   {...formik.getFieldProps('userId')} />
                 {formik.touched.userId && formik.errors.userId ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userId}</div>
@@ -79,7 +80,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 shadow-none rounded-0"
+                  className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                   {...formik.getFieldProps('password')} />
                 {formik.touched.password && formik.errors.password ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.password}</div>
@@ -90,7 +91,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 shadow-none rounded-0"
+                  className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                   {...formik.getFieldProps('repassword')} />
                 {formik.touched.repassword && formik.errors.repassword ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.repassword}</div>
@@ -101,7 +102,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 shadow-none rounded-0"
+                  className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                   {...formik.getFieldProps('userName')} />
                 {formik.touched.userName && formik.errors.userName ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userName}</div>
@@ -112,7 +113,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 shadow-none rounded-0"
+                  className={`form-control shadow-none rounded-0 ${styles.textInput}`}
                   {...formik.getFieldProps('userStudNum')} />
                 {formik.touched.userStudNum && formik.errors.userStudNum ? (
                   <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userStudNum}</div>

client/src/components/Modal/TodoModal.js

+import { useState } from "react";
+import moment from "moment";
 import styles from "./modal.module.scss";
 
 const TodoModal = () => {
+  const [todo, setTodo] = useState({
+    todoTitle: "",
+    todoDate: moment().format("YYYY-MM-DD")
+  })
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setTodo({ ...todo, [name]: value })
+  }
+  const handleClick = () => {
+    setTodo({
+      todoTitle: "",
+      todoDate: moment().format("YYYY-MM-DD")
+    })
+  }
+  
   return (
-    <>
-      <div className="modal fade" id="todomodal" 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 px-2 py-1" >
-              <h5 className="modal-title text-white" id="staticBackdropLabel">To-do</h5>
-              <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 shadow-none rounded-0 ${styles.textInput}`}
-                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 className="modal fade" id="todomodal" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="todoLabel" aria-hidden="true">
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content" style={{ backgroundColor: "crimson" }}>
+          <div className="modal-header px-2 py-1" >
+            <h5 className="modal-title text-white" id="todoLabel">To-do</h5>
+            <button type="button" className="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div className="modal-body bg-white">
+            <input type="text" name="todoTitle"
+              className={`form-control border-top-0 border-end-0 border-start-0 shadow-none rounded-0 ${styles.textInput}`}
+              placeholder="제목" onChange={handleChange} value={todo.todoTitle} />
+            <div className="d-flex justify-content-between mt-4">
+              <label className="col-2 col-form-label ms-2">날짜</label>
+              <div className="col-6 d-flex align-items-center">
+                <input type="date" className="form-control form-control-sm" name="todoDate" onChange={handleChange} value={todo.todoDate} />
+              </div>
             </div>
           </div>
+          <div className="modal-footer bg-white p-1" >
+            <button type="button" className="btn btn-secondary btn-sm"
+              data-bs-dismiss="modal" onClick={handleClick}>취소</button>
+            <button type="button" className="btn btn-crimson btn-sm">확인</button>
+          </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

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="m-2">해당 일정을 내일로 미루시겠습니까?</p>
+              <p className="m-2 text-center" style={{ fontSize: "17px" }}>해당 일정을 내일로 미루시겠습니까?</p>
             </div>
             <div className="modal-footer p-1">
               <button type="button" className="btn btn-crimson btn-sm">네</button>

client/src/components/StudyPlan/PlanItem.js

@@ -18,26 +18,32 @@ const PlanItem = () => {
   }
 
   return (
-      <div className="d-flex">
-        <input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{width:"5%"}} type="checkbox" />
-        <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="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
-            <h5 className={`accordion-header ${styles.title}`} id="flush-headingOne">
-              과제02 제출하기, 코딩과제 있음ssssssssss
-            </h5>
-            <p className={`text-secondary mb-0 ${styles.time}`}>~21.09.30 16:00</p>
-          </button>
-          <div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="S#addplanlist">
-            <div className={`accordion-body px-0 pt-2 pb-0 mb-3 ${styles.textBox}`}>
-              컴퓨터의 프로세스 수 체크하는 프로그램 만들기 과제<br />결과화면 캡쳐해서 exe파일이랑 함께 압축하여 제출하기
-              <div className="d-flex justify-content-end mt-3">
-                <Link className="btn btn-light btn-sm border-dark" to="/studyplan/edit">수정</Link>
-                <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
+    <div className="d-flex">
+      <input className={`form-check-input rounded-0 shadow-none mt-1 ${styles2.checkBox}`} style={{ width: "5%" }} type="checkbox" />
+      <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="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+          <h5 className={`accordion-header ${styles.title}`} id="flush-headingOne">
+            과제02 제출하기, 코딩과제 있음ssssssssss
+          </h5>
+          <p className={`text-secondary mb-0 ${styles.time}`}>~21.09.30 16:00</p>
+        </button>
+        <div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="S#addplanlist">
+          <div className={`accordion-body px-0 pt-2 pb-0 mb-3 ${styles.textBox}`}>
+            <div className="d-flex align-items-start fw-bold">
+              <i class="bi bi-clock-history fs-5"></i>
+              <div className="col-11 ms-2 align-self-center">
+                21.09.30 16:00
               </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">수정</Link>
+              <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
+            </div>
           </div>
         </div>
       </div>
+    </div>
   )
 }