feature(#7):로그인 기능 구현했습니다

modern-agile-team · Feb 20, 2024 · c586ae6 · c586ae6
1 parent a6853a7
commit c586ae6
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 5 deletions.
diff --git a/front/src/components/HomePage/HomeButton.js b/front/src/components/HomePage/HomeButton.js
@@ -12,6 +12,7 @@ export default function HomeButton(props) {
             margin: props.margin,
           }}
           className="button"
+          onClick={props.onClick}
         >
           {props.text}
         </div>

diff --git a/front/src/components/HomePage/Login.js b/front/src/components/HomePage/Login.js
@@ -1,12 +1,50 @@
-import {useState} from "react"
+import {useState, useEffect} from 'react';
 import Header from './Header';
 import HomeButton from './HomeButton';
 import LoginBody from './LoginBody';
 import UserInput from './UserInput';
+import {useNavigate} from 'react-router-dom';
 
 export default function Login() {
-  const [loginId, setLoginn] = useState();
+  const [getauthId, setId] = useState('');
+  const [getauthPw, setPw] = useState('');
+  const navigate = useNavigate();
 
+  function login() {
+    if (getauthId.length > 8 && getauthPw.length > 8) {
+      fetch('15.164.231.77:3000/auth/login', {
+        method: 'GET',
+        headers: [['content-type', 'application/json']],
+        body: JSON.stringify({
+          ID: getauthId,
+          PW: getauthPw,
+        }),
+      })
+        .then(response => response.json())
+        .then(result => {
+          if (result.data.acessToken) {
+            localStorage.setItem('accesstoken', result.data.acessToken);
+            localStorage.setItem('refreshtoken', result.data.refreshToken);
+            navigate(`http://localhost:3000/NORANG`);
+          }
+        })
+        .catch(() => {
+          console.log('에러');
+        });
+    } else {
+      alert('끄지세요');
+    }
+  }
+
+  const onchangeId = e => {
+    setId(e.target.value);
+  };
+
+  const onchangePw = e => {
+    setPw(e.target.value);
+  };
+
+  console.log(getauthId, getauthPw);
   return (
     <>
       <div
@@ -18,8 +56,13 @@ export default function Login() {
         <Header />
 
         <LoginBody />
-        <UserInput text="아이디" key="loginId" />
-        <UserInput text="비밀번호" key="loginPassword" />
+        <UserInput text="아이디" key="loginId" UserInput={onchangeId} />
+        <UserInput
+          text="비밀번호"
+          key="loginPassword"
+          // type="password"
+          UserInput={onchangePw}
+        />
         <div
           style={{
             display: 'flex',
@@ -32,6 +75,7 @@ export default function Login() {
             width="13vw"
             height="7vh"
             margin="60px 20px"
+            onClick={login}
           />
           <HomeButton
             link="/"

diff --git a/front/src/components/HomePage/UserInput.js b/front/src/components/HomePage/UserInput.js
@@ -15,7 +15,8 @@ export default function UserInput(props) {
           {props.text}
         </span>
         <input
-          type="text"
+          name="kkk"
+          type={props.type}
           id={props.key}
           style={{
             width: '60%',
@@ -25,6 +26,7 @@ export default function UserInput(props) {
             marginLeft: '10px',
             outline: 'none',
           }}
+          onChange={props.UserInput}
         ></input>
       </div>
     </>

diff --git a/front/src/testdb/db.json b/front/src/testdb/db.json
@@ -0,0 +1,8 @@
+{
+  "user": [
+    {
+      "id": "dmsdnWkd1234",
+      "pw": "1234"
+    }
+  ]
+}