스케쥴폼 작성중, 서버연결준비중

client/src/apis/auth.api.js

+import axios from "axios";
+
+const signup = async (user) => {
+  const url = `/api/auth/signup`;
+  const { data } = await axios.post(url, user);
+  return data
+}
+
+const authApi = {
+  signup
+};
+
+export default authApi
\ No newline at end of file

client/src/components/Form/ScheduleForm.js

@@ -68,7 +68,9 @@ const ScheduleForm = () => {
 
     return (
         <form className="pt-5" onSubmit={handleSubmit}>
-            <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 />
+            <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 />
+            </div>
             <div className="d-flex mb-4">
                 <label className="col col-form-label align-self-center py-0">시작</label>
                 <div className={schedule.allDay === "on" ? "col-7" : "col-5"}>

client/src/pages/StudyPlanEditPage.js

+import { useState } from 'react';
+import styles from "../components/Form/form.module.scss";
+
 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 (
         <>
-            <select className="form-select" 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"
-                style={{ boxShadow: "none", borderRadius: "0" }}
-                placeholder="제목" />
-            <label className="form-label m-2">마감일 </label>
-            <input type="date" value="2021-10-12" className="" />
-            <input type="time" value="00:00" className="" />
+            <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>
         </>
     )
 }

server/db/index.js

 import { Sequelize } from "sequelize"
 import dbConfig from "../config/db.config.js"
+import UserModel from "../models/user.model.js";
 
 const sequelize = new Sequelize(
     String(dbConfig.database),
@@ -17,6 +18,9 @@ const sequelize = new Sequelize(
     }
 );
 
+const User = UserModel(sequelize)
+
 export {
     sequelize,
+    User,
 }
\ No newline at end of file

server/models/user.model.js

+import bcrypt from "bcryptjs";
+import Sequelize from "sequelize";
+
+const { DataTypes } = Sequelize;
+
+const UserModel = (sequelize) => {
+  const User = sequelize.define(
+    "user",
+    {
+      userID:{
+        type: DataTypes.STRING
+      },
+    }
+  )
+}
\ No newline at end of file