Feat/19 login (#24)

* formstate err * #19 feat: 로그인 유효성검증 * feat:login-style-prototype * feat:login-style-prototype * test(#19) * feat:19-login-style2(#19) * feat:19-login-style3(#19) * feat/19-login-style(3)
masil-team · Jan 18, 2023 · 5a6bef1 · 5a6bef1
1 parent 478e21e
commit 5a6bef1
Show file tree

Hide file tree

Showing 19 changed files with 1,044 additions and 102 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -17,10 +17,11 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.41.5",
     "react-intersection-observer": "^9.4.1",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/app/src/App.js b/app/src/App.js
@@ -4,6 +4,7 @@ import './reset.css';
 import './App.css';
 import { Main, SignUp, Post } from './pages/index';
 import { PATH } from './constants/path';
+import Login from './pages/Login';
 
 /* prop 타입체크 */
 // import PropTypes from 'prop-types';
@@ -21,6 +22,7 @@ function App() {
       <Routes>
         <Route path={PATH.MAIN} element={<Main></Main>}></Route>
         <Route path={PATH.SIGNUP} element={<SignUp></SignUp>}></Route>
+        <Route path={PATH.LOGIN} element={<Login />}></Route>
         <Route path={PATH.POST} element={<Post></Post>}></Route>
       </Routes>
     </div>

diff --git a/app/src/components/Nav/style.module.css b/app/src/components/Nav/style.module.css
@@ -1,10 +1,73 @@
-.nav{width: 100%;height: 60px;background: #eff2f4; position: fixed; top: 0;left: 0;z-index: 9000;}
-.container{max-width: 1440px; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
+.nav {
+  width: 100%;
+  height: 60px;
+  background: #eff2f4;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+}
+.container {
+  max-width: 1440px;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
 
 /* 로고 */
-.logo{width: 49px;height: 54px; cursor: pointer;}
-.logo img{width: 100%;height: 100%;object-fit: cover;}
+.logo {
+  width: 49px;
+  height: 54px;
+  cursor: pointer;
+}
+.logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@media (max-width: 767px) {
+  .container {
+    padding: 0 10px;
+  }
+  .nav {
+    width: 100%;
+    height: 60px;
+    background: #eff2f4;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9000;
+  }
+  .container {
+    max-width: 1440px;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    margin: 0 auto;
+  }
+}
+/* 로고 */
+.logo {
+  width: 49px;
+  height: 54px;
+  cursor: pointer;
+}
+.logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-@media (max-width : 767px){
-    .container{padding: 0 10px; }
+@media (max-width: 767px) {
+  .container {
+    padding: 0 10px;
+  }
 }
diff --git a/app/src/pages/Login/Form/index.jsx b/app/src/pages/Login/Form/index.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { BASE_URL, USER_URL } from '../../../constants/api';
+import axios from 'axios';
+import { useEffect } from 'react';
+import styles from './style.module.css';
+
+const Form = () => {
+  const { register, handleSubmit, getValues, formState } = useForm();
+  // input 에 들어있는 email value
+  const email = getValues('email');
+  // input 에 들어있는 password value
+  const password = getValues('password');
+  // 회원가입시 전송될 데이터
+  const sendLoginData = async () => {
+    //login api data
+    const user = {
+      email,
+      password,
+    };
+    try {
+      const response = await axios.post(`${BASE_URL} ${USER_URL.LOGIN}`, { user });
+      console.log(response);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  // form 안에 input, error 등이 변할경우 useEffect 실행.
+  useEffect(() => {}, [formState]);
+
+  return (
+    <>
+      <form className={styles.form} onSubmit={handleSubmit(sendLoginData)}>
+        <span className={styles.span}>
+          이메일<span className={styles.spanICon}>*</span>
+          <span className={styles.error}>{formState.errors.email?.message}</span>
+        </span>
+        {/* email 유효성검사 메시지 */}
+
+        {/* password 유효성검사 메시지 */}
+
+        <input
+          className={styles.input}
+          {...register('email', {
+            required: '이메일은 필수 입력입니다.',
+            // email 최소길이
+            minLength: {
+              value: 5,
+              message: '5글자이상 입력해주세요.',
+            },
+            // email 정규식
+            pattern: {
+              value: /^[a-zA-Z0-9]+@[a-z0-9]+\.[a-z]{2,3}/,
+              message: '이메일 형식은 @와 .이들어가야합니다.',
+            },
+            // email 최대길이
+            maxLength: {
+              value: 22,
+              message: '22글자 이하로 입력해주세요.',
+            },
+          })}
+          type="text"
+          placeholder="이메일을 입력해주세요"
+        ></input>
+        <span className={styles.span2}>
+          비밀번호<span className={styles.spanICon}>*</span>
+          <span className={styles.error}>{formState.errors.password?.message}</span>
+        </span>
+        <input
+          className={styles.input}
+          {...register('password', {
+            required: '비밀번호는 필수입니다.',
+            minLength: {
+              // password 최소길이
+              value: 8,
+              message: '비밀번호는 8글자이상입력부탁드립니다',
+            },
+            // password 최대길이
+            maxLength: {
+              value: 14,
+              message: '비밀번호는 14글자 이하로부탁드립니다',
+            },
+            // password 정규식
+            pattern: {
+              value: /[`~!@#$%^&*|₩₩₩'₩";:₩/?]/gi,
+              message: '비밀번호는 특수문자 ~!@#$%^&* 포함해주셔야합니다.',
+            },
+          })}
+          type="password"
+          placeholder="비밀번호를 입력해주세요"
+        ></input>
+        <div className={styles.passwordBox}>
+          <Link to="#">
+            <span>비밀번호 찾기</span>
+          </Link>
+        </div>
+        <button className={styles.btn}>로그인</button>
+        <button className={styles.btn}>회원가입</button>
+      </form>
+    </>
+  );
+};
+
+export default Form;