Todo 컴포넌트 분리 및 세부사항 수정

client/src/components/Modal/TodoModal.js

+import styles from "./modal.module.scss";
+
 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 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" >
@@ -10,7 +12,7 @@ const TodoModal = () => {
             </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"
+                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" />

client/src/components/Modal/modal.module.scss

@@ -8,4 +8,13 @@
 
 .body {
     height: 350px
+}
+
+.textInput {
+    border: none;
+    border-bottom: 1px solid #000;
+
+    &:focus {
+        border-color: crimson;
+    }
 }
\ No newline at end of file

client/src/components/TodoList.js

+import TodoModal from "../components/Modal/TodoModal.js";
+import TodoPostModal from "../components/Modal/TodoPostModal.js";
+import styles from "../components/Form/form.module.scss";
+
+const TodoList = () => {
+
+  return (
+      <div className="d-flex mt-3">
+        <div className="d-flex align-items-center" style={{width:"75%"}}>
+          <input className={`form-check-input rounded-0 shadow-none mt-0 ${styles.checkBox}`} type="checkbox" />
+          <label className="form-check-label fs-5 ms-3 pe-2 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>과제03 제출하기sadsa</label>
+        </div>
+        <div className="d-flex justify-content-between" style={{ cursor: "pointer", width:"25%" }}>
+          <i class="bi bi-arrow-right  fs-5" data-bs-toggle="modal" data-bs-target="#postmodal"><TodoPostModal /></i>
+          <i className="bi bi-pencil-square  fs-5" data-bs-toggle="modal" data-bs-target="#todomodal"></i>
+          <TodoModal />
+          <i className="bi bi-trash fs-5"></i>
+        </div>
+      </div>
+  )
+}
+
+export default TodoList;
\ No newline at end of file

client/src/pages/ToDoPage.js

 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
-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";
+import TodoList from "../components/TodoList.js";
 
 const ToDoPage = () => {
     return (
@@ -14,18 +12,7 @@ const ToDoPage = () => {
             <div>
                 캘린더 자리
             </div>
-            <div className="d-flex justify-content-between mt-3">
-                <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 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"></i>
-                    <TodoModal />
-                    <i className="bi bi-trash fs-5"></i>
-                </div>
-            </div>
+            <TodoList />
             <Footer />
         </>
     )