Update login and signup using file DB

+{
+	"id": [
+		"jeongmin",
+		"jumi",
+		"sss",
+		"sjeongmin"
+	],
+	"password": [
+		"1234",
+		"1234",
+		"1111",
+		"1111"
+	],
+	"name": [
+		"서정민",
+		"양주미",
+		"정민",
+		"서정민"
+	]
+}

@@ -7,18 +7,31 @@ class User {
         this.body = body;
     }
 
-    login() {
-        const body = this.body
-        const {id, password} = UserStorage.getUserInfo(body.id);
+    async login() {
+        const client = this.body;
+        const {id, password} = await UserStorage.getUserInfo(client.id);
         // console.log(id, password);
+        
         if (id) {
-            if (id === body.id && password === body.password) {
+            if (id === client.id && password === client.password) {
                 return { success: true};
             }
             return { success : false, msg: "비밀번호가 틀렸습니다."};
         }
         return {success: false, msg: "존재하지 않는 아이디입니다."};
     }
+
+    async register() {
+        const client = this.body;
+        try {
+        const response = await UserStorage.save(client);
+        // console.log(response);
+        return response;
+        } catch (err) {
+            
+            return {success: false, msg : err};
+        }
+    }
 }
 
 module.exports = User;
\ No newline at end of file

 'use strict';
+//파일시스템 이용해서 파일 접근 및 DB 관리
+const fs = require("fs").promises;
 
 class UserStorage {
-    //더미데이터
-    // # = private 변수로 은닉화
-    static #users = {
-        id: ["jeongmin", "jumi"],
-        password: ["1234", "1234"],
-        name: ["정민", "주미"],
-    };
 
-    static getUsers(...fields) {
-        const users = this.#users;
+    static #getUserInfo(data, id) {
+        const users = JSON.parse(data);
+        const idx = users.id.indexOf(id);
+        const userKeys = Object.keys(users); // [id, password, name]
+        const userInfo = userKeys.reduce((newUser, info) => {
+            newUser[info] = users[info][idx];
+            return newUser;
+        }, {});
+        // console.log(userInfo);
+        return userInfo;
+    }
+
+    static #getUsers(data, isAll, fields) {
+        const users = JSON.parse(data);
+        if (isAll) return users;
+
         const newUsers = fields.reduce((newUsers, field) => {
             if (users.hasOwnProperty(field)) {
                 newUsers[field] = users[field];
@@ -19,17 +28,36 @@ class UserStorage {
         }, {});
         return newUsers;
     }
+    
+    static getUsers(isAll, ...fields) {
+        return fs
+            .readFile("./src/databases/users.json")
+            .then((data) => {
+                return this.#getUsers(data, isAll, fields);
+            })
+            .catch((err) => console.error);
+    }
 
     static getUserInfo(id) {
-        const users = this.#users;
-        const idx = users.id.indexOf(id);
-        const userKeys = Object.keys(users); // [id, password, name]
-        const userInfo = userKeys.reduce((newUser, info) => {
-            newUser[info] = users[info][idx];
-            return newUser;
-        }, {});
+        return fs
+            .readFile("./src/databases/users.json")
+            .then((data) => {
+                return this.#getUserInfo(data, id);
+            })
+            .catch((err) => console.error);
+    }
 
-        return userInfo;
+    static async save(userInfo) {
+        const users = await this.getUsers(true);
+        //id가 없으면 회원가입 가능
+        if (users.id.includes(userInfo.id)) {
+            throw "이미 존재하는 아이디입니다.";
+        }
+        users.id.push(userInfo.id);
+        users.name.push(userInfo.name);
+        users.password.push(userInfo.password);
+        fs.writeFile("./src/databases/users.json", JSON.stringify(users));
+        return { success: true};
     }
 }
 

@@ -26,13 +26,14 @@
   box-sizing: border-box;
   font-size: 14px;
 }
-.form button {
+.form #button {
   font-family: "Roboto", sans-serif;
   text-transform: uppercase;
   outline: 0;
   background: rebeccapurple;
-  width: 100%;
+  width: 89%;
   border: 0;
+  margin: 0 auto;
   padding: 15px;
   color: #FFFFFF;
   font-size: 14px;
@@ -40,7 +41,7 @@
   transition: all 0.3 ease;
   cursor: pointer;
 }
-.form button:hover,.form button:active,.form button:focus {
+.form #button:hover,.form #button:active,.form #button:focus {
   background: rebeccapurple;
 }
 .form .message {

@@ -26,13 +26,14 @@
   box-sizing: border-box;
   font-size: 14px;
 }
-.form button {
+.form #button {
   font-family: "Roboto", sans-serif;
   text-transform: uppercase;
   outline: 0;
   background: rebeccapurple;
-  width: 100%;
+  width: 89%;
   border: 0;
+  margin: 0 auto;
   padding: 15px;
   color: #FFFFFF;
   font-size: 14px;
@@ -40,7 +41,7 @@
   transition: all 0.3 ease;
   cursor: pointer;
 }
-.form button:hover,.form button:active,.form button:focus {
+.form #button:hover,.form #button:active,.form #button:focus {
   background: rebeccapurple;
 }
 .form .message {

@@ -2,7 +2,7 @@
 
 const id = document.querySelector("#id"),
     password = document.querySelector("#password"),
-    loginBtn = document.querySelector("button");
+    loginBtn = document.querySelector("#button");
 
 loginBtn.addEventListener("click", login);
 

+'use strict';
+
+const id = document.querySelector("#id"),
+    name = document.querySelector("#name"),
+    password = document.querySelector("#password"),
+    confirmPassword = document.querySelector("#confirm-password"),
+    registerBtn = document.querySelector("#button");
+
+registerBtn.addEventListener("click", register);
+
+function register() {
+    if(!id.value) {
+        return alert("아이디를 입력해주세요.")
+    }
+
+    if(!name.value) {
+        return alert("이름을 입력해주세요.")
+    }
+    if(!password.value) {
+        return alert("비밀번호를 입력해주세요.")
+    }
+    if(!confirmPassword.value) {
+        return alert("비밀번호를 확인해주세요.")
+    }
+    if (password.value !== confirmPassword.value) {
+        return alert("비밀번호가 일치하지 않습니다.")
+    }
+
+    const req = {
+        id : id.value,
+        name : name.value,
+        password : password.value,
+    };
+
+    fetch("/register", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(req),
+    })
+        .then((res) => res.json())
+        .then((res) => {
+            if (res.success) {
+                //성공하면 이동
+                location.href = "/login";
+            } else {
+                alert(res.msg);
+            }
+        })
+        .catch((err) => {
+            console.error("회원가입 중 에러 발생");
+        });
+}
\ No newline at end of file

@@ -17,10 +17,17 @@ const output = {
 };
 
 const process = {
-    login: (req, res) => {
+    login: async (req, res) => {
         const user = new User(req.body);
-        const response = user.login();
+        const response = await user.login();
         return res.json(response);
+    },
+
+    register: async (req, res) => {
+        const user = new User(req.body);
+        const response = await user.register();
+        return res.json(response);
+    },
         // const id = req.body.id,
         //     password = req.body.password;
         // const users = UserStorage.getUsers("id", "password");
@@ -38,7 +45,6 @@ const process = {
         // response.success = false;
         // response.msg = "로그인에 실패하였습니다."
         // return res.json(response); 
-    },
 };
 
 module.exports = {

@@ -8,6 +8,8 @@ const ctrl = require("./home.ctrl");
 router.get("/", ctrl.output.hello);
 router.get("/login", ctrl.output.login);
 router.get("/register", ctrl.output.register);
+
 router.post("/login", ctrl.process.login);
+router.post("/register", ctrl.process.register);
 
 module.exports = router;
\ No newline at end of file

@@ -21,7 +21,7 @@
         <form class="login-form">
           <input id="id" type="text" placeholder="아이디" />
           <input id="password" type="password" placeholder="비밀번호" />
-          <button>LOGIN</button>
+          <p id="button">LOGIN</p>
           <p class="message">
             계정이 없으신가요? <a href="/register">회원가입</a>
           </p>

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/css/home/register.css" />
-    <script src="/js/home/login.js" defer></script>
+    <script src="/js/home/register.js" defer></script>
     <title>Document</title>
   </head>
   <body>
@@ -27,7 +27,7 @@
             type="password"
             placeholder="비밀번호 확인"
           />
-          <button>SIGN UP</button>
+          <p id="button">SIGN UP</p>
           <p class="message">계정이 있으신가요? <a href="/login">로그인</a></p>
         </form>
       </div>