Merge remote-tracking branch 'origin/seoyeon2' into jiweon827

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
+    "nanoid": "^3.1.23",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

client/src/components/Header.js

@@ -6,11 +6,66 @@ const Header = () => {
         style={{ backgroundColor: '#FCF4FF' }}
         className="flex-column align-items-center justify-content-center p-2"
       >
-        <div className="d-flex justify-content-center">
-          <Link to="/">
+        <div className="d-flex justify-content-end">
+          <div>
+          <Link to="/user">
             <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>
           </div>
+          <button
+            type="button"
+            className=" mt-3 ms-5 rounded"
+            data-bs-toggle="modal"
+            data-bs-target="#logout"
+            style={{
+              height: '30px', 
+              backgroundColor: '#E0CEE8',
+              color: 'black',
+              border: '1px #E0CEE8',
+            }}
+          >
+            로그아웃
+          </button>
+          <div
+            className="modal fade"
+            id="logout"
+            tabIndex="-1"
+            aria-labelledby="logoutLabel"
+            aria-hidden="true"
+          >
+            <div className="modal-dialog">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <button
+                    type="button"
+                    className="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                  ></button>
+                </div>
+                <div className="modal-body d-flex justify-content-center">
+                  로그아웃 하시겠습니까?
+                </div>
+                <div className="row mb-3">
+                  <div className="d-flex justify-content-evenly">
+                    {/* <Link to="/user"> */}
+                    <button type="submit" className="col-2 p-1 btn btn-primary">
+                      예
+                    </button>
+                    {/* </Link> */}
+                    <button
+                      type="submit"
+                      className="col-2 p-1 btn btn-primary"
+                      data-bs-dismiss="modal"
+                    >
+                      아니요
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </form>
       <div
         style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}

client/src/components/Login.js

 import { useEffect, useState } from "react";
 import { Redirect } from "react-router-dom";
 import userApi from "../apis/user.api";
+// import catchErrors from "../context/catchError";
 const INIT_USER = {
   email: "",
   password: "",
@@ -25,6 +26,7 @@ const Login = () => {
 
   async function handleSubmit(e) {
     e.preventDefault();
+    console.log('로그인')
     try {
       // setLoading(true);
       // setError("");
@@ -37,12 +39,9 @@ const Login = () => {
       // setLoading(false);
     }
   }
-  if (success) {
-    return <Redirect to="/user" />;
-  }
-
   if (success) {
     alert('로그인 되었습니다')
+    return <Redirect to="/user" />;
   }
 
   const { email, password } = user;

client/src/components/Profile/InfoUpdate.js

@@ -35,7 +35,7 @@ const InfoUpdate = () => {
               type="button"
               className="btn btn-outline-white "
               style={{
-                background: "#E8B7FF",
+                background: "#d4cafb",
                 fontSize: "13px",
                 fontWeight: "bold",
               }}
@@ -95,7 +95,7 @@ const InfoUpdate = () => {
                   borderRight: "0",
                   borderLeft: "0",
                   borderBottom: "1",
-                  borderColor: "#E8B7FF",
+                  borderColor: "#d4cafb",
                   height: "38px",
                   width: "130px",
                 }}
@@ -128,7 +128,7 @@ const InfoUpdate = () => {
                 type="button"
                 className="btn btn-outline-white ms-2"
                 style={{
-                  background: "#E8B7FF",
+                  background: "#d4cafb",
                   fontSize: "13px",
                   fontWeight: "bold",
                 }}

client/src/components/Profile/Profile.js

@@ -18,7 +18,7 @@ const Profile = () => {
                 type="button"
                 className="btn btn-outline-white "
                 style={{
-                  background: "#E8B7FF",
+                  background: "#d4cafb",
                   fontSize: "13px",
                   fontWeight: "bold",
                 }}

client/src/components/Room/RightHamburger.js

@@ -62,9 +62,9 @@ const RightHamberger = () => {
                             style={{
                                 height: '30px',
                                 fontWeight: 'bold',
-                                backgroundColor: '#D64D61',
+                                backgroundColor: '#d86da6',
                                 color: 'black',
-                                border: '1px #D64D61',
+                                border: '1px #d86da6',
                             }}
                         >
                             퇴장    

client/src/components/Room/User.js

@@ -2,7 +2,7 @@ const User = () => {
   return (
     <div className="container">
       <div className="row">
-        <div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px', width: '414px'}}>
+        <div className="col" style={{ backgroundColor: "#ded0fa", position:'absolute', bottom:'58px', width: '414px'}}>
           <p
             className="m-2"
             style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}

client/src/components/SignUp.js

 import axios from "axios";
 import { useEffect, useState } from "react";
-
+import { Redirect } from "react-router-dom";
+import userApi from "../apis/user.api";
+// import catchErrors from "../context/catchError";
+// import auth from "../context/auth_context"
 const INIT_USER = {
   name: "",
   idNumber1: "",
@@ -16,6 +19,7 @@ const Signup = () => {
   const [error, setError] = useState("");
   const [disabled, setDisabled] = useState(false);
   const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     setDisabled(
@@ -38,21 +42,24 @@ const Signup = () => {
 
   async function handleSubmit() {
     try {
-      const data = await axios.post("/api/room/1/1",user)
-      // setLoading(true);
-      // setError("");
+      const data = await userApi.signup(user)
+      // const data = await axios.post("https://localhost:8080/api/room/1/1",user)
+      setLoading(true);
+      setError("");
       // const success = await login(user.email, user.password);
+      // const data = await axios.post("/api/room/1/1",user)
       console.log(data);
-      setSuccess(success);
+      setSuccess(true);
     } catch (error) {
       // catchErrors(error, setError);
     } finally {
-      // setLoading(false);
+      setLoading(false);
     }
   }
 
   if (success) {
     alert('회원가입 되었습니다.')
+    return <Redirect to="/" />;
   }
 
 

client/src/context/catchError.js

+function catchErrors(error, displayError) {
+    let errorMsg
+
+    if (error.response) {
+        errorMsg = error.response.data
+        console.log(errorMsg)
+    }else if (error.requset) {
+        errorMsg = error.requset
+        console.log(errorMsg)
+    } else {
+        errorMsg = error.message
+        console.log(errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors

client/src/scss/custom.scss

-$primary: #e8b7ff;
+$primary: #f5cfe3;
 $secondary: #df99ff;
 $info: #fcf4ff;
 $warning: #ff0000;

controllers/user.controller.js

-import { User } from "../models/index.js";
-import jwt from "jsonwebtoken";
-import config from "../config/app.config.js";
+import { User } from '../models/index.js'
+import jwt from 'jsonwebtoken'
+import config from '../config/app.config.js'
 import isLength from 'validator/lib/isLength.js'
 import bcrypt from "bcryptjs";
 
@@ -12,62 +12,76 @@ const user = async (req, res) => {
 
 const login = async (req, res) => {
   try {
-    console.log("login= ", req.body);
-    const { email, password } = req.body;
-    const user = await User.findOne({ where: { email: email } });
+    console.log('login= ', req.body)
+    const { email, password } = req.body
+    const user = await User.findOne({ where: { email: email } })
     if (!user)
-      return res.status(422).send(`${email} 사용자가 존재하지 않습니다.`);
+      return res.status(422).send(`${email} 사용자가 존재하지 않습니다.`)
 
-    const passworMatch = await user.comparePassword(password);
+    const passworMatch = await user.comparePassword(password)
     if (passworMatch) {
       const token = jwt.sign({ userID: user.id }, config.jwtSecret, {
         expiresIn: config.jwtExpires,
-      });
+      })
       res.cookie(config.cookieName, token, {
-        path: "/",
+        path: '/',
         httpOnly: true,
         secure: true,
-      });
-      res.json({ user });
+      })
+      res.json({ user })
     } else {
-      res.status(401).send("비밀번호가 일치하지 않습니다.");
+      res.status(401).send('비밀번호가 일치하지 않습니다.')
     }
   } catch (error) {
-    console.log(error);
-    return res.status(500).send("로그인 중 에러");
+    console.log(error)
+    return res.status(500).send('로그인 중 에러')
   }
-};
+}
 
 const signup = async (req, res) => {
   try {
-    console.log('signup= ', req.body);
-    const { name, password, id } = req.body; 
-    if (!isLength(name, {min: 3, max: 10})) {
-      return res.status(422).send('이름은 3-10자 사이입니다')
-    } else if (!isLength(password, {min: 6})) {
-      return res.status(422).send('비밀번호는 6자 이상입니다')
-    } else if (!isLength(id, {min:3, max10})) {
-      return res.status(422).send('아이디는 3-10자 사이입니다')
+    console.log('sign up= ', req.body)
+    const { name, email, password, gender, phone } = req.body
+    const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
+    console.log('id:', id)
+    const Id = await User.findOne({ where: { id: id } })
+    console.log('Id 중복확인:', Id)
+    while (Id) {
+      const id = Math.floor(Math.random() * (9999 - 1000) + 1000)
+      const Id = await User.findOne({ where: { id: id } })
     }
-    const user = await User.scope("password").findOne({ where: email });
+
+    const user = await User.findOne({ where: { email: email } })
     if (user)
-      return res.status(422).send(`${email} 이미 존재하는 사용자입니다/+ `);
+      return res.status(422).send(`${email} 이미 존재하는 사용자입니다.`)
 
+    if (!isLength(name, { min: 3, max: 10 })) {
+      return res.status(422).send('이름은 3-10자 사이입니다')
+    } else if (!isLength(password, { min: 6 })) {
+      return res.status(422).send('비밀번호는 6자이상 입니다')
+    } else if (!isLength(email, { min: 3, max: 10 })) {
+      return res.status(422).send('아이디는 3-10자 사이입니다')
+    }
     const hash = await bcrypt.hash(password, 10)
-    const newUser = await new User ({
-      name,
+    const newUser = await User.create({
+      id: id,
+      name: name,
+      email: email,
       password: hash,
-      id
-    }).save()
-    console.log(newUser)
-    res.json(newUser)
+      gender: gender,
+      phone: phone,
+    }).then (_ =>
+      console.log("회원가입 정보",id, name, email, hash, gender, phone)
+    ) 
   } catch (error) {
-    console.log(error);
-    return res.status(500).send("회원가입 중 에러")
+    console.log(error)
+    return res.status(500).send('회원가입 중 에러')
   }
 }
+
+
 export default {
   user,
   login,
   signup,
-};
+}

models/user.model.js

@@ -26,10 +26,11 @@ const UserModel = (sequelize) => {
       },
       img: {
         type: DataTypes.STRING,
+        defaultValue: "/user.png"
       },
-      roomNumber: {
-        type: DataTypes.ARRAY(DataTypes.STRING),
-      },
+      // roomNumber: {
+      //   type: DataTypes.ARRAY(DataTypes.STRING),
+      // },
     },
     { timestamps: true }
   );

package.json

@@ -24,7 +24,7 @@
     "express": "4.17.1",
     "http": "0.0.1-security",
     "jsonwebtoken": "^8.5.1",
-    "nanoid": "^3.1.20",
+    "nanoid": "^3.1.23",
     "nodemon": "^2.0.7",
     "pg": "^8.6.0",
     "pg-hstore": "^2.3.4",