로그인, 회원가입 페이지

client/src/App.js

@@ -11,9 +11,10 @@ import Err from "./pages/ErrorPage";
 function App() {
   return (
     <Router basename={process.env.PUBLIC_URL}>
-      <div className="mx-auto" style={{ width: "400px" }}>
+      <div id="box" className="container mx-sm-auto">
         <Switch>
           <Route exact path="/" component={Err} />
+          <Route path="/login" component={LoginPage} />
           <Route path="/signup" component={SignupPage} />
           <Route path="/home" component={HomePage} />
           <Route path="/schedule/edit" component={ScheduleEditPage} />

client/src/components/LoginForm.js

+import React from 'react';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { Link } from "react-router-dom";
+
+const LoginForm = () => {
+  return (
+    <div>
+      <Formik
+        initialValues={{
+          userId: '',
+          password: '',
+        }}
+
+        validationSchema={Yup.object({
+          userId: Yup.string()
+            .required('아이디를 입력해주세요.'),
+          password: Yup.string()
+            .required('비밀번호를 입력해주세요.'),
+        })}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            alert(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+      >
+        {formik => (
+          <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" }}
+                placeholder="아이디"
+                {...formik.getFieldProps('userId')} />
+              {formik.touched.userId && formik.errors.userId ? (
+                <div className="text-danger " style={{fontSize: "10px"}}>{formik.errors.userId}</div>
+              ) : null}
+            </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" }}
+                placeholder="비밀번호"
+                {...formik.getFieldProps('password')} />
+              {formik.touched.password && formik.errors.password ? (
+                <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.password}</div>
+              ) : null}
+            </div>
+            <div className="d-grid gap-2 mt-5">
+              <button type="submit" className="btn btn-crimson">로그인</button>
+              <Link className="btn btn-crimson" to="/signup">회원가입</Link>
+            </div>
+          </form>
+        )}
+      </Formik>
+    </div>
+  );
+}
+
+export default LoginForm;
+

client/src/components/SignupForm.js

@@ -6,11 +6,15 @@ const SignupForm = () => {
   return (
     <div>
       <div>
-        <h1 className="text-center">회원가입</h1>
+        <button className="btn btn-crimson mt-2"><i className="bi bi-arrow-left"></i></button>
+      </div>
+      <div className="d-inline-block" style={{width:"-webkit-fill-available"}}>
+        <h1 className="text-center my-4"
+        >회원가입</h1>
       </div>
       <Formik
         initialValues={{
-          userID: '',
+          userId: '',
           password: '',
           repassword: '',
           userName: '',
@@ -43,53 +47,70 @@ const SignupForm = () => {
         }}
       >
         {formik => (
-          <form onSubmit={formik.handleSubmit}>
-            <div>
-              <label className="form-label">아이디</label>
-              <input type="text" name="userID"
+          <form onSubmit={formik.handleSubmit} className="mt-5" >  
+            <div className="mb-3 d-flex flex-row">
+              <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"
-                {...formik.getFieldProps('userID')} />
-              {formik.touched.userID && formik.errors.userID ? (
-                <div className="text-secondary">{formik.errors.userID}</div>
+                  style={{ boxShadow: "none", borderRadius: "0" }}
+                  {...formik.getFieldProps('userId')} />
+                {formik.touched.userId && formik.errors.userId ? (
+                  <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userId}</div>
                 ) : null}
               </div>
-            <div>
-              <label className="form-label">비밀번호</label>
+            </div>
+            <div className="mb-3 d-flex flex-row">
+              <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" }}
                   {...formik.getFieldProps('password')} />
                 {formik.touched.password && formik.errors.password ? (
-                <div className="text-secondary">{formik.errors.password}</div>
+                  <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.password}</div>
                 ) : null}
               </div>
-            <div>
-              <label className="form-label">비밀번호 확인</label>
+            </div>
+            <div className="mb-3 d-flex flex-row">
+              <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" }}
                   {...formik.getFieldProps('repassword')} />
                 {formik.touched.repassword && formik.errors.repassword ? (
-                <div className="text-secondary">{formik.errors.repassword}</div>
+                  <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.repassword}</div>
                 ) : null}
               </div>
-            <div>
-              <label className="form-label">이름</label>
+            </div>
+            <div className="mb-3 d-flex flex-row">
+              <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" }}
                   {...formik.getFieldProps('userName')} />
                 {formik.touched.userName && formik.errors.userName ? (
-                <div className="text-secondary">{formik.errors.userName}</div>
+                  <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userName}</div>
                 ) : null}
               </div>
-            <div>
-              <label className="form-label">학번</label>
+            </div>
+            <div className="mb-3 d-flex flex-row">
+              <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" }}
                   {...formik.getFieldProps('userStudNum')} />
                 {formik.touched.userStudNum && formik.errors.userStudNum ? (
-                <div className="text-secondary">{formik.errors.userStudNum}</div>
+                  <div className="text-danger" style={{fontSize: "10px"}}>{formik.errors.userStudNum}</div>
                 ) : null}
               </div>
-            <button type="submit">확인</button>
+            </div>
+            <div className="d-grid gap-2 ">
+              <button type="submit" className="btn btn-crimson my-5">확인</button>
+            </div>
           </form>
         )}
       </Formik>

client/src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './scss/custom.scss';
 import 'bootstrap';
-import 'bootstrap/dist/css/bootstrap.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

client/src/pages/LoginPage.js

 import React from 'react';
-import { Formik } from 'formik';
-import * as yup from 'yup';
-import SignupForm from '../components/SignupForm';
+import LoginForm from '../components/LoginForm';
 
 function LoginPage() {
   return (
     <>
-      <div>
-        <h1>오늘의 KU</h1>
-        <p>-일정관리앱</p>
+      <div className="d-inline-block" style={{width:"-webkit-fill-available"}}>
+        <h1  className="mt-4">오늘의 KU</h1>
+        <p className="ms-4">-일정관리앱</p>
       </div>
+      <LoginForm />
     </>
   );
 }

client/src/scss/custom.scss

+$crimson : #DC143C;
+
 @import "../../node_modules/bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+$custom-colors: (
+    "crimson": $crimson
+);
+    
+$theme-colors: map-merge($theme-colors, $custom-colors);
 
-// @import '~bootstrap/scss/bootstrap.scss';
-// @import '~bootstrap-icons/font/bootstrap-icons'; 
+@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap-icons/font/bootstrap-icons'; 
 
 @font-face {
     font-family: "Plex-Bold";
@@ -39,6 +48,12 @@
     src: url("../fonts/IBMPlexSansKR-Text.ttf");
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, label {
     font-family: "Plex-Bold";
 }
+
+@include media-breakpoint-up(sm) {
+    #box {
+        width: 400px;
+    }
+}