로그인구현

parkrocket · Apr 21, 2023 · 5c3f976 · 5c3f976
1 parent 5259a50
commit 5c3f976
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 68 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 4,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": true,
+  "printWidth": 100
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,11 +20,12 @@
     "axios": "^1.3.4",
     "framer-motion": "^10.3.1",
     "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.9",
-    "typescript": "^5.0.3",
+    "typescript": "^5.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/pages/DbLook.jsx b/src/pages/DbLook.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import axios from "axios";
+
+function DbLook() {
+    axios({
+        method: "post",
+        url: "http://54.180.35.70/api/mbSelect",
+    }).then((response) => console.log(response));
+
+    return <div>DbLook</div>;
+}
+
+export default DbLook;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -1,13 +1,16 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Head from '../components/Head';
-import '../Css/login.css';
-import '../Css/media.css';
-
+import React, { useState } from "react";
+import axios from "axios";
+import { useCookies } from "react-cookie";
+import { useNavigate } from "react-router-dom";
+import Head from "../components/Head";
+import "../Css/login.css";
+import "../Css/media.css";
 
 function Login() {
-    const [Id, setId] = useState('');
-    const [Password, setPassword] = useState('');
+    const [Id, setId] = useState("");
+    const [Password, setPassword] = useState("");
+    const [Cookie, setCookie, removeCookie] = useCookies(["x_auth"]);
+    const navigate = useNavigate();
 
     const onIdHandler = (event) => {
         setId(event.currentTarget.value);
@@ -24,10 +27,25 @@ function Login() {
 
         // TODO: services/ 또는 apis 폴더로 빼기 (논의후))
         axios({
-            method: 'post',
-            url: 'http://54.180.35.70/api/users',
+            method: "post",
+            url: "http://54.180.35.70/api/users",
             data: data,
-        }).then((response) => console.log(response));
+        }).then((response) => {
+            if (response.data.success === "failed") {
+                document.getElementById("id").value = "";
+                document.getElementById("password").value = "";
+
+                alert("아이디가 없거나 비밀번호가 틀렸습니다.");
+            } else if (response.data.success === "success") {
+                //alert("로그인 성공");
+
+                setCookie("x_auth", response.data.token);
+                window.localStorage.setItem("userId", response.data.userId);
+
+                navigate("/");
+                console.log(response);
+            }
+        });
 
         event.preventDefault();
     };
@@ -39,19 +57,34 @@ function Login() {
                     <div className="login_title">
                         <h2 className="logo fontf">kakao</h2>
                         <span>kakao 로그인</span>
-                    </div>                   
+                    </div>
                     <form onSubmit={onSubmitHandler}>
                         <div className="log_section">
                             <em>아이디</em>
-                            <input type="text" name="id" defaultValue="" onChange={onIdHandler}></input>
+                            <input
+                                type="text"
+                                name="id"
+                                id="id"
+                                defaultValue=""
+                                onChange={onIdHandler}></input>
                         </div>
                         <div className="log_section">
                             <em>비밀번호</em>
-                            <input type="password" name="password" defaultValue="" onChange={onPasswordHandler}></input>
+                            <input
+                                type="password"
+                                name="password"
+                                id="password"
+                                defaultValue=""
+                                onChange={onPasswordHandler}></input>
+                        </div>
+                        <div className="log_section log_lost">
+                            <a href="#!">아이디/비밀번호 찾기 </a>
                         </div>
-                        <div className="log_section log_lost"><a href="#!">아이디/비밀번호 찾기 </a></div>
                         <div>
-                            <input type="submit" defaultValue="로그인하기" className="login_btn"></input>
+                            <input
+                                type="submit"
+                                defaultValue="로그인하기"
+                                className="login_btn"></input>
                         </div>
                     </form>
                 </div>

diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
@@ -1,57 +1,104 @@
-import React from 'react';
-import Head from '../components/Head';
-import '../Css/login.css';
-import '../Css/media.css';
+import React, { useState } from "react";
+import Head from "../components/Head";
+import axios from "axios";
+import "../Css/login.css";
+import "../Css/media.css";
 
 function Register() {
+    const [Id, setId] = useState("");
+    const [Password, setPassword] = useState("");
+    const [Email, setEmail] = useState("");
+    const [Name, setName] = useState("");
+    const [NickName, setNickName] = useState("");
+
+    const onIdHandler = (event) => {
+        setId(event.currentTarget.value);
+    };
+
+    const onPasswordHandler = (event) => {
+        setPassword(event.currentTarget.value);
+    };
+
+    const onEmailHandler = (event) => {
+        setEmail(event.currentTarget.value);
+    };
+
+    const onNameHandler = (event) => {
+        setName(event.currentTarget.value);
+    };
+
+    const onNickNameHandler = (event) => {
+        setNickName(event.currentTarget.value);
+    };
+
+    const onSubmitHandler = (event) => {
+        const data = { id: Id, password: Password, email: Email, name: Name, nickname: NickName };
+
+        //console.log(data);
+
+        // TODO: services/ 또는 apis 폴더로 빼기 (논의후))
+        axios({
+            method: "post",
+            url: "http://54.180.35.70/api/register",
+            data: data,
+        }).then((response) => console.log(response));
+
+        event.preventDefault();
+    };
+
     return (
         <div>
             <Head></Head>
             <div className="wrap">
                 <div className="login_wrap">
-                    <div className="login_title">
-                        <h2 className="logo fontf">kakao</h2>
-                        <span>kakao 회원가입</span>
-                    </div>
-                    <div className="log_section">
-                        <em>아이디</em>
-                        <input type="text"></input>
-                    </div>
-                    <div className="log_section">
-                        <em>비밀번호</em>
-                        <input type="text"></input>
-                    </div>
-                    <div className="log_section">
-                        <em>이메일</em>
-                        <input type="text"></input>
-                    </div>
-                    <div className="log_section">
-                        <em>실명</em>
-                        <input type="text"></input>
-                    </div>
-                    <div className="log_section">
-                        <em>닉네임</em>
-                        <input type="text"></input>
-                    </div>
-                    <div className="chk_wrap">
-                        <div className="chkbox">
-                            <input type="radio" id="chk_1" name="" />
-                            <label htmlFor="chk_1">
-                                <em>(필수)</em> 이용 약관 동의
-                            </label>
-                            <span className="pop">약관보기 </span>
-                        </div>
-                        <div className="chkbox">
-                            <input type="radio" id="chk_2" name="" />
-                            <label htmlFor="chk_2">
-                                <em>(필수)</em> 개인정보처리방침 동의
-                            </label>
-                            <span className="pop">약관보기 </span>
-                        </div>
-                    </div>
-                    <div>
-                        <input type="submit" defaultValue="회원가입" className="login_btn"></input>
-                    </div>
+                    <form onSubmit={onSubmitHandler}>
+                        <div className="login_title">
+                            <h2 className="logo fontf">kakao</h2>
+                            <span>kakao 회원가입</span>
+                        </div>
+                        <div className="log_section">
+                            <em>아이디</em>
+                            <input type="text" onChange={onIdHandler}></input>
+                        </div>
+                        <div className="log_section">
+                            <em>비밀번호</em>
+                            <input type="text" onChange={onPasswordHandler}></input>
+                        </div>
+                        <div className="log_section">
+                            <em>이메일</em>
+                            <input type="text" onChange={onEmailHandler}></input>
+                        </div>
+                        <div className="log_section">
+                            <em>실명</em>
+                            <input type="text" onChange={onNameHandler}></input>
+                        </div>
+                        <div className="log_section">
+                            <em>닉네임</em>
+                            <input type="text" onChange={onNickNameHandler}></input>
+                        </div>
+                        <div className="chk_wrap">
+                            <div className="chkbox">
+                                <input type="radio" id="chk_1" name="" />
+                                <label htmlFor="chk_1">
+                                    <em>(필수)</em> 이용 약관 동의
+                                </label>
+                                <span className="pop">약관보기 </span>
+                            </div>
+                            <div className="chkbox">
+                                <input type="radio" id="chk_2" name="" />
+                                <label htmlFor="chk_2">
+                                    <em>(필수)</em> 개인정보처리방침 동의
+                                </label>
+                                <span className="pop">약관보기 </span>
+                            </div>
+                        </div>
+                        <div>
+                            <input
+                                type="submit"
+                                defaultValue="회원가입"
+                                className="login_btn"></input>
+                        </div>
+                    </form>
                 </div>
             </div>
         </div>

diff --git a/src/pages/Routes.tsx b/src/pages/Routes.tsx
@@ -5,6 +5,7 @@ import { Introduce } from './Introduce';
 import Login from './Login';
 import Register from './Register';
 import Test from './Test';
+import DbLook from './DbLook';
 
 export const Routes = () => {
     return (
@@ -13,6 +14,7 @@ export const Routes = () => {
         <Route path="/introduce" element={<Introduce />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/dblook" element={<DbLook />} />
         <Route path="/test" element={<Test value={'테스트 컴포넌트 :)😁'} />} />
       </ReactRouterRoutes>
     );